Wechat applet development process (with mind map)

One . Tools
    HBuilder X

• Introduce

HBuilderX Built in relevant environment , Open the box , No need to configure nodejs

• install

  download App Development Edition , It can be used out of the box ; For example, download the standard version ,

Running or releasing uni-app when , Installation will be prompted uni-app plug-in unit , Plug in can only be used after downloading

Installation address https://www.dcloud.io/hbuilderx.html

  notes ： If it's the first time , You need to configure the applet first ide The relevant path of , To run successfully . Here's the picture , You need to enter the installation path of wechat developer tool in the input box . if HBuilderX Wechat developer tools cannot be started normally , It needs to be started manually by the developer , And then uni-app Copy the path of generating applet project to wechat developer tool , stay HBuilderX Inside development , You can see the real-time effect in the wechat developer tool .
uni-app By default, the project is compiled to the root directory unpackage Catalog .

• Create project

1. Applet ：  choice 【uni-app】--- Default template
2. pc： choice 【 Common projects 】---vue project （vue cli ）
3. Background management system ：  choice 【uni-app】---uni-admin
4. Normal page （ Single page ）： choice 【 Common projects 】---html project

• Run the project

• Click item —— Click on the toolbar —— function

  Be careful ： If it's the first time , You need to configure the applet first ide The relevant path of , To run successfully . Here's the picture , You need to enter the installation path of wechat developer tool in the input box . if HBuilderX Wechat developer tools cannot be started normally , It needs to be started manually by the developer , And then uni-app Copy the path of generating applet project to wechat developer tool , stay HBuilderX Inside development , You can see the real-time effect in the wechat developer tool .

  uni-app By default, the project is compiled to the root directory unpackage Catalog . 

  

• In wechat developer tools , Click on the toolbar —— Set up —— Security Settings

  Open the service port

• Packaging project

• Click on the toolbar —— issue

• Click to view the release steps https://uniapp.dcloud.io/quickstart-hx?id=%E5%8F%91%E5%B8%83uni-app

• install ui frame

     uview

• Introduce ：uView yes uni-app Ecological dedicated UI frame ,uni-app It's a use Vue.js Develop a framework for all front-end applications , Developers write a set of code , Can be posted to iOS、Android、H5、 And all kinds of little programs ( WeChat / Alipay / Baidu / headlines /QQ/ nailing ) Wait for multiple platforms ( Introduction from uni-app network ).
• uView rely on SCSS

  Installation steps

1. Search the plug-in market uview Download
2. Click to use HBuilder X Import plug-ins
3. introduce uView Lord JS library , In the project root directory main.js in , Introduce and use uView Of JS library , Note that these two lines should be placed in import Vue after  

   // main.js
   import uView from "uview-ui";
   Vue.use(uView);

4. install scss, stay HX Menu Tools -> Found in plug-in installation "scss/sass compile " Plug in to install , If not effective , restart HX that will do
5. introduce uView Overall situation SCSS topic file , At the root of the project uni.scss To introduce this file .
6. introduce uView Basic style , Be careful ： stay App.vue The position of the first line in the... Is introduced , Pay attention to style Label to join lang="scss" attribute
7. To configure easycom Component mode , This configuration needs to be in the project root directory pages.json In the middle of

Two . frame / grammar

• uni-app

  Introduce ： Use Vue.js Develop a framework for all front-end applications , Developers write a set of code , Can be posted to iOS、Android、Web（ Response type ）、 And all kinds of little programs （ WeChat / Alipay / Baidu / headlines / anonymous letter /QQ/ Well quickly / nailing / TaoBao ）、 Fast application and other platforms

• Directory structure

•  common: Public js file
• compoents: Here are reusable components
• pages: Here are the pages
• static: Here we store all kinds of static pictures 、 Icon
• uni-modules/uview-n： These are plug-ins
• App.vue: It's our root component , All pages are in App.vue Next to switch , It's a page entry file , You can call the lifecycle function of the application , Application configuration , Used to configure App Global style and monitor Life cycle
• main.js: It's our project entry file , The main function is to initialize vue Instance and use the required plug-ins .
• manifest.json File is the configuration file of the application , Used to specify the name of the application 、 Icon 、 Authority, etc .
• uni.scss The purpose of the document is to facilitate the overall control of the application style . Like button color 、 Border style , uni.scss There are a number of preset files scss Variable presets .
• unpackage It's the package catalog , Here's the package file for each platform

3、 ... and . To configure

• tab Bottom bar

stay page.json Configuration inside
pages The first page in , To appear in tabBar In the configuration item , Examples are as follows ：

 "tabBar": {
            "color": "#7A7E83",
            "selectedColor": "#3cc51f",
            "borderStyle": "black",
            "backgroundColor": "#ffffff",
            "height": "50px",
            "fontSize": "10px",
            "iconWidth": "24px",
            "spacing": "3px",
            "list": [{
                "pagePath": "pages/index/index",
                "iconPath": "static/tab/icon_index.png",
                "selectedIconPath": "static/tab/icon_index_sel.png",// Jump icon 
                "text": " home page "
            }, {
                "pagePath": "pages/shop/shop",
                "iconPath": "static/tab/icon_cart.png",
                "selectedIconPath": "static/tab/icon_cart_sel.png",
                "text": " Shopping Mall "
            },
            {
                "pagePath": "pages/mine/mine",
                "iconPath": "static/tab/icon_my.png",
                "selectedIconPath": "static/tab/icon_my_sel.png",
                "text": " my "
            }]
        }

•   px turn upx

1. The toolbar -- Set up --- Editor configuration --- Enable px turn rpx A hint of
2. Jump to web page to view settings px turn rpx

•   Compile configuration

  Need configuration appid

1.   In the catalog manifest.json The wechat applet configuration inside is filled with appid
2. In the upper right corner of wechat developer tool “ details ” Fill in the basic information appid

•      to subcontract
•      Application configuration

Four . Data interface

Steps are as follows ：

• install uni-ajax

Enter the command : 

cnpm install uni-ajax

• new directory common

     newly build ajax.js

（1）//  introduce  uni-ajax  modular 
import ajax from 'uni-ajax'
（2）//  Create request instance 
 const instance = ajax.create({
    //  Local test address 
    // baseURL: 'http://172.1343.0.101:8080',
    //  Online address 
    baseURL: 'https://gindus34324try.zjyqzg.com/prod-api/',
})
（3） //  Add a request interceptor 
   instance.interceptors.request.use(
    config => {
        config.header['Authorization'] = 'Bearer ' + uni.getStorageSync("wxUserToken")
        return config
    },
    error => {
        //  What do you do about the request error 
        return Promise.reject(error)
    }
)
（4） //  Add response interceptors 
// Add interceptors according to the business , The following business situation is ： You can only view the business after logging in , The back end will return the status code 401, Will jump to the login screen , After logging in, you will jump back to the previous page , When the status code is 500 when , It means something went wrong , Status code for 200 when , It means that you have succeeded                                                  
 instance.interceptors.response.use(
    response => {
        var currentPath = getCurrentPages()[0].$page.fullPath;
        uni.showLoading({
            title: ' Loading '
        })

        if (response.data.code == 401) {
            // No sign in 、 Jump to the login page without getting the user data 
            uni.navigateTo({
                url:"/pages/home/home"
            })
            
        } else if (response.data.code == 500) {
            uni.$u.toast(response.data.msg);
            uni.hideLoading();
        }

        if (response.data.code == 200) {
            setTimeout(function() {
                uni.hideLoading();
            }, 500);
        }
        //  What to do with the response data 
        return response.data
    },
    error => {
        //  Do something about response errors 
        return Promise.reject(error)
    }
)

//  export  create  The created instance 
export default instance

•      In the catalog main.js Mount inside

 import App from './App'
import ajax from './common/ajax.js'

// #ifndef VUE3
import Vue from 'vue'
import uView from "uview-ui"
Vue.prototype.$ajax = ajax;
Vue.use(uView);
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

•      new directory api

newly build api Folder , Examples are as follows ：

  Create according to the page and the common interface 
 //  Query the details of the competition 
const matchInfo = '/terminal/applymatchactivity/16';
// Download the competition document 
const downLoadFile = '/terminal/applymatchactivity/downLoad/16';

export {
    matchInfo,
    downLoadFile,
}

• Call and import in the page that needs to use the interface

  <script>
    import {matchInfo} from '@/api/match/match';
    export default {
            methods: {                               
              getInfo() {
             // Get event details 
              this.$ajax.get(matchInfo, {}).then(res => {
                        this.info = res.data;}
                    })
            },

5、 ... and . Developer model
     Administrators can be added on wechat public platform , It's ready for development

6、 ... and . Sign in （ Later, there will be corresponding article sections ）

1.  （ Wechat login authorization ）
2. （ cell-phone number ）-- Verification code login
3.  （ mailbox 、 cell-phone number ）-- Password to login

7、 ... and . Commonly used api

8、 ... and . page
     Page Jump
     Address carries parameters

Nine . Upload experience version

Ten . Common mistakes
     Wechat applet tabBar Reasons and solutions for not displaying bottom menu
    TypeError: Cannot read property ‘forceUpdate‘ of undefined
    div Set up position:fixed perhaps absolute After absolute positioning ,click Event invalidation problem