Shulou(Shulou.com)06/02 Report--

This article mainly introduces "web WeChat Mini Programs development step pit example analysis". In the daily operation, I believe that many people have doubts in web WeChat Mini Programs development step pit example analysis problems. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "web WeChat Mini Programs development step pit example analysis". Next, please follow the editor to study!

Development environment preparation

Mini Program was cracked the next day, and Wechat downloaded the development tools on the third day. Now you only need to download Wechat developer tools to use them.

When creating a project, choose no appid so that there is no appid validation.

Directory structure

App.js registration app logic, app.wxss global style file app.json configuration information

Pages stores page files

Utils tool class code

Images Picture Resource File

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

Develop * pages

The code comes from the new 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 / / get application instance var app = getApp () Page ({data: {motto: 'Hello World', userInfo: {}}, / / event handler function bindViewTap: function () {wx.navigateTo ({url:'. / logs/logs'})} OnLoad: function () {console.log ('onLoad') var that = this / / call the method of the application instance to obtain global data app.getUserInfo (function (userInfo) {/ / update data that.setData ({userInfo:userInfo})

In the new project, you will see this code under index. Next, we will introduce wxml wxss js.

Wxml

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

Specify the component's use in the form of a label

Use instructions such as wx:for wx:if to complete some logical processing on the template

Use bind* to bind events

Wxss

Style file, and css syntax is basically the same, but the support for selector syntax is limited see here, you can use flexbox to complete the layout.

You can also introduce external style files internally using the import command

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

Js

Page logic control, following commonJs specification

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

The js here does not run in a browser environment, so codes such as window.* will report errors, and dom operations are not allowed. It seems that the authorities cannot support other js libraries to run completely closed, which should be gradually 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 by page initialization options for page jump}, 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 to modify it to trigger the page update, like this:

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

Conditional rendering and list rendering

The following is from the official document of Wechat.

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

True

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

1 2 3

The wx:for control property is bound to an array so that the component can be repeatedly rendered with the data of the items in the array.

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

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

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:

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

Event binding

Wxml simply binds events with bind [eventName] = "handler" syntax

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

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

TapPage ({bindViewTap: function (e) {/ / will be automatically converted to hump named console.log (e.taget.dataset.testMsg) / / la}})

The pit that has been stepped on so far

E.target.dataset in event binding

When events and parameters are bound in the parent component, and the child component bubbles to the parent component when clicked, e.target.dataset is empty

Tap Page ({bindViewTap: function (e) {console.log (e.taget.dataset.testMsg) / / undefined}}) this is the end of the study on "example Analysis of web WeChat Mini Programs Development pitfalls". I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.