Let's explore WeChat mini program development together

This article explores the development of WeChat mini programs. It is of great practical value. Friends in need can refer to it.

WeChat mini program was quite popular some time ago, because there was no so-called internal testing code and no specific attention was paid to it. It's just a good time to take advantage of the opportunity of sharing in the group to take a closer look at the WeChat mini program. Understanding a new thing is nothing more than learning from what it is (essence), how to use it (specific usage), and why it is used (advantages and disadvantages). First, let’s analyze what the WeChat mini program is. It sounds relatively high-end. To be honest, it turns out that I I'm really confused. What kind of development mechanism is this, native? hybrid? Pure h5? After reading various tutorials on the Internet, they just talk about API and syntax. I feel that it is pure rogue to move the API here without first clarifying what the problem is.

1. What is WeChat Mini Program:

Getting back to the subject, 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 to 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 binding and rendering have syntax 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 is run in JavaScriptCore

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

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

The script logic of the page is run in JsCore, which has no window object environment, 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
 }
 })

app.json (not allowed in the file Annotated) Examples are as follows:

 {
 "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": "其他"
  }
  ]
 } 
 }

Specific pages generally include the following files (similar to global files, but only for This page):

• .js The page logic is no different from js

• .wxml The page structure corresponds to html, but it is applied Many custom tags

• .wxss page style sheet corresponds to the css file and has a higher priority than appapp.wxss. The css writing method is not fully supported

• .json Page configuration specifies the title and other elements of a specific page

In order to facilitate developers to reduce configuration items, it is 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): 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: it defines its own event system. Contains a series of common event types:

• touchstart The finger touch action starts

• touchmove The finger moves after touching

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

• touchend 手指触摸动作结束

• tap 手指触摸后马上离开

• longtap 手指触摸后，超过350ms再离开

绑定方式：事件绑定的写法同组件的属性，以 key+value 的形式:

以bind或catch开头，然后跟上事件的类型，如bindtap catchtouchstart，

value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡 。例如：

/**
*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):事件对象：包括BaseEvent 基础事件对象，CustomEvent 自定义事件对象，TouchEvent 触摸事件对象等。

五、优缺点：

1):优点

1、提供相应的类似jsbridge的支持，使得某些功能更为方便

2、本质是mvvm的前端框架，简化操作。

3、提供了比较成型的组件库，构建比较方便

4、基于微信appapp，使得开发成本下降

5、支持模块化

2):缺点 

1、由于框架并非运行在浏览器中，js相关bom的方法无法使用。如 document，window等。不过可以获取当前事件对应的dom对象。相比react还是一样不建议操作dom，jq，zepto等工具库也不好使了 

2、又是一套自己的语法，需要学习时间，不过学习曲线不陡峭

3、目前不支持直接引入 node_modules ,开发者需要使用到node_modules时候建议拷贝出相关的代码到小程序的目录中这样局限性就比较大了，需要自己手动的东西好多

The above is the detailed content of Let's explore WeChat mini program development together. For more information, please follow other related articles on the PHP Chinese website!