Summary of wechat applets development

Wechat small program out also has a period of time, before also have done demo practice, after all, their own demo is relatively simple, now participate in the company’s project is all the way to step on the pit.

Understanding applets

Language and development tools

First, the applets class Web, but unlike HTML as I know it, it has its own development language and tools:

  • JavaScript: the JavaScript running environment of wechat applet is neither Browser nor Node.js. It runs in the context of wechat App and cannot operate DOM in Browser context, nor can it access the OPERATING system API through node.js related interfaces.
  • WXML: as the display layer of wechat applets, it does not use Html, but is self-invented based on XML syntax.
  • WXSS: Styles used to decorate the presentation layer. The official description is “WXSS (WeiXin Style Sheets) is a Style language used to describe component styles for WXML. WXSS is used to determine how WXML components should be displayed.”
  • Small program development tools, developers can complete small program API and page development debugging, code view and edit, small program preview and release and other functions.

Entrance to the file

The applets mainly contain the following three entry files:

  • App.js this file is the entry file of the whole small program, we mainly do network detection, user information acquisition, etc.; It is also possible to inject common methods into other pages when they are passedgetApp()Call (Note: the page does not need to pass to call the methods in app.jsrequireorimportThe introduction of)
  • App. json this file can be used for global configuration of the small program, determine the path of the page file, the overall window performance, set network timeout, set multiple tabs, etc.
  • App.wxss is a common style sheet for applets

Project development

This project is only responsible for the development of the home page, authorization and some public modules. Next, we will focus on these modules.

The life cycle

Of course, wechat applet also has a life cycle similar to other front-end frameworks:

Page({/** * the initial data of the Page */ data: {}, /** * life cycle function -- listen for Page load (like home Page data request can be placed here) */ onLoad:function(options) {}, /** * lifecycle functions -- listen to the page's first rendering complete */ onReady:function() {}, /** * lifecycle function -- listen page display */ onShow:function() {}, /** * lifecycle function -- listen page hide */ onHide:function() {}, /** * lifecycle functions -- listen for page unloads */ onUnload:function() {}, /** * page-related event handlers -- listen for user pulldownrefresh */ onPullDownRefresh:function() {}, /** ** onReachBottom:function() {}, /** * Users click on the upper right corner to share */ onShareAppMessage:function() {}})Copy the code

When the values we initialize in data need to be changed, we can use setData() in each lifecycle and method. Since the entrance page of the small program is the home page, the user login and network status detection are added in onLoad on the home page.

tabBar

TabBar is the navigation bar at the bottom of the small program. Due to the limitation of wechat, there are at least 2 navigation bars and at most 5 navigation bars. Only copywriting and ICONS can be set.

style

Applets are styled in the WXSS language (with most CSS features). He also offers a new unit, RPX, that can be adapted to the width of the screen. The official screen width is 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, then 750rPX = 375px = 750 physical pixels and 1rPX = 0.5px = 1 physical pixel. In this case, we also recommend our designers to adopt iPhone6 as the design standard. 750px wide.

However, in the actual development process, if the font size is also used as the unit of RPX, the text displayed on iPhone6 Puls is too large, which will affect the appearance. After the test, PX was adopted as the unit, that is, half of the size of the original design draft + PX, so as to ensure the consistency of the text size in all devices.

The network status

According to the official document, local resources cannot be obtained through CSS. Images can only be obtained through network resources or Base64. There is a need to judge the network status of the home page, due to the disconnection of the situation can not obtain network resources, the final use of Base64.

GetNetworkType is an asynchronous interface, and the next step is to use the result of getNetworkType as an asynchronous interface

new Promise((resolve, reject) => {
  let req = wx.getNetworkType({
    success: function (res) {
      var networkType = res.networkType;
      if (networkType === 'none') {
        resolve(false)}else {
        resolve(true)}},fail() {
      reject(false)}}); })Copy the code

debugging

The biggest problem with debugging, whether on developer tools or mobile phones, is to clean the cache before testing it. In particular, developer tools need to clean the cache every time they switch host, and then open it again, and try to test the bug several times, repeatedly confirm. Otherwise, you may find that a feature that was tested is not working properly, or a part that was not working properly is not working properly.

Developer tools

The developer tools debug interface is similar to Chorem’s developer tools, which are divided into 7 functional modules: Wxml, Console, Sources, Network, Appdata, Storage, Sensor, Trace.

Real machine commissioning

The following conditions must be met for mobile phone debugging in the development environment:

  • Must be opened using the developer account wechat
  • Mobile phone needs to be configured with proxy (Charles or Fiddler is commonly used for proxy)
  • In developer tools: setup – proxy – proxy setup – manually set proxy (local ip127.0.0.1, port 8888)
  • Mobile phone scan code (generate QR code by previewing the developer tool), click on the upper right corner — Debug Mobile phone can also have the same debugging experience as the developer tool, you can see Log, System, WeChat, WXML, etc., as well as page performance data. Generally speaking, it’s quite complete.