利用uni-app開發(fā)App的超簡(jiǎn)易教程
前言
在工作中,有時(shí)候會(huì)遇到需要開發(fā)app的情況,但是公司又沒有andriond、ios,這個(gè)時(shí)候如果不想外包,就要前端上場(chǎng)了,本文介紹使用uinapp+webview做一個(gè)app殼子,然后整個(gè)app使用內(nèi)嵌h5的方式來開發(fā)APP.
app端開發(fā)步驟
1、 申請(qǐng)uniapp開發(fā)者賬號(hào)
uniapp是沒有企業(yè)賬號(hào)的,所以申請(qǐng)個(gè)公共郵箱注冊(cè)一下就行
登錄注冊(cè)地址: https://dev.dcloud.net.cn/
2、登錄后開始新建應(yīng)用

3、下載安裝 HBuildder X 。
鏈接:https://www.dcloud.io/hbuilderx.html
4、新建項(xiàng)目
文件->新建->項(xiàng)目


因?yàn)槲覀儾皇钦娴囊_發(fā)一個(gè)app,只是要一個(gè)webview,所以選擇默認(rèn)模板就行
5、開啟webview,在pages-index里面寫一點(diǎn)點(diǎn)代碼

我們把webview要打開的鏈接放在某臺(tái)確認(rèn)的服務(wù)器上面,方便更新已經(jīng)放一些配置,使用webview的@message來監(jiān)聽h5回傳的消息,可以做一些原生操作,如打開攝像頭,請(qǐng)求打開藍(lán)牙等。
<template>
<view>
<web-view :src="url" @message="getMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: ''
}
},
onLoad(options) {
uni.request({
// new Date().getTime()是為了確保不用緩存
url: 'https://存放配置的服務(wù)器/config.json?t=' + new Date().getTime(),
complete: (res)=> {
let url = "默認(rèn)鏈接";
if(res.statusCode == 200){
url = res.data.url;
}
// 可以獲取用戶設(shè)備號(hào)
let pinf = plus.push.getClientInfo();
let cid = pinf && pinf.clientid || '';
// 處理服務(wù)器配置的鏈接
let d = url.indexOf('?') > -1? '&' : '?';
this.url = `${url}$jzldbtht=${new Date().getTime()}&cid=${cid}`
}
});
},
methods: {
// 可以把開啟藍(lán)牙、定位等原生操作放在webview消息里面回傳
getMessage(event) {
let data = event.detail.data;
if(data.action){
uni[data.action](data.options)
}
}
}
}
</script>
<style>
</style>6、配置mainifest.json
首先是id跟包名這些

然后是app的圖標(biāo),準(zhǔn)備一個(gè)1024x1024的圖標(biāo),hbuilder會(huì)自動(dòng)幫轉(zhuǎn)分辨率

app模塊配置,作者只用過推送功能,要額外看uniapp文檔,很容易踩坑。但是uniapp也提供技術(shù)支持,不過人家是收費(fèi)的。個(gè)人開發(fā)者也可以在上面回答問題賺點(diǎn)外快,嘿嘿嘿
然后就是權(quán)限,一般就是定位功能、攝像頭功能。怎么知道配置項(xiàng)是哪個(gè)呢?其實(shí)命名很清楚了,camera(相機(jī))、capture_audio_output(捕獲音頻輸出),然后再到uniapp官網(wǎng)上搜索確認(rèn)一下會(huì)保險(xiǎn)一點(diǎn)

7、打包
原生打包太麻煩了,直接使用云打包

然后把證書填一填,證書生成教程
注意:
1、快速安心打包可能有問題,用傳統(tǒng)打包
2、注意保存好證書跟密碼,最好上傳到git
3、ios的還得申請(qǐng)ios的開發(fā)賬號(hào),教程
4、其實(shí)打包面板上就有“如何生成證書”的按鈕,教程就在里面
5、包名很重要,不能隨便改的,一開始就要起好名字

h5工程配置
既然用uniapp,那作者肯定是用vue的了
在html中引入uniapp-sdk
官網(wǎng)提供了cdn,可以自己下載下來放到本地或者自己公司的cdn
<script src="static/js/uniapp-sdk.js"></script>
解決后退問題
因?yàn)槭钦麄€(gè)app就是一個(gè)殼子套了h5,所以后退按鈕就會(huì)存在退不出頁(yè)面的問題,所以需要用uniapp-sdk來調(diào)用原生的后退方法
作者自己寫個(gè)簡(jiǎn)單的路由控制
const control = {
// 在這些頁(yè)面上后退按鈕點(diǎn)兩次會(huì)退出app
homePaths: ['/index','/login'],
state: [],
vueObj: null,
init(vueObj){
this.vueObj = vueObj;
this.addListener();
return this;
},
// 判斷是否首頁(yè)(需要后退能退出app的頁(yè)面)
isHome(path) {
return this.homePaths.includes(path);
},
// 在beforeEnter里面加上它,把路由狀態(tài)保存起來
pushState(path) {
if(path!==this.state[this.state.length-1]){
this.state.push(path);
}
},
// 頁(yè)面在后退的地方調(diào)用它
back() {
// 在首頁(yè)等需要退出app的地方直接后退
if(this.isHome(this.vueObj.$route.path)){
window.uni.navigateBack();
return
}
// 如果在非app環(huán)境刷新了頁(yè)面
if(this.state.length){
// 自己的路由狀態(tài)保存
this.state.pop();
// 這里這么寫是因?yàn)橛行┦謾C(jī)后退,頁(yè)面狀態(tài)會(huì)很奇怪,所有即使直接push上一個(gè)頁(yè)面進(jìn)來
this.vueObj.$router.push({ path: this.state[this.state.length-1] });
} else {
history.go(-1);
}
},
// 監(jiān)聽后退按鈕
addListener(){
// 本地開發(fā)的時(shí)候不用監(jiān)聽后退
if(typeof window.plus === 'undefined'){
console.log("當(dāng)前不是app環(huán)境");
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
});
// 把自己做的前進(jìn)后退掛載到vue里面方便調(diào)用
Vue.prototype.$historyctrl = HistoryCtrl.init(vueObj);
// 解決彈窗遮罩滑動(dòng)穿透的問題
document.querySelector('body').addEventListener('touchmove', function(e) {
e.preventDefault();
})
在頁(yè)面中只要使用后退的時(shí)候
this.$historyctrl.back();
上架
說實(shí)話這么做的app就不適合上架,太low了,基本上就是發(fā)包做給客戶私用的。
如果要上架,需要到每個(gè)手機(jī)廠商上都注冊(cè)企業(yè)開發(fā)者。上傳營(yíng)業(yè)執(zhí)照是最基礎(chǔ)的,有些要法人身份證,尤其是vivo最惡心,需要法人手持身份證,所以只適合很小的公司,有點(diǎn)規(guī)模的公司只能是另想辦法了,所以我們?cè)诳吹揭恍゛pp的開發(fā)商的時(shí)候,經(jīng)常是一個(gè)不知名的公司(你懂的)。
這里只是忍不住吐槽一下,上架照著各個(gè)手機(jī)廠商的教程操作就行,傻瓜式操作。
總結(jié)
到此這篇關(guān)于利用uni-app開發(fā)App的文章就介紹到這了,更多相關(guān)uni-app開發(fā)App內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
原生javascript的ajax請(qǐng)求及后臺(tái)PHP響應(yīng)操作示例
這篇文章主要介紹了原生javascript的ajax請(qǐng)求及后臺(tái)PHP響應(yīng)操作,結(jié)合示例形式分析了JavaScript前臺(tái)ajax請(qǐng)求的原理、調(diào)用、后臺(tái)PHP響應(yīng)請(qǐng)求及cookie保存相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
全面解析Bootstrap彈窗的實(shí)現(xiàn)方法
這篇文章全面解析Bootstrap彈窗的實(shí)現(xiàn)方法,對(duì)其結(jié)構(gòu)進(jìn)行詳細(xì)分析,感興趣的小伙伴們可以參考一下2015-12-12
layer實(shí)現(xiàn)彈出層自動(dòng)調(diào)節(jié)位置
今天小編就為大家分享一篇layer實(shí)現(xiàn)彈出層自動(dòng)調(diào)節(jié)位置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
用javascript實(shí)現(xiàn)始終保持打開同一個(gè)子窗口以及關(guān)閉父窗口同時(shí)自動(dòng)關(guān)閉所有子窗口
用javascript實(shí)現(xiàn)始終保持打開同一個(gè)子窗口以及關(guān)閉父窗口同時(shí)自動(dòng)關(guān)閉所有子窗口...2007-06-06
js中json對(duì)象和字符串的理解及相互轉(zhuǎn)化操作實(shí)現(xiàn)方法
這篇文章主要介紹了js中json對(duì)象和字符串的理解及相互轉(zhuǎn)化操作實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了json對(duì)象與字符串的功能以及相互轉(zhuǎn)換操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09
JS實(shí)現(xiàn)頁(yè)面數(shù)據(jù)懶加載
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁(yè)面數(shù)據(jù)懶加載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02
詳解JavaScript節(jié)流函數(shù)中的Throttle
函數(shù)節(jié)流,就是對(duì)會(huì)頻繁觸發(fā)的函數(shù)事件做一些限制,讓這些函數(shù)可以在每隔一定的時(shí)間或者每次滿足一定的條件下再觸發(fā)。一般我們會(huì)給他起一個(gè)名字throttle。也就是節(jié)流的意思。一般這樣的函數(shù)有 resize事件、ontouchmove事件等。2016-07-07

