微信小程式開發常見問題(七)

知曉程式設計師發表於2018-04-01

知曉程式設計師,專注微信小程式開發的程式設計師!

一、判斷小程式版本號

小程式的API是不斷更新的,你可能使用某個API時,文件裡會說明,此API在1.x.x版本開始支援,需要自己做相容處理。


如果你使用小程式版本號做相容,就必須瞭解小程式的基礎庫版本號規則,在這裡介紹一下。

小程式基礎庫版本號使用 semver 規範,格式為 Major.Minor.Patch,Major、Minor、Patch 均為整數,1.9.901、2.44.322、10.32.44 都是符合 semver 風格的版本號。


以下是官方提供的相容程式碼:

微信小程式開發常見問題(七)


二、設定僅發起者可轉發

有些場景,需要僅發起者可轉發,參與者不能轉發。比如老師上課點名簽到,老師如果把簽到小程式分享到群內,只希望現場的同學可以正常簽到,即使其他同學想分享,也沒有許可權。


方法一:禁止顯示分享按鈕

小程式中有個API,wx.hideShareMenu,如下:

微信小程式開發常見問題(七)

在page.js中,正常寫入onShareAppMessage,然後判斷使用者是否為發起者,如果是發起者,呼叫wx.showShareMenu,如果不是發起者,呼叫wx.hideShareMenu。


方法二:單獨做一個分享後的頁面

這個辦法比較low,但也能實現。思路是在onShareAppMessage裡面的寫入一個預設path,開啟之後就是一個提示介面。如果是發起者,就把path修改成正常的路徑~

微信小程式開發常見問題(七)


三、swiper禁止手動滑動

最簡單的方式,在swiper上面加一個透明的蒙層~


四、使用switchTab跳轉後頁面不重新整理的問題

方法一:通過getCurrentPages獲取獲取當前的頁面棧,呼叫對應的方法

微信小程式開發常見問題(七)

switchTab成功跳轉後呼叫success,此時可以拿到跳轉後頁面的page物件,從而呼叫頁面onLoad方法過載頁面;


方法二:把還tab的頁面,程式碼邏輯放在onShow裡面

微信小程式開發常見問題(七)


五、e.target和e.currentTarget的區別

簡單的說,e.currentTarge是指註冊了事件監聽器的物件,e.target是指物件裡的子物件,實際觸發這個事件的物件。

微信小程式開發常見問題(七)

小程式開發過程中,如果通過event未獲取到值時,或許是你自己用錯了。


六、圖片設定為圓角,會快速從方形閃爍一下

解決方法:給父元素設定圓角,或者給圖片新增透明邊框


七、input中使用手寫輸入法的坑

之前總有“報名工具”的小程式使用者反饋,說是報名內容都輸入完整了,但是儲存不完整。

經排查,發現所有使用手寫輸入法的使用者,都會遇到這現象。排查程式碼發現繫結的input事件,使用者如果不點選手寫輸入法上的確認鍵,就不會觸發bindinput。

這種情況下,有兩種解決方式:

1、改用event.detail.value的形式來獲取form表單資料;

2、再新增一個bindblur事件,保證事件能夠正常執行;


因報名工具小程式中,有使用者自定義欄位,所以不確定使用者會新增多少個欄位,使用event獲取的話,需要給每個input新增一個name屬性,相對比較費勁,我改用了第二種方案。

微信小程式開發常見問題(七)


八、IOS下使用者授權後,頭像和暱稱顯示問題

這個問題其實是圖片src是一個data中的變數,然後這個變數又發生了變化。但是在IOS裝置上,就是沒辦法顯示更改後的圖片。(或者編輯圖文投票時,也會有這現象)

解決辦法:通過wx:if和wx:else判斷,展示不同的image元件

微信小程式開發常見問題(七)


九、一鍵退出(隱藏)小程式

首先要說,這個需求不合理,右上角有退出按鈕,但既然有同學問這問題,我也自己折騰了一下,基本可以實現一鍵退出。

先在每個page中新增隱藏page的方法:

微信小程式開發常見問題(七)

有退出button的頁面,對應的JS新增方法:

微信小程式開發常見問題(七)

雖然可以實現,但也很low,其實就是隱藏了所有的page而已~




微信小程式開發常見問題(七)

知曉程式設計師,一個專注於微信小程式開發的程式設計師~


如果對小程式技術感興趣,歡迎關注公眾號:知曉程式設計師

關注後你可以獲取:

1、小程式技術交流群,限開發人員加入~

2、web前端相關pdf電子書~


相關文章