Use uni-app to develop a simple tutorial for App
foreword
At work, sometimes you will encounter the need to develop an app, but the company does not have andriond and ios. If you don’t want to outsource at this time, you have to play the front end. This article introduces the use of uinapp+webview to make an app shell, and then the entire app Use the embedded h5 method to develop APP.
app development steps
1. Apply for a uniapp developer account
uniapp does not have an enterprise account, so just apply for a public email address and register. Login
registration address: https://dev.dcloud.net.cn/
2. After logging in, create a new application
3. Download and install HBuilder X.
Link: https://www.dcloud.io/hbuilderx.html
4. New project
File->New->Project
Because we don't really want to develop an app, we just want a webview, so just choose the default template
5. Open the webview and write a little code in the pages-index
We put the link to be opened by the webview on a confirmed server to facilitate updating some configurations, use @message of the webview to monitor the message returned by h5, and do some native operations, such as turning on the camera, requesting to turn on Bluetooth, etc. .
<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://存放配置的服务器/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: {
// 可以把开启蓝牙、定位等原生操作放在webview消息里面回传
getMessage(event) {
let data = event.detail.data;
if(data.action){
uni[data.action](data.options)
}
}
}
}
</script>
<style>
</style>
6. Configure manifest.json
-
The first is the id and the package name
-
Then there is the app icon, prepare a 1024x1024 icon, hbuilder will automatically help to convert the resolution
-
For the configuration of the app module, the author has only used the push function. It is easy to step on the pit if you need to read the uniapp document additionally. But uniapp also provides technical support, but they charge a fee. Individual developers can also earn some extra money by answering questions on it, hehehe
-
Then there are permissions, which are generally positioning functions and camera functions. How do you know which configuration item is which? In fact, the naming is very clear, camera (camera), capture_audio_output (capture audio output), and then go to the uniapp official website to search and confirm that it will be safer
7. Packing
Native packaging is too troublesome, directly use cloud packaging
and fill in the certificate, certificate generation tutorial
Note:
1. There may be problems with fast and safe packaging, use traditional packaging
2. Be careful to save the certificate and password, it is best to upload to git
3. For ios, you have to apply for an ios development account. Tutorial
4. In fact, there is a button "How to generate a certificate" on the packaging panel, and the tutorial is in it.
5. The package name is very important and cannot be changed casually. You must choose a good name from the beginning
h5 project configuration
Since uniapp is used, the author must have used vue
Introduce uniapp-sdk in html
The official website provides a cdn, you can download it yourself and put it locally or on your company's cdn
<script src="static/js/uniapp-sdk.js"></script>
Fix the back problem
Because the whole app is a shell with h5, so the back button will have the problem of not being able to exit the page, so you need to use uniapp-sdk to call the native back method. The author wrote a simple routing
control
const control = {
// 在这些页面上后退按钮点两次会退出app
homePaths: ['/index','/login'],
state: [],
vueObj: null,
init(vueObj){
this.vueObj = vueObj;
this.addListener();
return this;
},
// 判断是否首页（需要后退能退出app的页面）
isHome(path) {
return this.homePaths.includes(path);
},
// 在beforeEnter里面加上它，把路由状态保存起来
pushState(path) {
if(path!==this.state[this.state.length-1]){
this.state.push(path);
}
},
// 页面在后退的地方调用它
back() {
// 在首页等需要退出app的地方直接后退
if(this.isHome(this.vueObj.$route.path)){
window.uni.navigateBack();
return
}
// 如果在非app环境刷新了页面
if(this.state.length){
// 自己的路由状态保存
this.state.pop();
// 这里这么写是因为有些手机后退，页面状态会很奇怪，所有即使直接push上一个页面进来
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;
Use your own routing control
to inject in Vue's 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里面方便调用
Vue.prototype.$historyctrl = HistoryCtrl.init(vueObj);
// 解决弹窗遮罩滑动穿透的问题
document.querySelector('body').addEventListener('touchmove', function(e) {
e.preventDefault();
})
When you only use back in the page
this.$historyctrl.back();
put on shelves
To be honest, apps that do this are not suitable for the shelves, they are too low, and basically they are contracted for private use by customers.
If you want to put it on the shelves, you need to register enterprise developers with each mobile phone manufacturer. Uploading a business license is the most basic. Some require a legal person ID card, especially vivo, which is the most disgusting and requires a legal person to hold an ID card, so it is only suitable for small companies. Companies with a small scale can only find another way, so we are watching When it comes to some app developers, it is often an unknown company (you know).
I just can't help but complain here, just follow the tutorials of various mobile phone manufacturers on the shelves, and operate like a fool.