Since I got in touch with UNI-App in 2018, I have developed several projects such as wechat mini program, H5 and APP. During this process, I sorted out a basic code development structure. One is to record the current development process and update it in the future. Second, other partners in the team can build the basic project development framework by themselves according to this process.

No more talking, no more masturbating.

Download and install uni-App’s recommended editor HbuilderX

Open the HbuilderX download page and click the Download button to display a pop-up window as shown below.

HbuilderX provides Windows OS and MAC system versions, and has official version and Alpha version. Alpha is the latest release version, but it is not stable enough, so it is suitable for tasting new functions. You can download and install it as needed.

Kids make choices. Adults, of course

The installation process is not described, of course, is always the next step.

After installation, open the editor, the first thing to do is to install the plug-in, click the tool options, click the plug-in Installation, general development CSS preprocessor (less. SCSS),uni-app multi-terminal compilation, app debugging, etc. You can find more plug-ins through the plug-in market.

With the plug-in installed, it’s time to initialize the project using HbuilderX

Initialize uni-app project

Click the toolbar -> File ->1. Project, select project type (UNI-app), fill in the project information, and click the Create button to complete the initialization of the project

After the new project is created, take a look at what files and directories the initialized project provides

Three revamp UNI-APP project, out of the box

1. Encapsulate the uni.request request based on promise

Create an Ajax folder under the root of your project and create two files, index.js and apis

Apis. Js holds the list of interfaces for Ajax requests.

Const code = "code" // export default {code}Copy the code

The index.js method specifies the request methods, get, POST,del,put.

Import apis from "./apis" import config from "@/config" import utils from "@/utils" /** * method Default GET * path request path * params concatenates parameters behind the URL such as /id/1 * data request parameters, body * showLoading whether to display loading prompt, default true * showToast whether the request fails now, Function Ajax (method = "GET", path = "", params = "", data = {}, showLoading = true, ShowLoading = true) {if (showLoading) {uni. ShowLoading ({title: 'loading... ', mask: true }); } let url = '${config. API}/${path}${params}' 'Application /x-www-form-urlencoded'} const token = utils.getLocalStorage("token") if (token) {application/x-www-form-urlencoded'} Request return new PROMISE ((resolve, reject) => {uni.request({url, method, data, header, success: (res) => {if (res.data.status == 200) {// If the request status code is 200, resolve(res.data.data)} else {// A message indicating that the request failed is displayed uni.showToast({ title: res.data.message, icon: 'none', duration: 2000 }) } }, fail: Uni.hideloading () uni.showtoast ({title: "request failed, please try again ", icon:" None ", duration: 2000}); reject(err) } }); })}Copy the code

2. Create the compnnents folder in the root directory of the project to store components.

3. In the root directory of the project, create the config folder and index.js folder. This file stores the basic configuration information of the project, such as the interface address of the request API.

Export default {API} const API = "http://127.0.0.1/api" export default {API}Copy the code

4. Create a mixin folder in the root directory of the project and create index.js in this folder to store global mixin methods, such as route jumps and pop-up prompts.

NavigateTo (url) {uni. NavigateTo ({url}); }, reLaunch(url) { uni.reLaunch({ url }); }, switchTab(url) { uni.switchTab({ url }); NavigateBack () {uni. NavigateBack ()}, / / set the page title setNavigationBarTitle (title) {uni. SetNavigationBarTitle ({title}); // showSuccessTip(MSG) {uni. ShowSuccessTip ({title: MSG, icon: 'success'}); }, / / failure hint showErrorTip (MSG) {uni. ShowToast ({title: MSG | | 'operation failure, please try again, the icon:' none '}); }, // Default prompt showTip(MSG) {uni. ShowToast ({title: MSG, icon: 'none'); }}}Copy the code

5. Create the store folder in the root directory of the project

actions.js,

getters.js,

index.js,

mutations.js,

mutation-types.js,

State.js This file holds global VUex methods.

Index.js is a vuex entry file that provides methods for external invocation

import Vue from 'vue' import Vuex from 'vuex' import mutations from "./mutations" import * as actions from "./actions" import * as getters from "./getters" import state from "./state" Vue.use(Vuex) const store = new Vuex.Store({ mutations,  actions, getters, state }) export default storeCopy the code

6. Create a new utils folder under the root directory of your project. Under this folder, create filters.js and the global filter method.

Create index.js, global tool methods, such as local storage Settings, mobile phone numbers, email verification, etc.

// getLocalStorage const getLocalStorage = (name) => {try {const value = uni.getstoragesync (name); If (value) {return value}} catch (e) {// error}} const setLocalStorage = (name, value) => { try { uni.setStorageSync(name, value); } catch (e) {// error}} // Delete LocalStorage const removeLocalStorage = (name) => {try {uni.removeStoragesync (name); } catch (e) {// error}} // Clear the local cache const clearLocalStorage = () => {uni.clearstorage (); } / / verify phone number const RegExpPhone = (value) = > {return / ^ 1 [3 4 5 7 | | | | 8] [0-9] \ d {8} $/. The test (value)} / / verification code identification number const RegExpIdCard = (value) => { return /^[1-9]\d{14}(\d{2}[0-9xX])? The (value)} $/ / / verification email format const RegEmail = (value) = > {return / ^ / - \ w. ({0} @ ([a zA - Z0-9] tobacco on {1} \.) *[-a -za-z0-9]{1,63}$/.test(value)} export default {getLocalStorage, setLocalStorage, removeLocalStorage, clearLocalStorage, RegExpPhone, RegExpIdCard, RegEmail }Copy the code

After adding these files and folders, the overall structure of the project is as follows

Here we go. We’re all set. Just one more step

Add third-party plug-ins

1. Add the iconfont library, open iconFont, log in to your account, create a project, and select the appropriate icon to add to the project

Create a font folder under the static folder of the project root directory to store the CSS font files

Add icon icon CSS file to app. vue style tag

<style>
    @import url("./static/font/iconfont.css");
</style>
Copy the code

2. Upload the OSS file. For details, see the example

Create an OSS folder under the utils folder of the project root directory to store the files in the case

3. Add UI library UView, refer to the case

Go to the installation guide page of the official website uviewui.com/components/…

Using the second method, manually download the UView UI library and place it under the project root

After the addition is complete, the structure of the project is as follows, and the red box is the file added in this step

Here, finally over, done, shut down to sleep

Oh, there seems to be something wrong, there is a file but no reference, no reference how to use

Perfect configuration file, easy to call

1. Add code to main.js in the project root directory

import Vue from 'vue' import App from './App' import uView from "uview-ui"; Vue.use(uView); // use UI library import utils from './utils' import config from './config' import ajax from './ajax' import store from './ store ' import globalMixin from "./mixin" import * as filters from "./utils/filters.js" Vue.mixin(globalMixin) Object.keys(filters).foreach (key => vue.filter (key, filters[key])) vue.config.productionTip = false // example: Prototype.$config = config vue.prototype.$ajax = Ajax vue.prototype.$utils = utils Vue.prototype.$store = store App.mpType = 'app' const app = new Vue({ store, ... App }) app.$mount()Copy the code

2. Configuration uviewui

"easycom": {
	"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}
Copy the code

3. Idnex. vue Add the instance code to check whether the configuration takes effect

<u-button ></ u-button> <text class="iconfont icon-home "></text>Copy the code

Compile to wechat applet, preview success, console no error

Six: Nonsense

Long time no technical post, last time I wrote in Denver was 2 years ago, I wrote an article on python crawler, at that time I was learning crawler, I recorded it by the way.

It takes so much time to write something that is usually easy to develop and familiar with. As expected, it is even better to be a high-yielding writer

All things are difficult at the beginning. I hope I can keep track of every bit of development.

Finally, put a link to Github and you’ll have all the files for the project, right out of the box.

Welcome to clap brick, welcome to spray