For a better reading experience, please : My journey of getting started with wechat apps

It's been a while since the app came out , I noticed it when I came out . But when you get sick , Plus there are other things in the company , It's mainly because I'm lazy , I didn't do it all the time . This Monday , Take advantage of the heat , Not very busy , Finally, I wrote a little story demo,( Of course, there are many interfaces that are not used ).

Estimated reading time :5min



The framework of the applet , It's like Vue Of .


<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>


js part

// This is our App Service.
// This is our data.
var helloData = {
name: 'WeChat'
} // Register a Page.
data: helloData,
changeName: function(e) {
// sent data change to view
name: 'MINA'


The developer uses the framework to integrate the data in the logical layer name With the view layer of name bound , So as soon as the page opens, it will show Hello WeChat!

When the button is clicked , The view layer will send changeName To the logic layer , The logic layer finds the corresponding event handler
The logic layer implements setData The operation of , take name from WeChat Turn into MINA, Because the data is already bound to the view layer , The view layer will automatically change to Hello MINA!

Tools :  WeChat web Developer tools
I usually preview the effect here .


app.json File to configure wechat applets globally , Determine the path of the page file 、 Window representation 、 Set network timeout 、 More settings tab etc. .

change pages Internal configuration , Will change the main page when you start the program .
window Is to set the window representation of the page , Include status bar , Navigation bar color wait .
tarbar It's the bottom tab Column performance .
And officially networkTimeout and debug Options , There is no configuration here .
networkTimeout You can set the timeout of various network requests .

"pages": [
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#3CB371",
"navigationBarTitleText": "Ed Glayxe",
"navigationBarTextStyle": "light",
"backgroundColor": "#3CB371"
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": " my ",
"iconPath": "images/tabList/my_a.png",
"selectedIconPath": "images/tabList/my_b.png"
}, {
"pagePath": "pages/logs/logs",
"text": " journal ",
"iconPath": "images/tabList/log_a.png",
"selectedIconPath": "images/tabList/log_b.png"
}, {
"pagePath": "pages/other/other",
"text": " Duan Zi ",
"iconPath": "images/tabList/joke_a.png",
"selectedIconPath": "images/tabList/joke_b.png"
}, {
"pagePath": "pages/login/login",
"text": " Sign in ",
"iconPath": "images/tabList/Login_a.png",
"selectedIconPath": "images/tabList/Login_b.png"
}, {
"pagePath": "pages/douban/douban",
"text": " User list ",
"iconPath": "images/tabList/user_a.png",
"selectedIconPath": "images/tabList/user_b.png"



app.js、app.json、app.wxss These three documents are indispensable ..js The suffix is script file ,.json The suffix file is a configuration file ,.wxss The suffix is the style sheet file . Wechat applet will read these files , And generate an applet instance . These are public documents .
In my wxss It introduces weui Of wxss Some pages use its UI.

Pages Inside is the corresponding page . Every corresponding page has Corresponding js wxml wxss file . Configure the file .

stay common The folder Wrote a review template Tried to introduce a template .
stay utils It encapsulates the internal method .


Support... In small programs flex Layout , It's still pretty good .
Sometimes when I layout, I write a html file , Look at the styles in the browser . Then move it to wechat app . But the page I wrote wasn't complicated . It's not entirely different .
In the small program, try the layer as view , But it's not div equally ,view and text Together they overlap . I think it's equivalent to div and span.
Some more CSS Styles don't support .

Data rendering :

This one uses flex The layout says , The page is simple .

I remember looking for something for a long time yesterday , Namely
“enablePullDownRefresh”: true. Allow users to pull down .
At first I thought I wrote it myself . This is configured in json In the document . The official documents are hardly read .. And then it's embarrassing .

var util = require("../../utils/util.js");
var app = getApp(); Page({
data: {
textDataList: [],
tempid: 0,
lastid: 0
onLoad: function() {
util.alertLoading(' Data loading ', 2000);
refreshData: function() {
util.alertLoading(' Refreshing ', 2000);
this.loadData(); },
loadData: function() {
var that = this;
var url = '';
var requireData = { a: 'list', c: 'data', type: '29' };
util.request(url, requireData, function(res) {
var newData =;
textDataList: newData.list,
tempid: newData.list[0].id
console.log(; })
onReachBottom: function() {
util.alertLoading(" Loading !", 2000);
console.log(" Loading this didn't do = =!");
onPullDownRefresh: function() {
util.alertLoading(" Refreshing !", 1000);
var that = this;
var url = '';
var requireData = { a: 'list', c: 'data', type: '29' };
util.request(url, requireData, function(res) {
var newData =;
textDataList: newData.list,
lastid: newData.list[0].id
if ( === {
util.alertSuccess(" It's up to date ", 1000);


Follow up wechat app mind map ( Source network )

Quick off work , In fact, before writing, I want to write in more detail , But I don't think there's anything clearer than the official introduction .

I think the best way to learn is to roll up the code , Than watching 10 individual demo More useful .

Hasty time , The page is simple . I also hope to put your demo Share it with me and learn from each other . Thanks for reading ,


Project address :


More related articles about my wechat app entry journey

  1. The journey of wechat app development

    The beginning of the project : One . When building a new project  page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app ...

  2. Wechat small program development pit diary

    2017.12.29   Record on pit Don't use Chinese when quoting picture names , Try to name it in Chinese ,IDE There is no difference in the picture , Pictures may not be displayed on the phone . 2018.1.5   Record on pit Wechat applet setting element full screen , Horizontal direct w ...

  3. Wechat small program development step pit record

    Preface Wechat app since last year's public beta , Our company has also applied for an account development , Development began around the Spring Festival , Now it's finally over . I'd like to record the pit I stepped on . pit 1:scroll-view And onPullDownRefresh Conflict Because of ...

  4. mpvue Wechat small program project step pit record

    1.mpvue Introductory tutorial , # . Check first Node.js Is the installation successful $ node -v v8.9.0 $ npm - ...

  5. Wechat small program development and summary -

    Link to the original text : Some time ago, the company completed the development of small program project , So to write their own development process encountered problems and solutions , And used to improve efficiency ...

  6. Wechat applet development - Step on the pit

    Asynchronous request processing Detailed description : Wechat applet wx.request({}) Asynchronous processing on request , The following code wx.reuest({ url:"https://XXXA", method:" ...

  7. Wechat applet t A journey to fill the pit ( Access )

    One . Introduction to applets What is the applet ? First " Program " We are not unfamiliar with these two words . Look at the software on your phone , That's the procedure . Usually, the program runs directly on our native operating system . Applets run indirectly on native systems . because ...

  8. [ turn ] Wechat small program development step pit record

    In this paper, from : 1. Due to the small program wx.request() The method is asynchronous , stay app.js perform ajax after , Each page loads app. ...

  9. Wechat small program development step pit record

    1. Due to the small program wx.request() The method is asynchronous , stay app.js perform ajax after , Each page loads app.js Global data , Unable to load in order . example : //app.js App({ ajax:function() ...

Random recommendation

  1. How to hold the most water ? — leetcode 11. Container With Most Water

    scorching summer sun , Stay in the air-conditioned room and get to the point . Container With Most Water, It's a bit of a gimmick , In a nutshell , Give an array , Okay , Call height Well , Choose two of them i and j(i <= ...

  2. bzoj 2563: Ali and peach game

    I started to write something, but then the browser hung up and didn't save it !!!!!!!!!!!!!QAQ I don't want to write it again ... In short, simple greed . #include <iostream> #include < ...

  3. Do you really understand UIEvent、UITouch Do you ?

    One : Let's start with a look at UIEvent The definition of // Event type typedef NS_ENUM(NSInteger, UIEventType) { UIEventTypeTouches, UIEventTyp ...

  4. linux Environment java WEB Project operation environment ,jdk8+tomcat8+mysql5.7.11 Novice

    One : install jdk 1. download jdk   stay oracle Download things because oracle Some of the validation mechanisms for , So you need to add some parameters before the link wget --no-check-certificate --no-cook ...

  5. zt: How to quickly earn the first prize in life 100 ten thousand ?

    The deliverer itwriter Published on 2016-06-20 23:43 Comment on (16) Yes 1795 Human reading Link to the original text [ Collection ] « » I started using it not long ago 「 Reply 」, Set the answer price to 10 element . The longest flower 1 ...

  6. HDOJ 1061 Rightmost Digit( The cycle problem )

    Problem Description Given a positive integer N, you should output the most right digit of N^N. Input ...

  7. MarkdownPad

    MarkdownPad Markdown Editor , Only in windows Next use Download address : Crack : mailbox Certificate of Authorization GBP ...

  8. Use FFMPEG Do some video processing (C#) Video merge 、 transcoding 、 Acquisition duration

    FFMPEG You don't need to say much , Here are a few functions that are used , Just post the code There are more commands to search when you use them Video transcoding ) { var args = "-y -i {0} -vcodec copy {1}&quo ...

  9. maven Project publishing to tomcat Error of

    Could not publish to the server. java.lang.IndexOutOfBoundsException "Updating status for Tomca ...

  10. 33-Java Medium String,StringBuilder,StringBuffer Differences among the three

    Reprinted from : StringBuilder Detailed explanation (String Series of 2) Java Medium String,String ...