Summarize an example of the WeChat development process

Editor

#I use vscode directly (the same applies to other editors, and the WeChat development tools are still used for preview), syntax Highlight and set wxml to html and wxss to css

"files.associations": {
  "*.wxss": "css",
  "*.wxml": "html"
}

You can also install mini program related plug-ins

Start writing code

• First of all, you need to read the WeChat applet documentation (Framework, components and API) in full to facilitate searching when used later.

• view component corresponds to p

• #text in html and corresponds to selector in span

• wxss Only supports element, #id, .className, ::after, ::before

Public components

Create new components in the project directory, press Similar to the pages directory structure, put the template, style and js files of each component in the same folder

• The template can be directly 0bc68e57bb27aaa30e943ff047d67717 Or if you need to pass a value, use de3db5173ba162146856f74f89e5f81e + d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2

• style, use @import to import

• js is introduced into the page using require, and then uses mergePage below to load it into the page object.

  fc430c7db1eecf4621f4fc8a5479f894

mergePage

• Loading of components

const ErrorMsg = require('../../../components/error-msg/error-msg');
Page(util.mergePage({
  // 页面 Page 方法...
  onLoad() {
    // 可以直接在页面方法中调用 showErrorMsg 方法
  }
}, ErrorMsg/* 更多组件也可以*/));

Use the mergePage method to register all component methods and page events to the page object

• How to write components

var errorTimer;
module.exports = {
  showErrorMsg(msg, cb) {
    clearTimeout(errorTimer);
    this.setData({
      errorMsg: msg
    });
    errorTimer = setTimeout( () => {
      this.setData({
        errorMsg: false
      });
      cb && cb();
    }, 2000);
  }
  // 可以在这里注册 `onLoad`，`onShow`等页面事件
}

You can use this.setData in the component to update page data, or register onLoad, onShow and other page events. The event with the last parameter of mergePage will be called first.

• mergePage source code

/**
 * 合并 Page 对象所有的方法及事件
 * 子对象不能使用 data 属性，请在 onLoad 中使用 setData 方法设置
 */
function mergePage(dest, ...src) {
  let args = arguments;
  let eventsStack = {
    onLoad: [],
    onReady: [],
    onShow: [],
    onHide: [],
    onUnload: [],
    onPullDownRefresh: [],
    onReachBottom: [],
  };
  // 保存所有的事件，最后一个参数的事件会最先调用。
  for(let name in eventsStack) {
    for(let i = args.length - 1; i >= 0; i--) {
      args[i][name] && eventsStack[name].push(args[i][name])
    }
  }
  Object.assign(...args);
  for(let name in eventsStack) {
    dest[name] = function() {
      for(let i = 0; i < eventsStack[name].length; i++) {
        eventsStack[name][i].apply(this, arguments);
      }
    }
  }
  return dest;
}

es 6

Arrow function, function parameters Default value and parsing structure

wx.request({
  complete: ({data= {}}) => {
    // 1. 因为 wx.request 返回的接口数据是在 data 属性里，这里我们只要 data 属性就行了，所以直接参数解析构
    // 2. 如果 failed，无 data 时，data 将为默认值 {}
    if(data.code !== 0) {
      // do something if request failed
      return;
    }
    // 请求正常处理代码
    // 3. 因为用的箭头函数，回调里可以正常使用 this, 访问 Page 对象的方法
    // 比如 this.setData(...)
  }
})

Some function parameters can also use default parameters directly.

Expanded operators and object attribute abbreviations

When passing data parameters to template, you can use object attribute abbreviations, such as

<template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>

In this way, all keys of the obj object as variables, as well as id and name can be used in the template

Template string

You can use es directly and conveniently in the applet 6 Template String

let url = `${app.globalData.API_PREFIX}/cart/add`;

More es 6 Features

Other Notes

• wx.showToast icon only supports "success" and "loading", and the error prompt must be customized

• If the variables in the template have no value, please check whether the data is passed in.

• The development tool (v0.10.102800) can use the following method to add an interface to request a domain name. Unfortunately, it cannot be used in WeChat.

// 放到 app.js 前面
 wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');

• The JS of all pages will be executed immediately when starting, instead of being executed when the page is opened, so some code is written globally It should be placed after onLoad as much as possible. Here is the loaded code from Debugging source:

define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){ 'use strict';
var app = getApp();
var util = require('../../../utils/util');
var ErrorMsg = require('../../../components/error-msg/error-msg');
var AddressPicker = require('../../../components/address-picker/address-picker');
Page(util.mergePage({
  // 页面代码省略
}, AddressPicker, ErrorMsg));
//# sourceMappingURL=data:application/json;...
});require("pages/index/index.js")

[Related recommendations]

1. WeChat public account platform source code download

2. Summary of WeChat applet development UI layout techniques

3. WeChat payment for WeChat development

4. Worth-seeing summary of WeChat mini program development experience

The above is the detailed content of Summarize an example of the WeChat development process. For more information, please follow other related articles on the PHP Chinese website!