First experience in WeChat mini program development-Mini Program Development-php.cn

First experience in WeChat mini program development

高洛峰

Release： 2017-02-10 11:55:52

Original

2158 people have browsed it

I was hit with a mini program last week, and I was so scared that I quickly made a mini program version of Zhihu Daily over the weekend. To calm down my shock, I would like to summarize this development experience and the pitfalls I have encountered. The mini program was cracked on the second day after it came out. WeChat downloaded the development tools on the third day. Now you only need to download the WeChat developer tools to use them. When creating the project, select no appid, so there will be no The appid is verified.

My screen was flooded with Mini Programs last week. I was so scared that I quickly made a Mini Program version of Zhihu Daily over the weekend. I was so shocked that I wanted to summarize this development experience and the pitfalls I encountered.

Development environment preparation

The applet was cracked on the second day after it came out. On the third day, WeChat downloaded the development tools for development. Now you only need to download the WeChat developer The tool is ready to use.

First experience in WeChat mini program development

When creating a project, select No appid, so there will be no appid verification.

Directory structure

First experience in WeChat mini program development

##app.js registers app logic, app.wxss global style file app. json configuration information
pages storage page file
utils tool code
images image resources File

Each page in the mini program will have 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 web page .

Develop the first page

The code comes from the new project

<!--index.wxml--> <view>   <view>     <image></image>     <text>{{userInfo.nickName}}</text>   </view>   <view>     <text>{{motto}}</text>   </view> </view>

Copy after login

/**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; }

Copy after login

//index.js //获取应用实例 var app = getApp() Page({   data: {     motto: 'Hello World',     userInfo: {}   },   //事件处理函数   bindViewTap: function() {     wx.navigateTo({       url: '../logs/logs'     })   },   onLoad: function () {     console.log('onLoad')     var that = this     //调用应用实例的方法获取全局数据     app.getUserInfo(function(userInfo){       //更新数据       that.setData({         userInfo:userInfo       })     })   } })

Copy after login

In the new project, you will see these codes under the index. Next, respectively Introduction to wxml wxss js

wxml

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

Use tags The form specifies the component using
Use wx:for wx:if and other instructions to complete some logical processing on the template
Use bind* to bind events

wxss

Style files are basically the same as css syntax, but the selector syntax supported is limited Look here, you can use flexbox to complete the layout.

You can also use the import command internally to introduce external style files

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

Copy after login

Page logic control, follow the commonJs specification

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

Copy after login

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

Copy after login

The js here does not run in the browser environment, so codes such as window. It should be gradually improved.

Use the Page method to register a page on the page

Page({   data:{     // text:"这是一个页面"   },   onLoad:function(options){     // 页面初始化 options为页面跳转所带来的参数   },   onReady:function(){     // 页面渲染完成   },   onShow:function(){     // 页面显示   },   onHide:function(){     // 页面隐藏   },   onUnload:function(){     // 页面关闭   } })

Copy after login

When we need to change the bound data, we must call the setData method to modify it, and then the page update will be triggered, like this:

Page({     data: {         text: '这是一个页面'     },     onLoad: function() {         this.setData({             text: 'this is page'         })     } })

Copy after login

Conditional rendering and list rendering

The following content is from WeChat official documentation.

The applet uses wx:if="{{condition}}" to complete conditional rendering, similar to vue's v-if

<view> True </view>

Copy after login

It can also be added using wx:elif and wx:else An else block:

<view> 5}}"> 1 </view> <view> 2}}"> 2 </view> <view> 3 </view>

Copy after login

wx:for The control property is bound to an array, and the component can be repeatedly rendered using the data of each item in the array.

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

<view>   {{index}}: {{item.message}} </view>

Copy after login

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

Copy after login

Use wx:for-item to specify the variable name of the current element of the array

Use wx:for-index to specify the variable name of the current subscript of the array:

<view>  {{idx}}: {{itemName.message}}  </view>

Copy after login

Event binding

wxml Just use bind[eventName]="handler " Syntax binding event

<view><text>tap</text></view>

Copy after login

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

Copy after login

Pass parameters through data-* and e.target.dateset

<view><text>tap</text></view>

Copy after login

Page({     bindViewTap: function(e) {         // 会自动转成驼峰式命名         console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦     } })

Copy after login

The pitfalls I have encountered so far

In event binding e.target.dataset

When the event and parameters are bound to the parent component, when the child component is clicked, the event bubbles up to the parent component. At this time, e.target.dataset is empty.

  <view><text>tap</text></view>

Copy after login

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

Copy after login

Online image loading is unstable

In the Zhihu Daily project, there are a large number of images that need to be downloaded from the Internet. The display of the image component here appears extremely unstable, with some Many pictures cannot be displayed.

Finally

The WeChat applet is still in the internal testing stage, and there are many problems that need to be improved, but for development The speed and experience are pretty good, and I look forward to the day when it will be officially released.

For more articles related to the first experience of WeChat applet development, please pay attention to the PHP Chinese website!