因為公司有微信小程序、支付寶小程序、微信公眾號、支付寶生活號、app內嵌H5等頁面,而且這幾端的功能是一樣的,所以采用Uni-app進行開發。這里遇到的坑主要是在微信和支付寶小程序時遇到的坑進行記錄。
1、授權
獲取用戶信息的接口,只支持微信小程序,不支持支付寶小程序,所以支付寶小程序要自己調用支付寶自己的接口。
我們可以通過 my.getOpenUserInfo() 方法獲取支付寶用戶信息
而且 html 部分我們也需要設置 open-type為 getAuthorize 並且 使用 getAuthorize 方法調用
2、獲取用戶手機號
html 部分也需要不同處理
微信小程序可以直接獲取到手機號信息,支付寶則需要通過 my.getPhoneNumber 拿到用戶手機號信息。(支付寶在后台添加獲取手機號能力時,申請 一定要把獲取手機號的用途寫清楚。)
3、圖片組件
使用uni-app image 組件時,微信小程序沒有問題。支付寶小程序會把 image 組件替換成 label 並把圖片作為背景圖片。image 組件的 mode 屬性如果 不設置值會導致圖片顯示不全,需要將此屬性設置成 ”aspectFit“。
4、地圖組件
a.路況信息
:enable-traffic="traffic" 我們是在map 組件上通過 traffic 值來判斷是否開啟路況信息。
微信小程序直接吧traffic設置成 true 或着 false 就可以開啟、關閉路況了。
支付寶則需要通過地圖實例的 updateComponents 方法, 通過傳入 setting 的 trafficEnabled 值來改變,而且 trafficEnabled 傳入 true / false 不管用, 我是傳入的 1、0
b、markers 點
微信小程序在渲染 marks 和改變 marker 大小等狀態時,直接改變 marker 就可以。支付寶則需要調用 updateComponents 方法重新渲染,如果直接 改變 marker 點,地圖會重新回到了初始位置。
5、富文本顯示
微信小程序直接使用 v-html 就可以了,需要將 img 設置成 width:100%, 支付寶小程序則需要引入組件才能顯示。
雖然 uni-app 在不同端會有略微差異,整體來說對於開發來說還是比較省事的,我們現在一套代碼 支持微信小程序,支付寶小程序,支付寶生活號、微信公眾號、APP內嵌H5,給我們節省了不少開發時間。