學會一項開發技能最快的步驟就是：準備，開火，瞄準。最慢的就是：準備，瞄準，瞄準，瞄準……

因為微信小程式比較簡單，直接開擼就行，千萬別瞄準。
於是乎，趁著今天上午空氣質量不錯，擼了一個小程式，放在了男性交友網站上了， 我添加了很全的註釋，大家賞個star。

功能介紹

我計劃多加一些功能，爭取把微信小程式提供的功能全用一遍。

也許你可以學到的東西

1. css的優先順序 程式碼見: /pages/air_quality/result.wxss
2. 頁面跳轉,資料的傳遞 /pages/air_quality/air_quality.js ../result.js common/utils.js
3. 網路請求 /pages/air_quality/air_quality.js
4. 樣式統一 程式的配置 參考 app.wxss app.json
5. modal顯示和隱藏 /pages/air_quality/air_quality.wxml ../air_quality.js
6. 狀態機 事件繫結等等

css優先順序

微信樣式檔案，其實就是css樣式做了個加減法，就變成了wxss檔案。
其中增加了一個單位 rpx（responsive pixel）: 可以根據螢幕寬度進行自適應。不是絕對畫素，類似Android中的dp單位。參考官方文件

除去上面的，剩下的wxss和css大部分還是一樣的，包括樣式選擇的優先順序。

原則一： 繼承不如指定
原則二： #id > .class > 標籤選擇符
原則三：越具體越強大
原則四：標籤#id >#id ; 標籤.class > .class

CSS優先順序權重計演算法

CSS優先順序包含四個級別（標籤內選擇符，ID選擇符，Class選擇符，元素選擇符）以及各級別出現的次數!

根據這四個級別出現的次數計算得到CSS的優先順序。

CSS優先順序的計算規則如下：
* 元素標籤中定義的樣式（Style屬性）,加1,0,0,0
* 每個ID選擇符(如 #id),加0,1,0,0
* 每個Class選擇符(如 .class)、每個屬性選擇符(如 [attribute=])、每個偽類(如 :hover)加0,0,1,0
* 每個元素選擇符（如p）或偽元素選擇符(如 :firstchild)等，加0,0,0,1
然後，將這四個數字分別累加，就得到每個CSS定義的優先順序的值，
然後從左到右逐位比較大小，數字大的CSS樣式的優先順序就高。

囉嗦了這麼多 ,不如直接看例子，專案中result.wxml檔案中佈局:

<View class="page">
    <view class="container" style="align-items: center">
         <!--...-->
        <view class="text_area">
        <text >
            查詢城市: {{city}}
        </text>
           <!--...-->
        </view>
    </view>
</View>

其中class="page"中的page定義樣式有:

.page {
    ...
    font-size: 32rpx;
}

Text標籤也指定了font-size樣式

text {
    font-size: 34rpx; 
}

當前位置由於 class page中指定了font-size,Text標籤也制定了該屬性， 雖然標籤優先順序不如class高, 但是原則一:繼承不如指定，所以34rpx生效。

頁面的跳轉

再小的程式，一個介面也不太夠用，跳轉介面還是必須的。
微信提供了navigator元件，當用戶按下該元件時跳轉，這屬於靜態跳轉，類似網頁中的a標籤;
也可以在觸發某些事件時，通過導航Api 跳轉介面，這種做法比較靈活。

//跳轉地址可以寫相對路徑,絕對路徑一定要以/ 開頭 這樣寫pages/air_quality/result是錯誤的
wx.navigateTo( {  
      url:util.createURL( "./result", res.data.retData),
});

路徑後面可以通過? 拼裝要傳遞的資料, 類似網路中get請求拼裝url一樣。
上面createURL就是我寫的一個工具方法 ，在專案的common/utils.js檔案中。

/*連結和引數*/
function createURL( url, obj ) {
  let props = "";
  let resultURL="";  
  for(let p in obj){  
    if(obj[p])
    props+= "&"+p + "=" + obj[p];  
  }
  resultURL=url+"?"+props.substr(1);
  console.log(resultURL);
  return resultURL;  
}

module.exports = {
  createURL: createURL
}

網路請求

具體寫法可以參考官方文件

下面是我的程式碼:

    //聯網
    wx.request( {
      //url
      url: Constant.AIR_QUALITY_URL,
      header: {
        "Content-Type": "application/json",
        "apikey": Constant.API_KEY
      },
      data: {
        "city": this.data.inputValue
      },
      //res = {data: '開發者伺服器返回的內容'}
      success: function( res ) {
        console.log( res.data );
        if( res.data.errNum === 0 ) { //成功
        //跳轉地址可以寫相對路徑,絕對路徑一定要以/ 開頭 這樣寫pages/air_quality/result是錯誤的
          wx.navigateTo( {  
            url:util.createURL( "./result", res.data.retData),
          });
        }else{
          that.setData( { //這個位置應該用page的引用呼叫
            modalHidden: false,
            modalErrorText:res.data.retMsg
          });
        }

      },
      //失敗,彈出modal
      fail: function() {
        //console.log(this); //這時候的this不是Page了
        that.setData( { //這個位置應該用page的引用呼叫
          modalHidden: false,
           modalErrorText:"請求失敗,請檢測網路"
        })
      },
      //無論成功與失敗,loading都取消
      complete: function() {
        that.setData( {
          loading: false
        })
      }
    });

頁面統一樣式

微信小程式的api不是很多，比較容易上手， 但是寫出來一個好的程式還是需要仔細研究的，建議大家看一下微信提供的設計文件

好看的程式不一定好用，但是好用的程式一定好看。哪怕是個充氣的，你也肯定選好看的那個。

為了每個介面樣式統一，大家可以把相關樣式抽取到app.wxss檔案中，這個檔案的樣式其它所以介面都可以直接使用。

下面是專案裡的app.wxss,因為涉及的頁面較少，用到的樣式不多，目前就下面幾個：

/**app.wxss**/
page {
  background-color: #fbf9fe; 
  height: 100%;
}
/**容器 flex-direction: column 表示元素垂直排列*/
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 200rpx 0rpx;
} 

 /**page 用於頁面根標籤 overflow超出範圍的裁剪**/
.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}
 /**頁面中的input的元件**/
.page input{
    padding: 20rpx 30rpx;
    background-color: #fff;
}

/**段落*/
.section{
    margin-bottom: 80rpx;
}
/**段落標題*/
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}

/**button範圍*/
.btn-area{
    padding: 0 30rpx;
}
/**button*/
.btn-area button{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}

狀態機

微信框架重新整理介面的方式類似React Native的狀態機。之前寫過一篇從零學React Native之02狀態機

微信每個頁面都可以設定data資料。如我的專案中的：

Page( {
  data: {  //狀態機資料
    inputValue: "", //輸入的內容
    loading: false, //載入狀態
    disabled: true, //按鈕是否可用
    modalHidden: true, //modal彈出狀態
    modalErrorText:"請求失敗,請檢測網路"//modal彈出提示文字
  },
  ....
}

data裡的資料一般用來控制介面的變化。

data裡的資料不要隨便亂寫, 只設置和介面相關的。因為裡面的資料一旦發生變化就會重新整理介面，無關的資料只會加重渲染的壓力。

data裡面的資料，可以在wxml檔案中通過 {{js資料}}格式繫結。

最後強調, 只能使用setData函式改變狀態機變數

最後吐槽

世界上只有兩種程式，一種是天天捱罵的，另一種是沒人用的。

微信小程式的開發環境非常難用，簡直在侮辱開發環境這個詞。連個自動閉合標籤都沒有，好多提示都沒有（沒提示誰會寫程式碼啊），用中文輸入法就會發現好的問題，想寫中文註釋需要時刻保持shift鍵切換，千萬別忘了。

如果不想用它，也沒問題， 用webStorm也可以寫， 但是目前除錯還是在微信開發環境中好用點。

webStorm需要配置 *.wxss和 *.wxml 的檔案型別。 wxss對應css , wxml對應xml或者html

有興趣學習微信小程式開發的可以關注簡書專題 微信小程式開發

更多精彩請關注微信公眾賬號likeDev