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

Editor to share with you the development of WeChat Mini Programs tutorial examples, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's learn about it!

1. Get WeChat Mini Programs's AppID (note that the AppID here is a special id for Mini Program. You can see it in the Mini Program that logs in to the official account of Wechat. Without AppID, some functions will be limited! )

If you log in, you can look up WeChat Mini Programs's AppID in the "Settings"-"developer Settings" of the website. Be careful not to use the service number or Subscription account's AppID directly.

Note: if we want to experience the Mini Program on the phone as a non-administrator WeChat account, then we also need to operate the "bind developer". That is, in the "user identity"-"developer" module, you need to experience the Mini Program's WeChat account on the binding. The default registration account and experience of this tutorial are using the administrator WeChat account.

two。 Create a project (the name of the project is usually in English, try not to use Chinese, it may report an error)

We need to use developer tools to complete Mini Program creation and code editing.

After the developer tool installation is complete, open and log in using Wechat scan code. Select create "Project", fill in the AppID obtained above, set the name of a local project (not Mini Program name), such as "my first Project", and select a local folder as the directory where the code is stored, and click "New Project".

In order to facilitate beginners to understand WeChat Mini Programs's basic code structure, during the creation process, if the selected local folder is an empty folder, the developer tool will prompt you whether you need to create a quick start project. Select "Yes" and the developer tool will help us generate a simple demo in the development directory.

After the project has been successfully created, we can click on the project, enter and see the complete developer tools interface, click the left navigation, in "Edit" you can view and edit our code, in "Debug" you can test the code and simulate the effect of Mini Program in Wechat client, and in the "Project" you can send it to your phone to preview the actual effect.

3. Write code (Mini Program has its own specific tag) to create an instance of Mini Program

Click "Edit" in the left navigation of the developer tool, and we can see that the project has been initialized and contains some simple code files. The most critical and essential are app.js, app.json and app.wxss. Where the .js suffix is the script file, the .json suffix is the configuration file, and the .wxss suffix is the style sheet file. WeChat Mini Programs reads these files and generates an instance of Mini Program.

Below we briefly understand the functions of these three files to facilitate modification and re-development of their own WeChat Mini Programs.

App.js is the script code for Mini Program. In this file, we can monitor and process Mini Program's life cycle functions and declare global variables. Call the rich API provided by the framework, such as synchronous storage and synchronous reading of local data in this example. To learn more about the available API, refer to the API documentation

/ / app.jsApp ({onLaunch: function () {/ / call API to get data from the local cache var logs = wx.getStorageSync ('logs') | | [] logs.unshift (Date.now ()) wx.setStorageSync (' logs', logs)}, getUserInfo:function (cb) {var that = this If (this.globalData.userInfo) {typeof cb = = "function" & & cb (this.globalData.userInfo)} else {/ / call login interface wx.login ({success: function () {wx.getUserInfo ({success: function (res) {that.globalData.userInfo = res.userInfo) Typeof cb = = "function" & & cb (that.globalData.userInfo)})});}, globalData: {userInfo:null}})

App.json is the global configuration for the entire Mini Program. In this file, we can configure which pages Mini Program consists of, configure the window background color of Mini Program, configure the navigation bar style, and configure the default title. Note that no comments can be added to this file. For more configurable items, please see configuration details.

{"pages": ["pages/index/index", "pages/logs/logs"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black"}}

App.wxss is the public stylesheet for the entire Mini Program. We can use the style rules declared in app.wxss directly on the class property of the page component.

/ * * app.wxss**/.container {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;} create a page

In this tutorial, we have two pages, the index page and the logs page, the Welcome page and the display page of the Mini Program startup log, both in the pages directory. The [path + page name] of each page in WeChat Mini Programs needs to be written in the pages of app.json, and the first page in pages is the home page of Mini Program.

Each Mini Program page is composed of four different suffix files with the same name under the same path, such as index.js, index.wxml, index.wxss and index.json. The files of the .js suffix are script files, the files of the .json suffix are configuration files, the files of the .wxss suffix are stylesheet files, and the files of the .wxml suffix are page structure files.

Index.wxml is the structure file of the page:

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

In this example, are used to build the page structure, bind data, and interact with processing functions.

Index.js is the script file of the page, in which we can monitor and process the page's life cycle functions, obtain Mini Program instances, declare and process data, respond to page interaction events, and so on.

/ / index.js// gets the 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// calls the method of the application instance to obtain global data app.getUserInfo (function (userInfo) {/ / update data that.setData ({userInfo:userInfo})}}))

Index.wxss is the stylesheet for 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 stylesheet for the page is unnecessary. When there is a page stylesheet, the style rules in the page's style sheet override the style rules in app.wxss. If you do not specify a style sheet for the page, you can also use the style rules specified in app.wxss directly in the structure file of the page.

Index.json is the configuration file for the page:

The configuration file for the page is not necessary. When there is a configuration file for the page, the configuration item overrides the same configuration item in the window of app.json on that page. If there is no specified page profile, the default configuration in app.json is used directly on that page.

Page structure of logs

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

The logs page organizes the code using control tags, binds logs data using wx:for on the, and expands the logs data loop to the node

/ / 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 results are as follows:

4. Mobile phone preview (join developers or operators can generate QR code directly scan code to enter! )

Select "Project" in the left menu bar of the developer's tool, click "Preview", and scan the code to experience it in the Wechat client.

The above is all the content of this article "developing WeChat Mini Programs tutorial examples". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.