At the front end, I was entrusted by a friend to help him develop an APP. After comprehensive consideration, I did not use the native app, and used the uniapp technology stack for development.
uniapp is a set of cross-end front-end solutions launched by dcloud. It can generate small programs, Android, IOS, H5 and other codes through a set of codes. It is an absolute efficiency tool for small and medium projects
Technology Architecture
The front end adopts uniapp
The back-end uses Thinkphp for back-end management and interface, and uses a set of open source back-end management system easyadmin. The reason for choosing it is that it can automatically generate curd management pages through a single command, and can quickly implement field forms, Functions such as search can be said to be an artifact of efficiency.
The database uses the most common mysql database, which is nothing to say
Cloud storage uses Qiniu cloud storage, because the project contains a lot of video resources, so it is a good choice to place static resources on cloud storage
to develop
The development of uniapp is relatively simple. Friends who have developed Vue or WeChat applets can almost seamlessly get started. You only need to browse the official documents. Its API is similar to that of the applet. Basically, modify wx.xxx It can be used directly for uni.xxx because the bottom layer is based on Vue, so the development mode is also a data-driven mode, which is very convenient and fast.
Download their official editor Hbuilder from the official website of Dcloud ( HBuilderX-Efficient Geek Skills ) and install it to start development.
Select "File-New-Project" in Hbuilder, select uni-app to create a uniapp project, and uni also provides some page templates for developers to get started quickly
After clicking Create, a new project will be automatically created and related files and directories will be initialized
Project directory structure
The pages directory is the directory where we write APP pages
The static directory is the directory where static resources are stored, and some resources such as icons can be placed here
page composition
Each page structure of uniapp is divided into three parts. The first part is the page tag included in the template tag, which is the tag element in HTML. The difference is that the <div> tag is used in ordinary HTML, while the <div> tag is used in uni. view> tag, it should be noted that only one view tag can be included under the template, and other tags are included under this tag.
The second part is the JS code included in the script. Use the export default object to export the code in JS. The internal structure is the Vue data structure, including methods such as data(), methods() and some uni life cycle functions.
The third part is the css code wrapped in the style tag, which is exactly the same as the HTML css code.
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
page configuration
All pages written in uni need to be registered in page.json, unregistered pages cannot be jumped and displayed, just configure the page parameters in the page array, or configure the style object under the object of each page to Define the title bar and other information of the page
By configuring the globalStyle object, you can realize the configuration of APP global related parameters. For specific configuration items, please refer to the official uniapp document ( uni-app official website )
In addition, you can also configure the tabBar object to automatically generate the label TAB of the APP
APP.VIEW
app.vue is the main entrance of the whole project. The onLaunch here will be called when the APP is initially started. You can do some operations related to APP initialization here.
<script>
export default {
onLaunch: function() {
console.log('App onLaunch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>Similarly, the css written on this page will also work on all pages, and some global css can be placed here, such as theme colors and the like.
APP settings
manifest.json is the configuration file of the entire project, covering the project's AppId, application name, version, and related settings of APP and applet. The project can be set in a visual way through the Hbuilder editor, or through the source code view. project settings
request encapsulation
As an APP that can be launched and operated, it must be able to display various data, and the display data needs to be connected to the back-end API. In order to facilitate development and subsequent maintenance, the request can be packaged separately as a file for unified processing .
Create a common folder in the root directory of the project, create a new http.js file, and if you want to reference external Js in uni, you also need to use export default to export the method, so the last function written in http.js must also pass the export default { variable name} to export.
uni provides an API for requesting data, uni.request ( uni.request(OBJECT) | uni-app official website (dcloud.net.cn) ) Based on this API, we encapsulate the request for convenience when calling the interface.
const baseUrl = 'https://www.xxx.com/api/';
/* 封装ajax函数
* @param {string}opt.type http连接的方式，包括POST和GET两种方式
* @param {string}opt.url 发送请求的url
* @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
* @param {object}opt.data 发送的参数，格式为对象类型
* @param {function}opt.success ajax发送并接收成功调用的回调函数
*/
function getHeader() { //header头部
return {
"Accept": "application/json",
'Content-Type': 'application/json; charset=utf-8', // app header头
// 'Content-Type': 'application/x-www-form-urlencoded', // h5 header头
// 'ACCESS_TOKEN': `${token}`,
};
}
const ajax = function(opt) {
uni.showLoading({
// title:"提交中"
})
opt = opt || {};
opt.method = (opt.method && opt.method.toUpperCase()) || 'POST';
opt.url = baseUrl + opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function() {};
opt.fail = opt.fail || function() {};
opt.complete = opt.complete || function() {};
uni.request({
method: opt.method,
dataType: 'json',
url: opt.url,
data: opt.data,
header: getHeader(),
success: (res) => {
uni.hideLoading()
// console.log(res)
if(res.data.code == 200) {
opt.success(res.data);
}else {
uni.showToast({
title:res.data.message,
icon:"none"
})
opt.fail(res);
}
},
fail: (res) => {
uni.hideLoading()
console.log(res)
uni.showToast({
title:res.data ? res.data.message : '网络连接失败',
icon:"none"
})
console.log(opt)
opt.fail(res);
},
complete: (res) => {
uni.hideLoading()
opt.complete(res);
},
})
}For unified management, I put all the backend API paths here
const bindAjax = function(data,success,fail) {
ajax({
url: 'xxx/xxx',
method: 'POST',
data: data,
success: function(res) {
if (res.code == 200) {
success(res.data)
}
},
fail:(e) => {
fail(e)
}
})
}
Then expose the method name we defined through erxport
export default {
ajax,
bindAjax
}Finally, if you want to call it in the page, you also need to create a global variable in main.js
import http from './common/http.js';
Vue.prototype.http = http;In this way, we can use this in the page to make calls
this.http.bindAjax({
a:1,
b:2
}(e) => {
// 成功后返回的数据
console.log(e)
},(e) => {
// 请求失败
})See the complete file here (1 message) uniapp unified request encapsulation-Javascript document resources-CSDN Library
plugin reference
Another advantage of uniapp is that there are enough plug-ins, which can prevent developers from reinventing the wheel. Developers of commonly used plug-ins can directly quote them, which greatly saves development time and cost.
Visit the Dcloud plug-in market ( DCloud plug-in market ) to search for the plug-ins you need. If we need a search plug-in like Taobao, you can directly search for "search plug-ins" to search
After finding the plug-in we need, we can directly select on the right side of the plug-in details page to use HbuilderX to import the plug-in, and the plug-in can be automatically imported into our project
It should be noted that we should pay attention to the platform compatibility of plug-ins. Many plug-ins are specially designed for a certain platform such as WeChat applet or Android APP. If we use this plug-in on other platforms, it may cause compatibility problems.
Next, we can start coding happily~
In the next article, use Hbuilder for real machine testing, so stay tuned!