開發了一個微信小程序項目

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

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

地址：https://github.com/yll2wcf/wechat-weapp-lifeTools

功能介紹

功能比較簡單，調用了百度ApiStore的接口即時查詢空氣質量。

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

也許你可以學到的東西

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