微信小程序那些開發缺點

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

 

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.333%;
} .checkbox-text { background: #fff; position: relative; text-align: center; border: 1px solid #000;
} checkbox { display: none;
} checkbox[checked]+.checkbox-text { color: #fff; background: red; border: 1px solid #000;
}

 

效果

 

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

魔改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" } })

 

不支持圖片文件的相對路徑引用。

/* 錯誤 */ .logo { background: url('img/logo.png');
}

/* 正確 */
/* 方法一 */ .logo { background: url('http://www.sroot.com/img/logo.png');
}

/* 方法二 */ .logo { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAYAAABxlTA0AAAKQ2lDQ1BJQ0MgcHJvZmlsZQAAeNqdU3dYk/cWPt/3ZQ9WQtjwsZdsgQAiI6wIyBBZohCSAGGEEBJAxYWIClYUFRGcSFXEgtUKSJ2I4qAouGdBiohai1VcOO4f3Ke1fXrv7e371/u855zn/M55zw+); }

PS：<image>組件支持相對路徑引入。

<image src="./../../assets/img/logo.png"></image>

       

不支持Cookie本地緩存。

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

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

補充：看文檔。

wx.setStorage({ key:"key", data:"value" }) try { wx.setStorageSync('key', 'value') } catch (e) { } //錯誤寫法
wx.setStorageSync({ key:"key", data:"value" }) 

 

頁面跳轉。

wx.redirectTo  關閉當前頁面，跳轉到應用內的某個頁面。

wx.navigateTo 保留當前頁面，跳轉到應用內的某個頁面。 

wx.navigateBack 關閉當前頁面，返回上一頁面或多級頁面。

PS：多用wx.navigateTo與wx.navigateBack，少用wx.redirectTo。

 

僅支持基本的元素選擇器。

PS：相鄰兄弟選擇器好像也是支持的。

 

解析轉義字符

<text decode='true'>{{ content }}</text>

 

原生組件頁面層級。

這些原生組件在小程序頁面層級是最高，沒法設置z-index屬性來控制。

解決方法：全部原生組件：採用顯示隱藏的方式，控制原生組件的顯示與隱藏。 

                  cover-view與cover-image組件：不能使用條件渲染，採用opacity控制顯示，不容易影響佈局。           

PS：微信開發者工具是不能模擬原生組件看效果。

        強烈建議真機測試。

 

wx.onSocketMessage()與SocketTask.onMessage(function callback)區別。

PS： 建議使用SocketTask.onMessage()監聽消息。

         wx.onSocketMessage(function callback) 是舊基礎庫（1.7.0 ）的WebSocket方法。

         SocketTask.onMessage(function callback) 是新基礎庫（1.7.0 以上）的WebSocket方法。

補充：WebSocket方法放在頁面生命週期的onLoad方法中執行。

 

某些元素之間有間隙。

常見於video組件，image組件。

解決方法：把元素設置display:flex或block。

PS：建議重置小程序樣式。

 

調試頁面比較麻煩。

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

解決方法：（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 } ] } } }

 

微信小程序在真機上沒法調用接口。

登錄微信管理後臺。

檢查小程序信息填寫是否填寫正確或完整。

檢查小程序合法域名是否填寫正確或完整。（建議https域名）

PS：記得同步一下"微信開發者工具"項目。

        

 

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

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

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

        代碼審覈經過以後，請記得在微信管理後臺把小程序發佈，這樣才能夠在微信搜索獲得本身的小程序應用。