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
Or if you need to pass a value, use + 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.
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!
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
PHP WeChat development: How to implement message encryption and decryption
May 13, 2023 am 11:40 AM
PHP is an open source scripting language that is widely used in web development and server-side programming, especially in WeChat development. Today, more and more companies and developers are starting to use PHP for WeChat development because it has become a truly easy-to-learn and easy-to-use development language. In WeChat development, message encryption and decryption are a very important issue because they involve data security. For messages without encryption and decryption methods, hackers can easily obtain the data, posing a threat to users.
Using PHP to develop WeChat mass messaging tools
May 13, 2023 pm 05:00 PM
With the popularity of WeChat, more and more companies are beginning to use it as a marketing tool. The WeChat group messaging function is one of the important means for enterprises to conduct WeChat marketing. However, if you only rely on manual sending, it is an extremely time-consuming and laborious task for marketers. Therefore, it is particularly important to develop a WeChat mass messaging tool. This article will introduce how to use PHP to develop WeChat mass messaging tools. 1. Preparation work To develop WeChat mass messaging tools, we need to master the following technical points: Basic knowledge of PHP WeChat public platform development Development tools: Sub
PHP WeChat development: How to implement user tag management
May 13, 2023 pm 04:31 PM
In the development of WeChat public accounts, user tag management is a very important function, which allows developers to better understand and manage their users. This article will introduce how to use PHP to implement the WeChat user tag management function. 1. Obtain the openid of the WeChat user. Before using the WeChat user tag management function, we first need to obtain the user's openid. In the development of WeChat public accounts, it is a common practice to obtain openid through user authorization. After the user authorization is completed, we can obtain the user through the following code
PHP WeChat development: How to implement group message sending records
May 13, 2023 pm 04:31 PM
As WeChat becomes an increasingly important communication tool in people's lives, its agile messaging function is quickly favored by a large number of enterprises and individuals. For enterprises, developing WeChat into a marketing platform has become a trend, and the importance of WeChat development has gradually become more prominent. Among them, the group sending function is even more widely used. So, as a PHP programmer, how to implement group message sending records? The following will give you a brief introduction. 1. Understand the development knowledge related to WeChat public accounts. Before understanding how to implement group message sending records, I
PHP WeChat development: How to implement customer service chat window management
May 13, 2023 pm 05:51 PM
WeChat is currently one of the social platforms with the largest user base in the world. With the popularity of mobile Internet, more and more companies are beginning to realize the importance of WeChat marketing. When conducting WeChat marketing, customer service is a crucial part. In order to better manage the customer service chat window, we can use PHP language for WeChat development. 1. Introduction to PHP WeChat development PHP is an open source server-side scripting language that is widely used in the field of Web development. Combined with the development interface provided by WeChat public platform, we can use PHP language to conduct WeChat
PHP WeChat development: How to implement voting function
May 14, 2023 am 11:21 AM
In the development of WeChat public accounts, the voting function is often used. The voting function is a great way for users to quickly participate in interactions, and it is also an important tool for holding events and surveying opinions. This article will introduce you how to use PHP to implement WeChat voting function. Obtain the authorization of the WeChat official account. First, you need to obtain the authorization of the WeChat official account. On the WeChat public platform, you need to configure the API address of the WeChat public account, the official account, and the token corresponding to the public account. In the process of our development using PHP language, we need to use the PH officially provided by WeChat
Steps to implement WeChat public account development using PHP
Jun 27, 2023 pm 12:26 PM
How to use PHP to develop WeChat public accounts WeChat public accounts have become an important channel for promotion and interaction for many companies, and PHP, as a commonly used Web language, can also be used to develop WeChat public accounts. This article will introduce the specific steps to use PHP to develop WeChat public accounts. Step 1: Obtain the developer account of the WeChat official account. Before starting the development of the WeChat official account, you need to apply for a developer account of the WeChat official account. For the specific registration process, please refer to the official website of WeChat public platform
How to use PHP for WeChat development?
May 21, 2023 am 08:37 AM
With the development of the Internet and mobile smart devices, WeChat has become an indispensable part of the social and marketing fields. In this increasingly digital era, how to use PHP for WeChat development has become the focus of many developers. This article mainly introduces the relevant knowledge points on how to use PHP for WeChat development, as well as some of the tips and precautions. 1. Development environment preparation Before developing WeChat, you first need to prepare the corresponding development environment. Specifically, you need to install the PHP operating environment and the WeChat public platform
