The WeChat applet development simply went well, because, after all, the background have experienced and blessing, because the other members of the project group didn’t contact before WeChat small program development, more or less understanding, but no real overhand experience, then let me temporarily the rookie to bits about the experience of the development and experience, I donate said, Let’s get down to business.
First of all, the development of wechat applets requires the use of an editor, namely wechat developer tools:
Here are some important directories:
This app.js file is a global JS file, which has the same function as index.js. It can put some global attributes in it.
Json file is interesting. It is used for global configuration, such as the header and bottom of the applet, but it is not the only place to configure. When you add a page, each page has a JSON file. Our tabbar is configured in app.json.
App.wxss is the global style file, and project.config.json is the configuration file for the applet.
The Pages directory is the home directory for this small program, where images and Libs can host files to your liking.
There is nothing more to say about these four documents.
Here is a brief introduction to the small program login and request interface to take data rendering logic:
First of all, before requesting our login interface, we need to obtain the code through wx.login(), request the background interface to send the code to the background through wx.request(), and the background gets the code to request the official interface of wechat to get the OpenID and session_key and return it to the front end. Used as the unique identifier to judge the device, then we can get the OpenID and log in with the account password (I don’t know if everyone can understand it, haha!! Mostly backstage).
It should be noted that, because wechat small program is single data binding, when we get the data in the input box, we need to setData() every time, otherwise we can’t assign values to the data in data{}, on the one hand, it feels a bit pulled, like the V-model used to vUE, it is a fatal blow.
To retrieve input values, use bindinput to retrieve input field data:
Data binding:
Wx :if and wx:for are vue v-if and V -for are vue judge and loop. Render data directly using {{XXXX}}.
Click events:
Bindtap vs. Catchtap (Catchtap can prevent bubbling)
In general, wechat applets are very well opened. Various toast,model and loading have been wrapped, which can be directly called when requesting interfaces. You can refer to the wechat developer documents. Click to view
As for the request interface, wechat has also encapsulated it, directly using wx.request() request is ok. Here it is explained that Loading can use callback (successful or failed callback) for both interface request and toast display, which is convenient to add a lot of operations.
Then there are some hook functions of wechat applets:
And some special events, such as pull up, pull down operations trigger functions:
It is important to include this line of code in json, otherwise the pull-up will not trigger:
With these hooks and special events you can play by yourself.
Step up, wechat small program WXML can not directly use the function, how to do this, this is unbearable, rendering data and format data in many places have to use function screening, don’t worry, soeasy! , wechat small program has its own WXS, can be introduced, to operate on the data, but WXS and JS are still a little different, such as ES6 a lot of can not use, WXS and JS basic hair, but can not fully use JS things, it is not let us crazy!
That’s it… There’s a lot to learn.