微信小程序的開發踩坑

時間 2020-01-03 標籤微信程序開發

前言

記錄一下在開發小程序的時候遇到的問題，筆記跟坑我都稍微寫一點ios

關於開發的

一. 生命週期和路由跳轉

實在記不住( = = ||)，可是用到的概率挺高，因此就索性抄下來了web

1.頁面的生命週期

onLoad—-監聽頁面加載
onReady—-監聽頁面初次渲染完成
onShow—-監聽頁面顯示
onHide—-監聽頁面隱藏
onUnload—-監聽頁面卸載

2.組件的生命週期

created 組件實例化，但節點樹還未導入，所以這時不能用setData
attached 節點樹完成，能夠用setData渲染節點，但沒法操做節點
ready 組件佈局完成，這時能夠獲取節點信息，也能夠操做節點
moved 組件實例被移動到樹的另外一個位置
detached 組件實例從節點樹中移除

3.路由跳轉

直接截圖了
json

二. setData修改的類型是對象的話

咱們知道小程序更改data裏面字段值的話，要這樣canvas

this.setData({
    name: '小程序'
})

這種狀況比較常見，可是若是是對象的話，要用中括號括起來小程序

this.setData({
['info.isLike']:  true
});

還有一個狀況，若是是要修改數組裏面某個項的值數組

let targetIndex = 0;
this.setData({
['messages['+ targetIndex +'].isLoad']:false
})

三. 自定義頂部導航欄

原生的頂部導航欄功能太少，好比沒有我的頭像，沒有回到主頁等等。因此不少時候都會要求本身寫一個微信

步驟一：app.json文件寫上這句話
加了這句話自帶的導航欄就會消失網絡

"window": {
    "navigationStyle": "custom" //加上這句話
}

步驟二：本身寫一個組件，高度的話能夠參考這樣app

wx.getSystemInfo({
success: (res) => {
let  device  =  res.platform;
let  statusBarH  =  res.statusBarHeight;

// 自定義導航欄高度,ios設置40px,安卓端48px
if (device  ===  'ios') {
this.globalData.navbarHeight  =  statusBarH  +  40;
} else {
this.globalData.navbarHeight  =  statusBarH  +  48;
}

// 手機狀態欄高度
this.globalData.statusbarHeight  =  statusBarH;
// 手機系統
this.globalData.deviceSystem  =  device;
}
});

步驟三：每個頁面要padding-top高度去適配這個導航欄組件echarts

<view  class='order-refund_details'  style='padding-top:{{navbarHeight}}px'>

四. 自定義底部導航欄

跟頂部的緣由同樣，不少功能沒法知足，要自定義，這裏提一個點，使用自定義以後，切換頁面的時候會有明顯的抖動
爲了解決這個問題，咱們把一級頁面所有變成了組件，用組件切換來代替頁面切換,大概是這樣

<view  style='flex:1;height:calc(100% - {{showVersionTip?50:0}}rpx)'>
  <CardInfo  visible="{{ current  === 'card' }}"></CardInfo>
  <Mine  visible="{{ current  === 'mine' }}"></Mine>
</view>

五. 暫時沒想到，等待補充

關於踩坑的

一. 微信端

1.自動更新是作不到無感知的

版本有更新的話，用戶必定會看到彈窗，必定要點一下肯定按鈕

2.組件拿不到app.wxss裏面的樣式

3.data裏面直接定義app的global全局參數的話，若是中途變了，可能data裏面的字段不會實時更新

global數據若是中途值改變了，頁面或者組件裏面的data裏面初始化的那個值不會改變的，因此要額外處理

data: {
    vipCode:  app.global.vipCode  // vip版本
},

ready() {
// 有時候app全局值改變了,data裏面的值沒有同步
this.setData({
    vipCode:  app.global.vipCode
});
},

4. canvas畫圖的圖片要先用wx.getImageInfo下載下來，拿臨時路徑才能用

5. 小程序文本框自帶手機鍵盤的高度，監聽focus事件能夠獲取到

寫聊天頁面的時候，爲了解決輸入框要頂上，可是聊天列表不頂上的問題。

<textarea  bindfocus="fixedPosition"/>

page.js
//輸入框聚焦時
fixedPosition(event){
//加個延時器保險一下
    setTimeout(() => {
        this.setData({
            fixedScrollTop:  event.detail.height?  event.detail.height:  0, //整個頁面的高度往上頂軟鍵盤的高度
            scrollTop:  this.data.messages.length  *  1000 //聊天列表滾動到最低
        });
    });
},

6. 部分機型就算遮罩層也沒法阻擋底層頁面的滾動，能夠在遮罩層的view加一個屬性catchtouchmove="ture"

<view  class="qwui-auth_container"  catchtouchmove="ture">

企業微信端

1. 企業微信裏分包預加載失效

配置了也沒用，不生效，會報錯，可是不影響使用

2. 企業微信裏中文傳遞要轉碼

使用web-view跳轉到時候遇到一個問題，這個頁面能夠分享，分享出去的url路徑帶了中文，在微信端跳轉的時候沒問題，可是在企業微信跳轉就死活打不開，後來排查問題是中文沒有轉碼

onShareAppMessage() {
return {
    path:  `${this.route}?pathUrl=${encodeURIComponent(this.data.url)}&userId=${wx.getStorageSync('userId')}`
};
}

3. 企業微信裏某些異步API速度沒有微信快

好比setData這個，企業微信裏面若是某些操做要緊跟setData以後，請務必放在setData的回調裏面,當時快坑死了，其餘像路由跳轉，setStorageSync和getStorageSync也要注意

this.setData({
    xxx:  xxx
},() => {
    //請務必寫在這裏
    xxxx
});

4.使用canvas繪圖，在調這個wx.canvasToTempFilePath以前，安卓端須要必定的延時（300ms），否則圖片生成不完整

保險起見，微信跟企業微信都加吧

5. echarts畫餅狀圖,在安卓機上，當圖案還沒畫完時，此時點擊圖片餅狀圖中間那一塊會被染上顏色

已解決，使用cover-view先遮住，防止用戶點擊，當加載完成再把它隱藏，不能不隱藏，由於cover-view存在時沒法拖動

雲開發

這玩意也算摸過一次，還行，接口寫法也比較簡單，不難，目前就發現一個缺點，慢慢慢（不過我以爲是由於我用的是免費版的緣由，哈哈）

1. 雲函數的網絡請求不用https，不用配置域名

2. 雲函數裏面調用雲函數，返回的格式是這樣的

在雲函數裏面console是沒用的，看不到輸出，只能靠瞎猜