One-week summary of WeChat mini program development
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
, 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() {
// 可以直接在页面方法中调用 showErrorMsg 方法
}
}, ErrorMsg/* 更多组件也可以*/));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`等页面事件
}- 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 parametersDefault value and analytical structurewx.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(...)
}
})Copy after login
Some function parameters can also use default parameters directly.
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(...)
}
})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>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 appletlet 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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Ouyi Exchange app domestic download tutorial
Mar 21, 2025 pm 05:42 PM
This article provides a detailed guide to safe download of Ouyi OKX App in China. Due to restrictions on domestic app stores, users are advised to download the App through the official website of Ouyi OKX, or use the QR code provided by the official website to scan and download. During the download process, be sure to verify the official website address, check the application permissions, perform a security scan after installation, and enable two-factor verification. During use, please abide by local laws and regulations, use a safe network environment, protect account security, be vigilant against fraud, and invest rationally. This article is for reference only and does not constitute investment advice. Digital asset transactions are at your own risk.
The difference between H5 and mini-programs and APPs
Apr 06, 2025 am 10:42 AM
H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.
What is the difference between H5 page production and WeChat applets
Apr 05, 2025 pm 11:51 PM
H5 is more flexible and customizable, but requires skilled technology; mini programs are quick to get started and easy to maintain, but are limited by the WeChat framework.
What should I do if the company's security software conflicts with applications? How to troubleshoot HUES security software causes common software to fail to open?
Apr 01, 2025 pm 10:48 PM
Compatibility issues and troubleshooting methods for company security software and application. Many companies will install security software in order to ensure intranet security. However, security software sometimes...
How to solve the problem of JS resource caching in enterprise WeChat?
Apr 04, 2025 pm 05:06 PM
Discussion on the JS resource caching issue of Enterprise WeChat. When upgrading project functions, some users often encounter situations where they fail to successfully upgrade, especially in the enterprise...
How to choose H5 and applets
Apr 06, 2025 am 10:51 AM
The choice of H5 and applet depends on the requirements. For applications with cross-platform, rapid development and high scalability, choose H5; for applications with native experience, rich functions and platform dependencies, choose applets.
Detailed tutorial on how to buy and sell Binance virtual currency
Mar 18, 2025 pm 01:36 PM
This article provides a brief guide to buying and selling of Binance virtual currency updated in 2025, and explains in detail the operation steps of virtual currency transactions on the Binance platform. The guide covers fiat currency purchase USDT, currency transaction purchase of other currencies (such as BTC), and selling operations, including market trading and limit trading. In addition, the guide also specifically reminds key risks such as payment security and network selection for fiat currency transactions, helping users to conduct Binance transactions safely and efficiently. Through this article, you can quickly master the skills of buying and selling virtual currencies on the Binance platform and reduce transaction risks.
The first dual-core cultural and tourism digital hominid in the country! Tencent Cloud helps Huaguoshan Scenic Area connect to DeepSeek, making the 'Sage Monkey King' smarter and warmer
Mar 12, 2025 pm 12:57 PM
Lianyungang Huaguoshan Scenic Area joins hands with Tencent Cloud to launch the first "dual-core brain" Digital Homo sapiens in the cultural and tourism industry - Monkey King! On March 1, the scenic spot officially connected the Monkey King to the DeepSeek platform, so that it has the two AI model capabilities of Tencent Hunyuan and DeepSeek, bringing tourists a smarter and more considerate service experience. Huaguoshan Scenic Area has previously launched the Monkey King of the Digital Homo sapiens based on Tencent Hunyuan model. This time, Tencent Cloud further utilizes technologies such as the big model knowledge engine to connect it to DeepSeek to achieve a "dual-core" upgrade. This makes the Monkey King's interactive ability to a higher level, faster response speed, stronger understanding ability, and more warmth. Monkey King has strong natural language processing capabilities and can understand various ways of asking questions from tourists.
