微信小程序的那些坑

早聞微信小程序是個坑，結果名不虛傳，細數一下我開發小程序遇過到坑。

 

1.UI組件過分封裝。

微信小程序的組件是模仿react.js或vue.js的web組件設計的，而且封裝了weui.css樣式。

PS：實現自定義多選或多選。（看微信小程序開發社區的問題，沒有很完整的解決方案，因而本身摸索了一個方法）

wxml

<checkbox-group class="checkbox-group">
      <label class="checkbox-label">
          <checkbox value="A"></checkbox>
          <view class='checkbox-text'>A</view>
      </label>
      <label class="checkbox-label">
          <checkbox value="B"></checkbox>
          <view class='checkbox-text'>B</view>
      </label>
      <label class="checkbox-label">
         <checkbox value="C"></checkbox>
         <view class='checkbox-text'>C</view>
      </label>
</checkbox-group>

wxss

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-label {
  width: 33.2%;
}

.checkbox-text {
  background: #fff;
  position: relative;
  text-align: center;
  border: 1px solid #000;
  margin-right: -1px;
  margin-bottom: -1px;
}

checkbox {
  display: none;
}
checkbox[checked] + .checkbox-text {
  color: #fff;
  background: red;
  border: 1px solid #000;
}

效果

 

2.語法糖是各類前端框架的大雜燴。

魔改html標籤

<text class="user-name">Sroot</text>

類vuejs數據綁定

wxml

<view> {{ message }} </view>

wxs

this.setData({ message : "Hello World" })

類vuejs生命週期

小程序有app、page、組件生命週期

wxs

//app
App({
  onLaunch(options) {
    // 生命週期回調——監聽小程序初始化。
  },
  onShow(options) {
    // 生命週期回調——監聽小程序啓動或切前臺。
  },
  onHide() {
    // 生命週期回調——監聽小程序切後臺。
  }
})

//page
Page({
  onLoad: function(options) {
    // 生命週期回調—監聽頁面加載。
  },
  onShow: function() {
    // 生命週期回調—監聽頁面顯示。
  },
  onReady: function() {
    // 生命週期回調—監聽頁面初次渲染完成。
  },
  onHide: function() {
    // 生命週期回調—監聽頁面隱藏。
  },
  onUnload: function() {
    // 生命週期回調—監聽頁面卸載。
  }
})

//Component 新版寫法
Component({
  lifetimes: {
    created: function() {
      //在組件實例剛剛被建立時執行。
    },
    attached: function() {
      //在組件實例進入頁面節點樹時執行。
    },
    ready: function() {
      //在組件在視圖層佈局完成後執行。
    },
    moved: function() {
      //在組件實例被移動到節點樹另外一個位置時執行。
    },
    detached: function() {
      //在組件實例被從頁面節點樹移除時執行。
    }
  }
})

類reactjs與vuejs組件 

wxml組件

<template name="XXX">
  <view>
    <text> name: {{name}} </text>
  </view>
</template>

wxml

<template is="XXX" data="{{name}}"/>

wxs

Page({
  data: {
    name: "Sroot"
  }
})

 

3.不支持Cookie本地緩存。

只能用Storage，不能用Cookie存儲數據。（cookie最大優點就是能夠設置是否可修改與設置過時時間）

PS：若是是獨立帳號登錄的微信小程序，只能採用微信小程序API提供的localstorage存儲登錄數據。

 

4.調試頁面比較麻煩。

不一樣於微信公衆號頁面，不能直接從地址欄訪問某個頁面，只能編譯第一個頁面。

解決方法：（1）在微信開發者工具設置「添加編譯模式」。

                   

                   （2）填寫相應參數。

                    

                    （3）選擇對應編譯模式，就能夠直接運行某個頁面調試。

                      

PS：也能夠經過project.config.json文件設置頁面。

{
  ...
    "condition": {
        ...
        "miniprogram": {
            "current": -1,
            "list": [
                {
                    "id": -1,
                    "name": "hello",
                    "pathName": "pages/index/index",
                    "query": "",
                    "scene": null
                },
                {
                    "id": -1,
                    "name": "detail",
                    "pathName": "pages/detail/index",
                    "query": "",
                    "scene": null
                }
            ]
        }
    }
}

 

5.微信小程序發佈須要審覈。

小程序應用發佈與移動應用商店發佈流程類似，須要審覈才能發佈。

PS：若是是以獨立帳號登錄（不是微信受權登錄）使用的微信小程序，須要提交審覈兩次，第二次提交審覈纔會出現填寫提供測試帳號。（什麼鬼邏輯，第一次不能直接提供嗎）

 

微信小程序開發坑歸坑，但在某些方面要比微信公衆號開發更方便，用戶體驗更好。

1.微信開發者工具自帶代碼編輯器。

PS：代碼編輯器提供代碼格式化，API語法提示，資源路徑提示，命令面板等功能，不必使用其餘編輯器編寫。（僅限微信小程序）

         吐槽一下，簡直就是微信小程序版vscode。

 

2.沒必要要作過多的兼容處理。

PS：微信自己就強制升級版本，基本上無需作低版本兼容處理。

 

3.沒必要要使用第三方的類庫。

PS：微信小程序自己就封裝了一些經常使用的方法與UI組件（ajax請求，單向數據綁定，swiper組件，tabbar組件）。

 

4.可定製頂部導航欄。

   頁面配置文件。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "xx商城",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

PS：微信公衆號頁面禁止下拉的問題比較麻煩，不容易控制，但微信小程序能夠控制頁面是否可下拉。

 

5.可以調用更多的設備功能。

增長震動， 剪貼板，NFC等設備功能。

PS：微信小程序調用設備接口比微信公衆號更快一些。

 

6.提供接入客服功能。

方便客戶與客服之間溝通。

PS：不用額外建羣或加好友進行技術支持。

 

總之，學會了微信小程程序開發，其餘平臺的小程序都會開發。（微信小程序竟然是小程序行業的領頭者，其餘平臺的小程序開發語法基本大同小異，沒什麼區別。）