WeChat applet development tutorial

To develop any program, you must first find its official documentation. the mini program is still in the beta stage. At present, some development documents are officially released. after a day's viewing and trying, it seems that the document is not comprehensive, but it can be seen through these documents. Let's take a look at some official documents. To develop any program, you must first find its official documentation. the mini program is still in the beta stage. At present, some development documents are officially released. after a day's viewing and trying, it seems that the document is not comprehensive, but it can be seen through these documents. Let's take a look at some official documents.

The uniform entrance to the public platform developer documentation is: Workshop.

The current change is to add a "public platform. applet" portal at the top of this document. This eloquence is a document specially developed for applets, such:

Click "edit" in the left-side navigation bar of the developer tool. we can see that this project has been initialized and contains some simple code files. The key and necessity are app. js, app. json, and app. wxss. The. js suffix is a script file, the. json suffix is a configuration file, and the. wxss suffix is a style sheet file. The applet will read these files and generate the applet instance.

/**

Small program Video Tutorial: http://pan.baidu.com/s/1gfhuh7H

**/

Next we will briefly understand the functions of these three files to facilitate modification and develop our own mini programs from scratch.

1. app. js is the script code of the applet. In this file, we can listen to and process the lifecycle functions of the applet and declare global variables. Call the rich APIs provided by the framework, such as synchronous storage and synchronous reading of local data.

2. app. json is a global configuration for the entire applet. In this file, we can configure the page that the applet consists of, configure the background color of the applet window, configure the navigation bar style, and configure the default title. Note that you cannot add any comments to this file.

3. app. wxss is the public style table of the entire applet. We can directly use the style rules declared in app. wxss on the class attribute of the page component.

We noticed that there are two folders in the code of the instance program, one is pages and the other is utils, where utils is a folder for storing common tool methods, pages is the folder that stores all pages. We will focus on this pages.

Step 4: Create a applet page File

In this example, we have two pages: the index page and the logs page, that is, the welcome page and the display page of the applet startup log. they are all in the pages directory. The path + page name of each page in the applet must be written in pages in app. json, and the first page in pages is the homepage of the applet.

Each applet page is composed of four different suffix files with the same name in the same path, such as index. js, index. wxml, index. wxss, index. json .. The file with the js suffix is a script file, the file with the. json suffix is a configuration file, the file with the. wxss suffix is a style table file, and the file with the. wxml suffix is a page structure file.

Index. wxml is the structure file of the page:

 
   
      
       
   
    {{userInfo.nickName}}
     
    
      
   
    {{motto}}
     
  
 

In this example ,, To build a page structure and bind data and interactive processing functions.

Index. js is a page script file. in this file, we can listen to and process page Lifecycle Functions, obtain applet instances, declare and process data, and respond to page interaction events.

// Index. js // Obtain the application instance var app = getApp () Page ({data: {motto: 'Hello World', userInfo: {}}, // bindViewTap: function () {wx. navigateTo ({url :'.. /logs '})}, onLoad: function () {console. log ('onload') var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {// update the data that. setData ({userInfo: userInfo })})}})

Index. wxss is the style sheet of the page:

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

The style sheet of the page is unnecessary. When a page style sheet exists, the style rules in the style sheet will overwrite the style rules in app. wxss. If you do not specify a style sheet for a page, you can also directly use the style rules specified in app. wxss in the structure file of the page.

Index. json is the page configuration file:

The page configuration file is unnecessary. When there is a page configuration file, the configuration item will overwrite the same configuration item in the window of app. json on this page. If no page configuration file is specified, the default configuration in app. json is directly used on the page.

Logs page structure

 
   
      
   
    {{index + 1}}. {{log}}
     
  
 

Logs page usage Control tags to organize code. Use wx: for-items to bind logs data, and expand the node of the logs data loop.

//logs.jsvar util = require('../../utils/util.js')Page({  data: {    logs: []  },  onLoad: function () {    this.setData({      logs: (wx.getStorageSync('logs') || []).map(function (log) {        return util.formatTime(new Date(log))      })    })  }})

The running result is as follows:

For more articles about Introduction to small program development, please follow the PHP Chinese network!