微信小程序開發總結（詳細）

時間 2019-11-19

標籤微信程序開發總結詳細简体版

原文原文鏈接

轉載：css

小程序開發總結（詳細）

這段時間一直在作小程序，總結下。後續可能會不斷更新，努力寫仔細點，爭取讓人看到就能會寫。html

一，頁面結構。前端

這基本是小程序的標準目錄結構。咱們從上到下解釋下：pages文件夾放置咱們全部用到的頁面，基本是一個頁面一個文件夾，相似模塊。每一個頁面中，有四個文件（有的可能不會有.json文件）。分別是:js/json/wxml/wxss.jquery

.js:是頁面的腳本文件，是必要的。在這個文件中咱們能夠監聽並處理頁面的生命週期函數、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。css3

.json：是頁面的配置文件，頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。若是沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。es6

.wxml：是頁面的結構文件。是必要的。至關於咱們經常使用的html。web

.wxss：是頁面的樣式表，頁面的樣式表是非必要的。json

接下來的目錄是個public文件夾，這是我本身新建的文件夾，用來存放圖片等。小程序

下面是個tpl文件夾，template，就是存放頁面所用到的模板文件。都是本身新建的。微信小程序

最下邊是個utils文件夾，裏面有一個utils.js，通常咱們會在其中放入一些公用類的方法，好比封裝好的一些通用的方法。可供咱們隨時調用。

最下邊是四個app.js/spp.json/app.wxss/project.config.json 其中的前三個，是整個項目的核心。

app.js是小程序的腳本代碼。咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。

app.json是對整個小程序的全局配置。咱們能夠在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口,背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何註釋!

app.wxss是整個小程序的公共樣式表。咱們能夠在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。

project.config.json是項目的配置文件，裏面有咱們全部項目配置的信息，包括是否支持es6，appid等設置和信息。

……

二，wxhl語法

wxhl跟html同樣，都有本身標籤的語法規則。區別比較大的，div塊元素，都是用<view></view>這種雙標籤。並且，不存在有h5新標籤：header等。

img標籤：<image></image> 雙標籤

文字標籤:<text></text>雙標籤

a標籤:<navigator url="../navigator/navigator?title=我是navi">跳轉到新的頁面</navigator> （同時也是頁面跳轉的一個方法）

更多的不一樣，咱們不在標籤上詳細敘述。咱們來談一談，小程序最佳的佈局方式。flex佈局

什麼是flex佈局？

display：flex 是將元素做爲彈性伸縮盒顯示，早在css3就有。

舉個例子：定義一個容器，裏面包含幾個子元素。

<div style="width:400px; height: 120px; background: #ddd;  display: flex;flex-flow: row;">
    <div style="border: #fff solid 1px;  width: 100px;>jquery特效</div>
    <div style="border: #fff solid 1px;  width: 100px;><a href="">微信小程序開發</a></div>
    <div style="border: #fff solid 1px; width:100px;><a href="">web前端開發</a></div>
</div>

display flex容器的屬性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction屬性

flex-direction屬性決定主軸的方向（即項目的排列方向）。

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

row（默認值）：主軸爲水平方向，起點在左端。
row-reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column-reverse：主軸爲垂直方向，起點在下沿。

flex-wrap屬性

默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

（1）nowrap（默認）：不換行。

（2）wrap：換行，第一行在上方。

（3）wrap-reverse：換行，第一行在下方。

flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

.box {
flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式。

.box {

justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start（默認值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

align-items屬性

align-items屬性定義項目在交叉軸上如何對齊

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

align-content屬性

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

.box {

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸。

項目的屬性

如下6個屬性設置在項目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

.item {
order: <integer>;
}

flex-grow屬性

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

.item {
flex-grow: <number>; /* default 0 */
}

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

.item {
flex-shrink: <number>; /* default 1 */
}

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。
負值對該屬性無效。

flex-basis屬性

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

.item {
flex-basis: <length> | auto; /* default auto */
}

它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

align-self屬性

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致。

這就是基本的flex佈局，只能說，在小程序上，不要太好用。（注：flex佈局內容來自阮一峯阮大大。原文地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）

三，js 頁面腳本配置。小程序的生命週期。

app.js頁面

我截了個圖，在app.js頁面，咱們看到，全部都是由一個app();包裹。而它在咱們官方文檔上，有着詳細記錄。

這是小程序頁面js腳本的初始配置。

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
    
  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {
    
  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {
    
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

page()是在小程序上註冊一個頁面。詳情如官方文檔。

這部分再也不過多敘述，由於官網上寫的真的是很詳細。以後，會在這裏更新一些日常開發中遇到的一些問題。先到這裏吧，感謝阮大大的總結，能讓我拿來就給大家展現。

2017/10/23-am:10:30