生活随笔
收集整理的這篇文章主要介紹了
使用uni-app开发App简易教程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用uni-app開發App簡易教程
- 前言
- app端開發步驟
- 1、 申請uniapp開發者賬號
- 2、登錄后開始新建應用
- 3、下載安裝 HBuildder X 。
- 4、新建項目
- 5、開啟webview，在pages-index里面寫一點點代碼
- 6、配置mainifest.json
- 7、打包
- h5工程配置
- 上架
前言
在工作中，有時候會遇到需要開發app的情況，但是公司又沒有andriond、ios，這個時候如果不想外包，就要前端上場了，本文介紹使用uinapp+webview做一個app殼子，然后整個app使用內嵌h5的方式來開發APP.
app端開發步驟
1、 申請uniapp開發者賬號
uniapp是沒有企業賬號的，所以申請個公共郵箱注冊一下就行
登錄注冊地址： https://dev.dcloud.net.cn/
2、登錄后開始新建應用
3、下載安裝 HBuildder X 。
鏈接：https://www.dcloud.io/hbuilderx.html
4、新建項目
文件->新建->項目
因為我們不是真的要開發一個app，只是要一個webview，所以選擇默認模板就行
5、開啟webview，在pages-index里面寫一點點代碼
我們把webview要打開的鏈接放在某臺確認的服務器上面，方便更新已經放一些配置，使用webview的@message來監聽h5回傳的消息，可以做一些原生操作，如打開攝像頭，請求打開藍牙等。
<template
><view
><web
-view
:src
="url" @message
="getMessage"></web
-view
></view
>
</template
><script
>export default {data() {return {url: ''}},onLoad(options) {uni
.request({url: 'https://存放配置的服務器/config.json?t=' + new Date().getTime(),complete: (res)=> {let url
= "默認鏈接";if(res
.statusCode
== 200){url
= res
.data
.url
;}let pinf
= plus
.push
.getClientInfo(); let cid
= pinf
&& pinf
.clientid
|| '';let d
= url
.indexOf('?') > -1? '&' : '?';this.url
= `${url}${d}t=${new Date().getTime()}&cid=${cid}`}});},methods: {getMessage(event) {let data
= event
.detail
.data
;if(data
.action
){uni
[data
.action
](data
.options
)}}}}
</script
>
<style
>
</style
>
6、配置mainifest.json
首先是id跟包名這些
然后是app的圖標，準備一個1024x1024的圖標，hbuilder會自動幫轉分辨率
app模塊配置，作者只用過推送功能，要額外看uniapp文檔，很容易踩坑。但是uniapp也提供技術支持，不過人家是收費的。個人開發者也可以在上面回答問題賺點外快，嘿嘿嘿
然后就是權限，一般就是定位功能、攝像頭功能。怎么知道配置項是哪個呢？其實命名很清楚了，camera(相機)、capture_audio_output(捕獲音頻輸出)，然后再到uniapp官網上搜索確認一下會保險一點
7、打包
原生打包太麻煩了，直接使用云打包
然后把證書填一填，證書生成教程
注意：
1、快速安心打包可能有問題，用傳統打包
2、注意保存好證書跟密碼，最好上傳到git
3、ios的還得申請ios的開發賬號，教程
4、其實打包面板上就有“如何生成證書”的按鈕，教程就在里面
5、包名很重要，不能隨便改的，一開始就要起好名字
h5工程配置
既然用uniapp，那作者肯定是用vue的了
在html中引入uniapp-sdk
官網提供了cdn，可以自己下載下來放到本地或者自己公司的cdn
<script src="static/js/uniapp-sdk.js"></script>
解決后退問題
因為是整個app就是一個殼子套了h5，所以后退按鈕就會存在退不出頁面的問題，所以需要用uniapp-sdk來調用原生的后退方法
作者自己寫個簡單的路由控制
const control
= {homePaths: ['/index','/login'],state: [],vueObj: null,init(vueObj){this.vueObj
= vueObj
;this.addListener();return this;},isHome(path) {return this.homePaths
.includes(path
);},pushState(path) {if(path
!==this.state
[this.state
.length
-1]){this.state
.push(path
);}},back() {if(this.isHome(this.vueObj
.$route
.path
)){window
.uni
.navigateBack();return}if(this.state
.length
){this.state
.pop();this.vueObj
.$router
.push({ path: this.state
[this.state
.length
-1] });} else {history
.go(-1);}},addListener(){if(typeof window
.plus
=== 'undefined'){console
.log("當前不是app環境");return;}const _this
= this;document
.addEventListener('UniAppJSBridgeReady', function() {var webview
= window
.plus
.webview
.currentWebview(); window
.plus
.key
.addEventListener('backbutton', function() {webview
.canBack(function(e) {if (e
.canBack
) {_this
.back();} else {window
.uni
.navigateBack();}})});})}
};
export default control
;
使用自己的路由控制
在vue的main.js中注入
import Vue
from 'vue';
import VueRouter
from 'vue-router';
import HistoryCtrl
from "static/js/history-ctrl";
const router
= new VueRouter({routes: routerConfig
});
router
.beforeEach(async (to, from, next) => {HistoryCtrl
.pushState(to
.path
);next();
});
const vueObj
= new Vue({el: "#app",router
,store
});
Vue.prototype
.$historyctrl
= HistoryCtrl
.init(vueObj
);
document
.querySelector('body').addEventListener('touchmove', function(e) {e
.preventDefault();
})
在頁面中只要使用后退的時候
this.$historyctrl
.back();
上架
說實話這么做的app就不適合上架，太low了，基本上就是發包做給客戶私用的。
如果要上架，需要到每個手機廠商上都注冊企業開發者。上傳營業執照是最基礎的，有些要法人身份證，尤其是vivo最惡心，需要法人手持身份證，所以只適合很小的公司，有點規模的公司只能是另想辦法了，所以我們在看到一些app的開發商的時候，經常是一個不知名的公司（你懂的）。
這里只是忍不住吐槽一下，上架照著各個手機廠商的教程操作就行，傻瓜式操作。
總結
以上是生活随笔為你收集整理的使用uni-app开发App简易教程的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
