The following is a summary of the week of WeChat applet development. I hope it will be helpful to students on the PHP Chinese website.

Editor

I use vscode directly (the same applies to other editors, and I still use WeChat development tools for preview), and syntax highlighting will 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, you need to read the WeChat mini program documentation (Framework, components and API) in full to facilitate searching later.

• view component corresponds to p

• #text in html and corresponds to selector in span

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

##Public component

project Create new components in the directory, follow a similar directory structure like pages

, and put the template, style and js file of each component in the same folder

• The template can be directly or use +

• style if you need to pass a value @import import

• js and use

  require to introduce it into the page, and then use the following mergePage to load it into the page object .

mergePage

• Loading of components

const?ErrorMsg?=?require('../../../components/error-msg/error-msg');
Page(util.mergePage({
??//?頁面?Page?方法...
??onLoad()?{
????//?可以直接在頁面方法中調(diào)用?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);
??}
??//?可以在這里注冊(cè)?`onLoad`，`onShow`等頁面事件
}

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

• mergePage source code

/**
?*?合并?Page?對(duì)象所有的方法及事件
?*?子對(duì)象不能使用?data?屬性，請(qǐng)?jiān)?onLoad?中使用?setData?方法設(shè)置
?*/
function?mergePage(dest,?...src)?{
??let?args?=?arguments;
??let?eventsStack?=?{
????onLoad:?[],
????onReady:?[],
????onShow:?[],
????onHide:?[],
????onUnload:?[],
????onPullDownRefresh:?[],
????onReachBottom:?[],
??};
??//?保存所有的事件，最后一個(gè)參數(shù)的事件會(huì)最先調(diào)用。
??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 parametersDefault value and analytical structure

wx.request({
  complete: ({data= {}}) =>?{
????//?1.?因?yàn)?wx.request?返回的接口數(shù)據(jù)是在?data?屬性里，這里我們只要?data?屬性就行了，所以直接參數(shù)解析構(gòu)
????//?2.?如果?failed，無?data?時(shí)，data?將為默認(rèn)值?{}
????if(data.code?!==?0)?{
??????//?do?something?if?request?failed
??????return;
????}
????//?請(qǐng)求正常處理代碼
????//?3.?因?yàn)橛玫募^函數(shù)，回調(diào)里可以正常使用?this,?訪問?Page?對(duì)象的方法
????//?比如?this.setData(...)
??}
})

Some function parameters can also use default parameters directly.

ExtensionOperator and object attribute abbreviation

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

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

In this way,

variables can be used in the template for all key of the obj object, as well as id and name

templateString

You can directly and conveniently use the es 6 template string in the applet

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")

The above is the detailed content of One-week summary of WeChat mini program development. For more information, please follow other related articles on the PHP Chinese website!