uni-app 開發各平台(微信小程序,支付寶小程序)踩坑記錄


因為公司有微信小程序、支付寶小程序、微信公眾號、支付寶生活號、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,給我們節省了不少開發時間。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM