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

This article mainly introduces "how to develop based on the back-end cloud WeChat Mini Programs". In the daily operation, I believe many people have doubts about how to develop based on the back-end cloud WeChat Mini Programs. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about how to develop based on the back-end cloud WeChat Mini Programs! Next, please follow the editor to study!

Description:

Mini Program tags are collectively referred to as components and Html tags are collectively referred to as elements.

Some of the contents will be compared with vuejs and jQuery

Use the iconfont font icon

Create a new project and add an icon

Define generic icon styles, define pseudo elements

.icon {

Display: inline-block

Font-family:\ 'iconfont\'

}

. icon-home::before {

Content:\\ e600

}

Mini Program event binding and processor

Mini Program does not have a v-model like vuejs for two-way binding. Use bindinput similar to jQuery listening for input events to update data in the event handler. The value of input can be obtained through the event object e.data.value.

BindSearchInput (e) {

This.setData ({searchTxt: e.detail.value

})

}

The event handler in Mini Program cannot pass in parameters like vue, because the event handler has only one default parameter event object, and if you want to get the id bound to the element in the component of the for loop, you can bind the data property in the same way as jQuery.

Get id:

/ / event handling function

NavigateToDetail: function (e) {

Const id = e.currentTarget.dataset.id

}

Prevent the event from bubbling

Bindtap 、 bindlongtap 、 bindtouchstart 、 bindtouchmove 、 bindtouchend 、 bindtouchcancle

SetData

The view update of Mini Program needs to call setData to modify the bound data, and modifying the data directly will not trigger the view layer update. SetData accepts an object as an attribute that needs to be added or modified. The attribute name is a bit special, and the value in [] is recognized as a variable, so if you want to modify an attribute in the object array, you can only pre-concatenate the property name. Wrong practice:

/ / View is not updated

This.data.searchSongs [index] .love _ flag\': 2

/ / SyntaxError: unknown: Unexpected token

This.setData ({

\ 'searchSongs [\' + index +\'] .love_flag\': 2

})

The right thing to do:

SetSongFlag (e) {

/ / Note that the non-integer value in the setData attribute name [] is recognized as a variable.

Let key =\ 'searchSongs [\' + index +\'] .love_flag\'

This.setData ({

[key]: 2

})

About image components

Background-image and image components of Mini Program wxss do not support local url in H5 development, we usually use img tags for some images on the page that do not need to choose the display mode according to the container size, and need some special display methods to use background. But Mini Program only needs the image component. It provides mode attributes and background definition pictures and img elements to control the way pictures are displayed.

Other top, bottom, right, left and other attributes that do not scale the image to adjust position have the same effect as background-position, while img elements can only be controlled through positioning.

Mini Program API Asynchronous Scheme

If there is no obsessive-compulsive disorder, Mini Program API can use the default callback method. In addition, since Mini Program only supports es6, not async and await, you can also encapsulate API as promise.

Function promisify (fn) {

Return function (obj = {}) {

Return new Promise ((resolve, reject) = > {

Obj.success = function (res) {

Resolve (res)

}

Obj.fail = function (res) {

Reject (res)

}

Fn (obj) / / executes the function, and obj is the argument to the passed function

})

}

}

Module.exports = {

Promisify: promisify

}

Use:

Const promisify = require (\'. / promisify.js\')

Const request = promisify (wx.request)

Request ({

Url:\ 'some URL\'

Method:\ 'GET\'

}) .then (res = > {

Console.log (res)

}

Mini Program issue

The debugger does not have the css shortcut prompt function and color panel, which affects the layout and color adjustment efficiency.

Unable to introduce third-party js libraries

The built-in components are monotonous and do not take into account the adaptability when the number of fonts is relatively large.

Jump to external links is not supported

Background pictures or image components cannot use local pictures

At this point, the study of "how to develop based on the back-end cloud WeChat Mini Programs" is over. 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.