使用uni-app開發(fā)App簡(jiǎn)易教程

• 前言
• app端開發(fā)步驟
• • 1、 申請(qǐng)uniapp開發(fā)者賬號(hào)
  • 2、登錄后開始新建應(yīng)用
  • 3、下載安裝 HBuildder X 。
  • 4、新建項(xiàng)目
  • 5、開啟webview，在pages-index里面寫一點(diǎn)點(diǎn)代碼
  • 6、配置mainifest.json
  • 7、打包
• h5工程配置
• • 在html中引入uniapp-sdk
  • 解決后退問題
• 上架

前言

在工作中，有時(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}${d}t=${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ì)退出apphomePaths: ['/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é)

以上是生活随笔為你收集整理的使用uni-app开发App简易教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。