WeChat applet development experience

The screen was refreshed by a small program last week. I was shocked by the pressure on the daily report of Zhihu, a small program version, and summarized the development experience and pitfalls. The second day after the applet came out, it was cracked, and the development tool was downloaded on the third day. now, you only need to download the developer tool to use it. when creating a project, you need to select no appid, in this way, there will be no appid verification. The screen was refreshed by a small program last week. I was shocked by the pressure on the daily report of Zhihu, a small program version, and summarized the development experience and pitfalls. The second day after the applet came out, it was cracked, and the development tool was downloaded on the third day. now, you only need to download the developer tool to use it. when creating a project, you need to select no appid, in this way, there will be no appid verification.

The screen was refreshed by a small program last week. I was shocked by the pressure on the daily report of Zhihu, a small program version, and summarized the development experience and pitfalls.

Development Environment preparation

The program was cracked the next day when it came out, and the development tool was downloaded on the third day. now, you only need to download the developer tool to use it,

• App. js registers app logic, and app. wxss global style file app. json configuration information

• Pages stores page files

• Utils tool code

• Images image resource file

Every page in the applet has three files. wxml. wxss. js, corresponding to the structure, style, and logic, which is equivalent to the relationship between html css and js in the webpage.

Develop the first page

Code from creating a project

  
    
       
        
   
    {{userInfo.nickName}}
      
     
       
   
    {{motto}}
      
   
 

/**index.wxss**/ .userinfo {   display: flex;   flex-direction: column;   align-items: center; }  .userinfo-avatar {   width: 128rpx;   height: 128rpx;   margin: 20rpx;   border-radius: 50%; }  .userinfo-nickname {   color: #aaa; }  .usermotto {   margin-top: 200px; }

// Index. js // Obtain the application instance var app = getApp () Page ({data: {motto: 'Hello World', userInfo: {}}, // bindViewTap: function () {wx. navigateTo ({url :'.. /logs '})}, onLoad: function () {console. log ('onload') var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {// update the data that. setData ({userInfo: userInfo })})}})

The code is displayed under index in the newly created Project. next we will introduce wxml wxss js

Wxml

This is the description file of the page structure, mainly used for the following content

• Use tags to specify component usage

• Use wx: for wx: if and other commands to complete logical processing on some templates

• Bind events

Wxss

The style file is basically the same as the css syntax, but the supported selector syntax is limited. here, you can use flexbox to complete the layout.

You can also use the import command to import an external style file.

@import "common.wxss";  .pd {     padding-left: 5px; }

Js

Page logic control, compliant with commonJs specifications

// util.js function formatTime(date) {   // .... }  function formatDate(date, split) {   // ... } module.exports = {   formatTime: formatTime,   formatDate: formatDate }

var utils = require('../../utils/util.js')

Js is not running in the browser environment, so window. * errors will be reported for this type of code, and dom operations are not allowed. Currently, the official website does not seem to support running of other js libraries and is completely closed. This should be improved in the future.

Use the Page method on the Page to register a Page

Page ({data: {// text: "This is a Page"}, onLoad: function (options) {// parameters brought about by Page initialization options for Page navigation}, onReady: function () {// page rendering completed}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closed }})

When we need to change the bound data, we must call the setData method for modification to trigger the page update, as shown in the following code:

Page ({data: {text: 'This is a page'}, onLoad: function () {this. setData ({text: 'This is page '})}})

Conditional rendering and list rendering

The following content is from the official documentation.

The applet uses wx: if = "{condition}" to complete Conditional rendering, similar to the v-if

 
   True 
 

You can also use wx: elif and wx: else to add an else block:

 
   1 
  
 
   2 
  
 
   3 
 

Wx: the for control property is bound to an array, and the component can be repeatedly rendered using the data in the array.

Built-in variable index (subscript of array traversal), item (each item of array traversal)

 
     {{index}}: {{item.message}} 
 

Page({   items: [{     message: 'foo',   },{     message: 'bar'   }] })

You can use wx: for-item to specify the variable name of the current element of the array.

You can use wx: for-index to specify the name of the variable under the current array:

 
    {{idx}}: {{itemName.message}}  
 

Event binding

Wxml only binds events using the bind [eventName] = "handler" syntax

 
  
   tap
  
 

Page({     bindViewTap: function(e) {         console.log(e.taget)     } })

Pass parameters through data-* and e.tar get. dateset

 
  
   
Tap
  
 

Page ({bindViewTap: function (e) {// it is automatically converted to console. log (e. taget. dataset. testMsg) // }})

Current pitfalls

E.tar get. dataset in event binding

When you bind events and parameters to the parent component and click it, the child component bubbles the event to the parent component. at this time, e.tar get. dataset is empty.

   
  
   
    
Tap
   
    
 

Page({     bindViewTap: function(e) {         console.log(e.taget.dataset.testMsg) // undefined     } })

Online image loading is unstable

In Zhihu Daily, a large number of images need to be downloaded from the internet. The image Component Display is extremely unstable, and many images cannot be displayed.

Last

The small program is still in the beta phase, and many problems need to be improved. However, it is still good for the development speed and experience. We look forward to the official release of the program on that day.

For more articles on the first-time experience of small program development, please follow the PHP Chinese network!