uni-app其實是DCloud推出的衆多產品之一,當然我只研究目前能用到的
DCloud的官網:https://www.dcloud.io/
uni-app的官網:https://uniapp.dcloud.io/
uni-app
是一個使用 Vue.js 開發跨平臺應用的前端框架,開發者編寫一套代碼,可編譯到iOS、Android、H5、小程序等多個平臺。
1.開始階段:
公司想要將現有的幾個前端項目合二爲一,又想兼顧h5和小程序(目前),以後可能有app,容我調研一番,簡而言之,一套代碼,兼容多端,在網上調研發現了個這個比較,非常詳細:
來源地址:https://juejin.im/post/5c4ec383f265da613e229a67,有興趣可以看一下
經過我在官網和加入官方QQ羣之後,感覺還不錯,其實vue的多端兼容平臺也就那麼幾個。。。
2.選用uni-app
選用之後,先寫demo,看一下難易程度,發現會vue的開發人員能很容易上手,而同時寫過小程序的就更容易了,它的api和生命週期是和小程序一模一樣的,在自定義組件和編程上遵循vue2.0的規範。
3.項目搭建
(1)下載官方推薦編輯器:hbuilderx下載地址
頁面點擊右上角下載APP開發版
在編輯器上直接新建項目,也是非常方便的。
(2)在HBuilderX界面中點擊 工具 - 插件安裝,依次安裝
NPM,內置瀏覽器,UniApp編譯,js-beautify,js壓縮,css壓縮,less編譯,scss/sass編譯,es6編譯等等
(3)點擊工具 - 設置 - 運行配置,
設置瀏覽器運行配置裏的Chrome安裝路徑爲本機的真實Chrome安裝路徑
如:C:/Users/yeyiqing/AppData/Local/Google/Chrome/Application/chrome.exe
設置小程序運行配置裏的微信開發者安裝路徑爲本機的真實微信開發者安裝路徑
如:E:/warespace/微信web開發者工具
設置node運行配置裏的node路徑爲本機的真實node安裝路徑
如:C:/Program Files/nodejs/node.exe
(4)在項目裏的manifest.json裏找到微信小程序配置,更改小程序AppID
(5)先打開微信開發者工具,點擊設置-代理設置,選擇不適用任何代理...
如需運行:
先在BuilderX裏打開pages下的login.vue頁面
選擇HBuilderX界面: 運行-運行到瀏覽器-Chrome
運行-運行到小程序-微信開發者工具
如需打包:
點擊;發行 - H5手機版發行 - 發行
發行 - 小程序微信 - 發行
信息會打印到下方控制檯裏...
最後,多看官方文檔。。。