uni-app實現多端開發


多端開發,聽名字就感覺不一樣,一套代碼。多端使用,適用於各個平台。市面上很多關於多端開發的框架,比較常用,流行的框架 uni-app,Chameleon(變色龍),taro這些,都可以支持多端,一套代碼,8個平台支持,

語法差異上,uni-app和Chameleon(變色龍)都選擇使用的是小程序和vue的語法結合,但是taro語法是react,熟悉react語法,比較熟悉這套框架,對於技術選項,框架的活躍度,這個框架的認知度,選擇適合自己的框架.

根據公司的需求,選擇框架,選擇之前,也是研究了一下這個三個框架,最后還是選擇用uni-app選擇開發,個人比較熟悉vue,有做過小程序方面的,選擇uni-app是最合適的,坑還是比較多,需要多踩坑。

一套代碼,測試在6個平台,分別是H5頁面,安卓,微信小程序,百度小程序,支付寶小程序,頭條小程序這幾個平台。

 

 uni-app底層的語法還是用到了weex,而且對應是應用市場插件種類很多,幾乎能滿足項目的需求,Ul庫。選擇uni-app的好處

1.微信小程序

先去官網下載開發者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安裝完之后,在編輯器找到安裝的目錄。

 

 第一次編輯運行的時候,需要在微信編輯器找到設置,選擇安全設置,一定要把這個服務端口開啟才可以使用。

 

 

 2.百度小程序和支付寶小程序

百度小程序開發工具:https://smartprogram.baidu.com/docs/develop/devtools/show_sur/

支付寶小程序開發工具:https://docs.alipay.com/mini/ide/download

這個就不需要配置什么了。安裝,配置好對應的目錄就可以了,啟動的時候,需要手動填寫目錄地址,uni-app不會自動打開百度小程序和支付寶小程序。需要手動,然后在保存的時候,就會自動刷新

 

 3.頭條小程序

因為這個頭條小程序出來沒有多久,uni-app做的兼容性不是很好,坑比較多,這個編輯器默認安裝C盤,沒得選擇,也是和百度和支付寶小程序一樣,必須是手動打開才行。

頭條小程序:https://developer.toutiao.com/docs/devtool/versionUpdate.html

 

 說這個坑,確實坑太多,第一次編輯啟動的時候,最重要的三個文件沒有加載過來。這個需要手動引入這三個文件,才生效,如果發現運行不成功,報錯,一定要看看app.js文件是否引入這個幾個文件了

 

其他小程序都沒有問題,只有頭條不行。

 

 

4.安卓和H5頁面

這個相比較就簡單了很多,不需要配合什么東西。點擊運行對應的就行。

 

最終效果,經過學習看視頻敲寫一個案例,運行在對應的平台展示效果

 

 一切准備就緒,就開始慢慢的踩坑,熟悉小程序和vue並且寫個項目,上手很快。


免責聲明!

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



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