Summary of WeChat Mini Program Development Tutorial Manual Document

WeChat Mini Program Development Tutorial Document

What is WeChat Mini Program? How to develop WeChat mini program? What are the tutorials for WeChat mini program development? This tutorial will take you from the WeChat applet itself, combined with the official WeChat-WeChat applet development tool, to take you step by step to create a WeChat applet, and preview the actual effect of the applet on your mobile phone. The home page of this mini program will display the welcome message and the current user's WeChat avatar. Click on the avatar to view the startup log of the current mini program in the newly opened page. Download the source code

Related learning recommendations:小program development tutorial

Step 1. Obtain the AppID# of the WeChat applet

## Log in to https://mp.weixin.qq.com, and you can view the AppID of the WeChat applet in the website's "Settings" - "Developer Settings". Note that you cannot directly use the service account or The AppID of the subscription account.

Note: If we do not use the administrator WeChat ID bound during registration to experience the mini program on the mobile phone, then we also need to operate "Bind Developer". That is, in the "User Identity"-"Developer" module, bind the WeChat ID you need to experience the mini program. By default, this tutorial uses the administrator's WeChat ID to register an account and experience.

Step 2. Create the project

We need to use

Developer Tools to complete the creation and code editing of the mini program.

After the developer tools are installed, open and use WeChat to scan the QR code to log in. Select Create "Project", fill in the AppID obtained above, set a local project name (not a mini program name), such as "My First Project", and select a local folder as the directory where the code is stored , just click "New Project".

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

After the project is successfully created, we can click on the project to enter and see the complete developer tool interface. Click on the left navigation to view and edit our code in "Edit" and in "Debug" Test the code and simulate the effect of the mini program on the WeChat client. In "Project", you can send it to your mobile phone to preview the actual effect.

Step 3. Write code

Create a mini program instance

Click "Edit" in the left navigation of the WeChat mini program developer tool. We can see that this project has been Initialized and contains some simple code files. Among the code files of the WeChat applet, the three files app.js, app.json, and app.wxss are essential and are generally generated by default. Among them, the .js suffix is ​​a script file, the .json suffix is ​​a configuration file, and the .wxss suffix is ​​a style sheet file. The WeChat mini program will read these files and generate mini program instances.

Let’s briefly understand the functions of these three files to facilitate modification and develop your own WeChat applet from scratch.

app.js is the script code of the mini program. We can monitor and process the life cycle functions of the applet and declare global variables in this file. 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 APIs, please refer to the API document

//app.jsApp({
  onLaunch: function () {    //调用API从本地缓存中获取数据
    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{      //调用登录接口
      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 WeChat applet. In this file, we can configure which pages the mini program is composed of, configure the window background color of the 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 refer to Configuration details

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

app.wxss is the public style sheet for the entire WeChat applet. We can directly use the style rules declared in app.wxss on the class attribute 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 page

In this tutorial, our WeChat applet has two pages, the index page and the logs page, namely the welcome page and the display page of the WeChat applet startup log. They All in the pages directory. The [path page name] of each page in the WeChat mini program needs to be written in the pages of app.json, and the first page in pages is the home page of the mini program.

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

index.wxml 是页面的结构文件：

<!--index.wxml--><view>
  <view>
    <image></image>
    <text>{{userInfo.nickName}}</text>
  </view>
  <view>
    <text>{{motto}}</text>
  </view></view>

本例中使用了<view></view>、<image></image>、<text></text>来搭建页面结构，绑定数据和交互处理函数。

index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

//index.js//获取应用实例var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {    console.log('onLoad')    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.wxss 是页面的样式表：

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

微信小程序页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

index.json 是页面的配置文件：

微信小程序页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

logs 的页面结构

<!--logs.wxml--><view>
  <block>
    <text>{{index + 1}}. {{log}}</text>
  </block></view>

logs 页面使用 <block></block> 控制标签来组织代码，在 <block></block> 上使用 wx:for 绑定 logs 数据，并将 logs 数据循环展开节点。

//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))
      })
    })
  }
})

该微信小程序测试的运行结果如下：

Step 4. Mobile preview

Select "Project" in the menu bar on the left side of the WeChat applet developer tool, click "Preview", and scan the code You can experience it in the WeChat client.

Related learning recommendations: WeChat Mini Program Tutorial

The above is the detailed content of Summary of WeChat Mini Program Development Tutorial Manual Document. For more information, please follow other related articles on the PHP Chinese website!