An incomplete guide to writing a simple native wechat applet

Itchy mouse 2021-04-07 21:41:48
incomplete guide writing simple native

2021 year 4 Monthly version of wechat applet development incomplete guide .

1. preparation

  • stay WeChat public platform Register applet ( personal : Each micro signal can be bound with a small program ; Each applet corresponds to a mailbox , This mailbox can't register applet before / official account )
  • Download wechat developer tools
  • install node.js( If you want to do cloud function )

Create new projects in wechat developer tools : image.png

A successful registered wechat app APPID route :

Log in wechat public platform - Applet => Set up => Basic settings => Account information


2. R & D part

2.1 The overall structure

In theory , After the new project , A sample project of a small program has appeared in the corresponding directory ( But if you create a new test number , You can choose JavaScript / TypeScript But there is no back-end cloud function ).

among ,miniprogram The folder mainly contains the front-end related files ,cloudfunctions Files related to cloud development are placed in the folder .


If the front-end display wants to make a new start , You can create a new folder in the root directory, such as app, Then modify the root directory project.config.json Of documents miniprogramRoot Configuration items for app, The same goes for the cloud development catalog .

For a small program with simple requirements , Basically, developers can use wechat development tools , front end ( Applet ) backstage (nodejs Cloud functions ) Cloud development built in JSON database You can use this tool .

2.2 The front end

2.2.1 Directory structure and the role of each file

An example of the front end directory structure

├── app.js
├── app.json
├── app.wxss
├── components
│ └── chatroom
│ ├── chatroom.js
│ ├── chatroom.json
│ ├── chatroom.wxml
│ ├── chatroom.wxss
│ ├── dots.gif
│ └── photo.png
├── images
│ ├── example.png
├── pages
│ ├── about
│ │ ├── about.js
│ │ ├── about.json
│ │ ├── about.wxml
│ │ └── about.wxss
│ ├── index
│ ├── index.js // It's necessary 
│ ├── index.json
│ ├── index.wxml // It's necessary 
│ ├── index.wxss
├── sitemap.json
 Copy code 

app.json file

app.json Is the global configuration of the current applet , Including all the page paths of the applet 、 Interface performance 、 Network timeout 、 Bottom tab etc. .

// app.json
"pages": [
// Basic configuration 
"window": {
"backgroundColor": "#fff",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#343434",
"navigationBarTitleText": " Applet title",
"navigationBarTextStyle": "white"
 Copy code 

On each page json file

Each applet page can also use the same name .json File to configure the window representation of this page , Configuration items in the page will overwrite app.json Of window The same configuration item in .


<view> ~= <div> <text> ~= <span> <image> ~= <img>

Warning<text> Tags can only be nested inside <text>, There are other theoretical anomalies , Including is not limited to <span> / <i> / <b> / <a>



WXSS Selector and CSS Basically the same , Pseudo classes are not supported in official documents , In practice, sometimes work(:first-child), Sometimes there are wonderful bug(:hover,:active......)

Other basic CSS How to write WXSS How to write .


Very similar Vue.

Page lifecycle : onLoad()

An example of bidirectional data binding . Try not to change the value of bidirectional data binding in milliseconds

<!-- wxml -->
<view class="playing" wx:if="{{pageStatus=='recording'}}">
<view class="progress-box">
<progress percent="{{recordingPercentage}}" color="#10AEFF" active active-mode="forwards" stroke-width="3" />
<view class="time-counting">
Recording time :{{recordingTime}} / 60 second
<view bindtap="customFuntion"></view>
 Copy code 
data: {
pageStatus: "pre",
recordingPercentage: 0,
recordingTime: 0,
intervalId: 0,
array: [' mandarin ', ' Cantonese ', ' Sichuan dialect '],
langIndex: 0,
langArray: ["zh_CN", "zh_HK", "sichuanhua"],
currentSelectedLang: "zh_CN"
onLoad: function() {
wx.setStorageSync('reTryCount', 0)
customFuntion:function(e) {
bindPickerChange: function (e) {
console.log('picker Send selection change , Carrying value is ', e.detail.value);
langIndex: e.detail.value
 Copy code 

A little opinion on the front part

Data driven flexibility

No support for DOM Direct operation of , To achieve Element The addition, deletion and modification of the new edition should be combined with wx:if and wx:for.

Through bidirectional data binding to change the page elements class.

It must be combined with real machine debugging

Slightly pit , There are a lot of situations work, The real machine bug; There are also many situations where simulators can't be implemented , The real machine can .

There are also cases where the trigger time nodes of callback functions are different , for instance :

wx.playVoice Of success: As soon as the simulator starts playing, it calls the callback function , The real machine will not be called until all the audio is played

2.3 Development of cloud

Development of cloud => Server side .

  • Simple cloud functions NodeJS, Add, delete, check and modify the database , And other things that can be done through NodeJS Package function .
  • Cloud hosting (Java/PHP/Python/.Net) Relatively complex

Billing method : Cloud functions charge by request 、 By the number of requests and by each call GBS, The consumption of cloud hosting running by container CPU、 Memory 、 External network traffic generated by service 、 Service build time .

Cloud functions


  1. newly build / Selection environment
  2. newly build Node.js Cloud functions
  3. npm install --save wx-server-sdk@latest

Example cloud functions (login) Code :

// Deploy : stay cloud-functions/login Right click the folder and select “ Upload and deploy ”
const cloud = require('wx-server-sdk')
// initialization cloud
// API Calls are consistent with the current environment of cloud functions 
* In this example, an automatically authenticated applet user openid Back to the applet side
* event Parameter contains the data
exports.main = async (event, context) => {
let data = event["file"];
// Other custom logic can be executed 
// console.log The content of can be viewed in the cloud function call log of cloud development 
// obtain WX Context ( Wechat call context ), Include OPENID、APPID、 And UNIONID( Need to meet UNIONID Acquisition conditions ) Etc 
const wxContext = cloud.getWXContext()
return {
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
env: wxContext.ENV,
 Copy code 

After writing , Upload =>


Front end calls :{
name: "login",
data: {
success: res => {
title: ' Successfully uploaded ',
fail: e => {
title: ' Upload failed , Please try again ',
complete: () => {
success: (res) => {
url: '../nextPage/nextPage',
 Copy code 

2.4 database

aggregate - Collection ~= table

const cloud = require('wx-server-sdk')
const db =
// Now create a new collection in the database of the development tool todos
const todos = db.collection('todos')
 Copy code 

Collection The field of is not fixed , It can be different every time , Support multiple data types .

Add or delete check change Be similar to RestfulAPI

// add
// data The field indicates the JSON data 
data: {
// _id: 'todo-identifiant-aleatoire', // Optional custom _id, In this scenario, you can use the database to automatically allocate 
description: "learn cloud database",
due: new Date("2018-09-01"),
tags: [
// Add a geographic location to the to-do (113°E,23°N)
location: new db.Geo.Point(113, 23),
done: false
success: function(res) {
// res It's an object , Among them is _id Field marks the... Of the record you just created id
 Copy code 

3. After the release

3.1 Publishing process

The upper right Upload , After uploading it is Develop the experience version , Can't be searched for , It can't be added to other user experiences that haven't been added to the list of experience users and development users .

Go to the background of the app , Submit audit , After passing the audit, it becomes Release , Can be searched and used .

Applet management background => management => version management


3.2 Data statistics

Page analysis -> Where do users run


Other statistical examples




The end .


本文为[Itchy mouse]所创,转载请带上原文链接,感谢

  1. Behind the miracle of the sixth championship is the football with AI blessing in the Bundesliga
  2. An easy to use Visual Studio code extension - live server, suitable for front-end gadget development
  3. 用 Python 抓取公号文章保存成 HTML
  4. User login of front end spa project based on Vue and Quasar (2)
  5. Summary of common selectors in CSS
  6. Using Python to grab articles with public number and save them as HTML
  7. To "restless" you
  8. 【免费开源】基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)
  9. 【微信小程序】引入阿里巴巴图标库iconfont
  10. layui表格点击排序按钮后,表格绑定事件失效解决方法
  11. Unity解析和显示/播放GIF图片,支持http url,支持本地file://,支持暂停、继续播放
  12. 【vue】 export、export default、import的用法和区别
  13. [free and open source] crudapi front end spa project based on Vue and Quasar
  14. [wechat applet] introduces Alibaba icon library iconfont
  15. Layui table click Sort button, table binding event failure solution
  16. Element树形控件Tree踩坑:修改current-node-key无效
  17. Unity parses and displays / plays GIF images, supports HTTP URL, supports local file: / /, supports pause and resume playback
  18. Element树形控件Tree踩坑:修改current-node-key无效
  19. The usage and difference of export, export default and import
  20. Element tree control: invalid to modify current node key
  21. Element tree control: invalid to modify current node key
  22. linux下安装apache(httpd-2.4.3版本)各种坑
  23. How to install Apache (httpd-2.4.3) under Linux
  24. 程序员业余时间写的代码也算公司的?Nginx之父被捕引发争议
  25. Nacos serialize for class [] failed.
  26. Do programmers write code in their spare time? Controversy over the arrest of nginx's father
  27. Nacos serialize for class [ . common.http.HttpRestResult ] failed.
  28. Seamless management of API documents using eolink and gitlab
  29. vue 的基础应用(上)
  30. 28岁开始零基础学前端,这些血的教训你一定要避免
  31. Basic application of Vue
  32. Starting at the age of 28, you must avoid these bloody lessons
  33. Ubuntu 16.04 can not connect to the wireless solution and QQ installation
  34. Industry security experts talk about the rapid development of digital economy, how to guarantee the security of data elements?
  35. 利用Vue实现一个简单的购物车功能
  36. Behind the "tireless classroom" and teacher training, can byte education really "work wonders"?
  37. Using Vue to realize a simple shopping cart function
  38. 【css】伪类和伪类元素的区别
  39. 【css效果】实现简单的下拉菜单
  40. 【vue】父子组件传值
  41. The difference between pseudo class and pseudo class elements
  42. [CSS effect] simple drop-down menu
  43. [Vue] value transfer by parent-child component
  44. 【css】设置table表格边框样式
  45. 【css】修改input,textarea中的placeholder样式
  46. vue-router的两种模式(hash和history)及区别
  47. CSS3的滤镜filter属性
  48. [CSS] set table border style
  49. [CSS] modify the placeholder style in input and textarea
  50. Two modes of Vue router (hash and History) and their differences
  51. Filter property of CSS3
  52. 全局安装gulp 报错问题解决
  53. Solution of error report in global installation of gulp
  54. 18个好用的自定义react hook
  55. 你应该知道的常用服务器HTTP状态码?
  56. 18 user defined react hooks
  57. What HTTP status codes should you know about common servers?
  58. 手把手教你打造属于自己团队的前端小报系统
  59. Hand in hand to teach you to build your own front-end tabloid system
  60. In 2021, enterprise SEO actual operation, how to less update, batch ranking regional words?