使用uni-app开发App简易教程
使用uni-app開發(fā)App簡易教程
- 前言
- app端開發(fā)步驟
- 1、 申請uniapp開發(fā)者賬號
- 2、登錄后開始新建應(yīng)用
- 3、下載安裝 HBuildder X 。
- 4、新建項目
- 5、開啟webview,在pages-index里面寫一點點代碼
- 6、配置mainifest.json
- 7、打包
- h5工程配置
- 在html中引入uniapp-sdk
- 解決后退問題
- 上架
前言
在工作中,有時候會遇到需要開發(fā)app的情況,但是公司又沒有andriond、ios,這個時候如果不想外包,就要前端上場了,本文介紹使用uinapp+webview做一個app殼子,然后整個app使用內(nèi)嵌h5的方式來開發(fā)APP.
app端開發(fā)步驟
1、 申請uniapp開發(fā)者賬號
uniapp是沒有企業(yè)賬號的,所以申請個公共郵箱注冊一下就行
登錄注冊地址: https://dev.dcloud.net.cn/
2、登錄后開始新建應(yīng)用
3、下載安裝 HBuildder X 。
鏈接:https://www.dcloud.io/hbuilderx.html
4、新建項目
文件->新建->項目
因為我們不是真的要開發(fā)一個app,只是要一個webview,所以選擇默認(rèn)模板就行
5、開啟webview,在pages-index里面寫一點點代碼
我們把webview要打開的鏈接放在某臺確認(rèn)的服務(wù)器上面,方便更新已經(jīng)放一些配置,使用webview的@message來監(jiān)聽h5回傳的消息,可以做一些原生操作,如打開攝像頭,請求打開藍(lán)牙等。
6、配置mainifest.json
首先是id跟包名這些
然后是app的圖標(biāo),準(zhǔn)備一個1024x1024的圖標(biāo),hbuilder會自動幫轉(zhuǎn)分辨率
app模塊配置,作者只用過推送功能,要額外看uniapp文檔,很容易踩坑。但是uniapp也提供技術(shù)支持,不過人家是收費的。個人開發(fā)者也可以在上面回答問題賺點外快,嘿嘿嘿
然后就是權(quán)限,一般就是定位功能、攝像頭功能。怎么知道配置項是哪個呢?其實命名很清楚了,camera(相機(jī))、capture_audio_output(捕獲音頻輸出),然后再到uniapp官網(wǎng)上搜索確認(rèn)一下會保險一點
7、打包
原生打包太麻煩了,直接使用云打包
然后把證書填一填,證書生成教程
注意:
1、快速安心打包可能有問題,用傳統(tǒng)打包
2、注意保存好證書跟密碼,最好上傳到git
3、ios的還得申請ios的開發(fā)賬號,教程
4、其實打包面板上就有“如何生成證書”的按鈕,教程就在里面
5、包名很重要,不能隨便改的,一開始就要起好名字
h5工程配置
既然用uniapp,那作者肯定是用vue的了
在html中引入uniapp-sdk
官網(wǎng)提供了cdn,可以自己下載下來放到本地或者自己公司的cdn
<script src="static/js/uniapp-sdk.js"></script>解決后退問題
因為是整個app就是一個殼子套了h5,所以后退按鈕就會存在退不出頁面的問題,所以需要用uniapp-sdk來調(diào)用原生的后退方法
作者自己寫個簡單的路由控制
使用自己的路由控制
在vue的main.js中注入
在頁面中只要使用后退的時候
this.$historyctrl.back();上架
說實話這么做的app就不適合上架,太low了,基本上就是發(fā)包做給客戶私用的。
如果要上架,需要到每個手機(jī)廠商上都注冊企業(yè)開發(fā)者。上傳營業(yè)執(zhí)照是最基礎(chǔ)的,有些要法人身份證,尤其是vivo最惡心,需要法人手持身份證,所以只適合很小的公司,有點規(guī)模的公司只能是另想辦法了,所以我們在看到一些app的開發(fā)商的時候,經(jīng)常是一個不知名的公司(你懂的)。
這里只是忍不住吐槽一下,上架照著各個手機(jī)廠商的教程操作就行,傻瓜式操作。
總結(jié)
以上是生活随笔為你收集整理的使用uni-app开发App简易教程的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: win10原版操作系统安装过程【超详细】
- 下一篇: 【计算机网络】【硬件】交换机芯片介绍