Posts in current category

WeChat small program development tutorial manual documentation


May 17, 2021 19:00 WeChat Mini Program Development Document



Before you begin this tutorial, make sure you have a programming foundation that you can learn in advance through programming hands-on training.

This tutorial will take you step by step to create a WeChat mini-program and experience the actual effects of the weChat gadget on your phone. T he home page of this small program will display the welcome language and the current user's WeChat avatar, click on the avatar, you can view the start log of the current small program on the newly opened page. View the sample source code for the small program

If you need to develop WeChat mini-games, you can view: WeChat mini-game development manual documentation

1. Get the AppID for the WeChat applet

By https://mp.weixin.qq.com, you can view the AppID of the WeChat applet in the Settings-Developer Settings section of the website, noting that the appID of the service number or subscription number cannot be used directly.

WeChat small program development tutorial manual documentation

Note: If we're not using the administrator microscope that was bound at registration to experience the small program on our phone, then we also need to operate "binding developers." T hat is, in the "User Identity" - "Developer" module, the binding needs to experience the microscopy of the small program. This tutorial uses administrator micros signals to register your account and experience by default.

2. Create a project

We need developer tools to do small program creation and code editing.

Once the developer tool is installed, open and log in using WeChat Broom. Select Create Project, fill in the AppID obtained above, set the name of a local project (non-small program name), such as My First Project, and select a local folder as the directory of code storage, click New Project.

为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。

WeChat small program development tutorial manual documentation

项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。

3. 编写代码

创建小程序实例

点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中, .js 后缀的是脚本文件, .json 后缀的文件是配置文件, .wxss 后缀的是样式表文件。微信小程序会读取这些文件,并生成 小程序实例

下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档

//app.js
App({
  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 a global configuration of the entire small program. I n this file, we can configure which pages the program consists of, configure the window background color of the program, configure the navigation bar style, and configure the default title. N ote that the file cannot be commented on. More configurable items can be found in the configuration details

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

app.wxss is a public style sheet for the entire widget. 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, index pages and logs pages, the welcome page and the presentation page of the small program launch log, all of which are in the pages directory. The path and page name of each page in the WeChat gadget needs to be written in app.json's pages, and the first page in the page is the first page of the small program.

Each program page is made up of four different suffix files with the same name under the same path, such as index.js, index.wxml, index.wxss, index.json. .js suffix is the script file, .json suffix file is the profile, .wxss is the style sheet file, .wxml file is the page structure file.

index.wxml is the structure file of the page:

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

In this example, <view/> structure is <image/> used to bind data <text/> and interactive handling functions.

Index.js is a script file for a page in which we can listen in and process lifecycle functions of a page, get instances of small programs, declare and process data, respond to page interaction events, and so on.

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

index.json is the profile of the page:

The profile of the page is not necessary. W hen there is a profile for a page, the configuration item overrides the same configuration item in app.json's window on that page. If you do not have a specified page profile, the default configuration in app.json is used directly on that page.

The page structure of the logs

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

The logs page <block/> the code using the control tab, uses wx:for binding logs data on the <block/> and logs to expand the nodes.

//logs.js
var 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 results are as follows:

WeChat small program development tutorial manual documentation

4. Phone preview

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

WeChat small program development tutorial manual documentation