Introduction to WeChat Mini Program Development

1. What is WeChat Mini Program:

Let’s get back to the point, what is the essence of WeChat Mini Program? Personally, I understand that the essence of WeChat mini programs is still a set of front-end frameworks. Based on the original third-party h5 page, the WeChat team can only use h5 to implement functions that can be implemented natively in WeChat, such as uploading pictures, etc. Then we adopt the open part of jsbridge's API to facilitate developers. However, as a major manufacturer, it will definitely not just open up part of the jsbridge API. By the way, WeChat has implemented its own mvvm framework like vue and react, which is the current WeChat applet. The official document describes this: The framework provides its own view layer description language WXML and WXSS, as well as a JavaScript-based logic layer framework, and provides data transmission and event systems between the view layer and the logic layer, allowing Developers can easily focus on data and logic.

The essence is still a front-end framework. The code will eventually be packaged into a piece of JavaScript and run when the mini program is started until the mini program is destroyed. The template syntax is similar to Vue and close to native custom tags. Data bindingThe syntax for rendering and rendering is similar to vue, but it starts with wx: (vue uses v: as an identifier). The event system defines its own event system like react.

2. WeChat operating environment:

WeChat applet runs on three terminals: iOS, Android and developer tools for debugging

On iOS, The javascript code of the mini program runs in JavaScriptCore

On Android, the javascript code of the mini program is parsed through the X5 kernel

On the development tool, the mini program The javascript code is run in nwjs (chrome kernel). The script logic of the

page is run in JsCore. JsCore is an environment without window objects, so BOM objects such as window cannot be used in scripts. . Therefore, libraries such as jquery and zepto that obtain DOM objects through window or document cannot be used.

3. Directory structure:

The applet contains an app that describes the overall program and multiple pages that describe their respective pages.

The main part of a small program consists of three files, which must be placed in the root directory of the project, as follows:

app.js logical part, that is, global variables or methods

app.json Public configuration, including page configuration, etc., top and bottom tab settings, background color, etc.

app.wxss Public style sheet can be overridden by specific page styles

app.js code (code taken from WeChat official demo) and comments are as follows:

//app.js
// 微信小程序就是调用微信开放jsbridge，来完成微信h开发中某些原本比较难的功能的特定的微信前端框架
/**
* app 即小程序的生命周期管理。
* */
App({
// 初始化
onLaunch: function () {
 //调用API从本地缓存中获取数据
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
},
// 全局方法或者变量，可在不同page中使用
getUserInfo:function(cb){
 var that = this
 if(this.globalData.userInfo){
 typeof cb == "function" && cb(this.globalData.userInfo)
 }else{
 //调用登录接口
 wx.login({
  success: function () {
  wx.getUserInfo({
   success: function (res) {
   that.globalData.userInfo = res.userInfo
   typeof cb == "function" && cb(that.globalData.userInfo)
   }
  })
  }
 })
 }
},
globalData:{
 userInfo:null
}
})

{
"pages":[
 "pages/index/index",
 "pages/logs/logs",
 "pages/swiper/swiper",
 "pages/input/input",
 "pages/form/form"
],
"window":{
 "navigationBarBackgroundColor": "#ffffff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText": "微信小程序",
 "backgroundColor": "#eeeeee",
 "backgroundTextStyle": "light"
},
"tabBar":{
 "borderStyle": "white",
 "list": [{
 "pagePath": "pages/index/index",
 "iconPath":"image/icon_API.png",
 "selectedIconPath":"image/icon_API_HL.png",
 "text": "首页"
  },{
 "pagePath": "pages/form/form",
 "iconPath":"image/plus.png",
 "selectedIconPath":"image/green_tri.png",
 "text": "更多"
 }, {
 "pagePath": "pages/swiper/swiper",
 "iconPath":"image/icon_COM.png",
 "selectedIconPath":"image/icon_COM_HL.png",
 "text": "其他"
 }
 ]
}
}

A specific page generally includes the following files (similar to global files, but only affects this page):

.js The page logic is no different from js

.wxml The page structure corresponds to html, but a lot of custom tags are applied

.wxss Page style sheet Corresponding to the css file, the priority is higher than appapp.wxss. The writing method of css does not fully support

.json page configuration to specify the title and other elements of a specific page

For convenience The developer reduced the configuration items and stipulated that the four files describing the page must have the same path and file name.

That is to say, we do not need to specify the js or wxss file corresponding to a certain page, we only need to keep the path and file name the same.

4. Template language and event system

1): The template syntax is similar to vue, close to native custom tags. Data binding and rendering are similar to vue's syntax, but it starts with wx: (vue uses v: as an identifier) ​​

/**
* 类似vue的条件渲染语法，熟悉vue的话应该不会陌生
**/
<view wx:if="{{condition}}">
</view>

2): Event system

The event system is similar to react: Defined a set of its own event system. Contains a series of common event types:

touchstart The finger touch action starts

touchmove The finger moves after touching it

touchcancel The finger touch action is interrupted, such as incoming call reminder, pop-up window

touchend The finger touch action ends

tap Leave immediately after the finger touches

longtap After the finger touches, leave after more than 350ms

Binding method: event binding The writing method is the same as the attribute of the component, in the form of key+value:

Start with bind or catch, and then follow the type of event, such as bindtap catchtouchstart,

value is a string, need Define the function with the same name in the corresponding Page. Otherwise, an error will be reported when the event is triggered.

bind event binding will not prevent bubbling events from bubbling upwards, and catch event binding can prevent bubbling events from bubbling upwards. For example:

/**
*bind/catch +事件类型，两种事件绑定方式
*/
<view id="outter" bindtap="handleTap1">
 outer view
 <view id="middle" catchtap="handleTap2">
 middle view
 <view id="inner" bindtap="handleTap3">
  inner view
 </view>
 </view>
</view>

3): Event objects: including BaseEvent basic event object, CustomEvent custom event object, TouchEvent touch event object, etc.

5. Advantages and Disadvantages:

1): Advantages

1. Provide corresponding support similar to jsbridge, making certain functions more convenient

2. It is essentially the front-end framework of mvvm, simplifying operations.

3. Provides a relatively mature component library, which is more convenient to build

4. Based on WeChat app, the development cost is reduced

5. Support Modularization

2): Disadvantages

1. Since the framework does not run in the browser, js-related BOM methods cannot be used. Such as document, window, etc. However, you can get the DOM object corresponding to the current event. Compared with react, it is still not recommended to operate dom, jq, zepto and other tool libraries.

2. It has its own syntax, which requires learning time, but the learning curve is not steep

3. Currently, direct introduction of node_modules is not supported. When developers need to use node_modules, it is recommended to copy the relevant code to the directory of the mini program. This will have greater limitations, and there are many things that need to be done manually.

The above is the detailed content of Introduction to WeChat Mini Program Development. For more information, please follow other related articles on the PHP Chinese website!