Summary of mini program development documents

Summary of small program development

Recently, the leader gave me a task to develop a small program project alone. Publish a small program project document. This was also my first time coming into contact with mini programs, so I summarized the leadership’s requirements for the topic and the problems I encountered during the development process as follows:

1. How to create a mini program project

The description of this step in the official document is very clear, and it is mainly divided into several steps:

1. Apply for an account and have a mini program account.
2. In the mini program management platform, you can see the AppID and AppSecret of the mini program.

Subscription accounts, service accounts, mini programs, APPs, and PC websites bound to a WeChat open platform account are all called "applications". Each application has its own AppID and AppSecret, AppID is called the application unique identifier, and AppSecret is called the application key.

The role and usage of AppID and AppSecret:
If you want to use WeChat related functions during the development process, you must have an officially certified account password
App in the mini program project The .js data needs to add the appid and secret attributes. When used together, the interface capabilities of the official account can be called.

3. The administrator needs to set the developer's WeChat ID as the developer account. You can develop small programs
4. Install development tools
5. Brief introduction to development tools
   WeChat small programs and official accounts have their own WeChat development tools, which integrate official account web debugging and small programs There are two development modes for program debugging.

• Using official account web debugging, developers can debug WeChat web authorization and WeChat JS-SDK details
• Using mini program debugging, developers can complete the API of the mini program and page development and debugging, code viewing and editing, mini program preview and publishing and other functions.
  

5. Added mermaid syntax to support Gantt chart ¹ function;

(Related learning recommendations: 小program development tutorial)

2. How to obtain WeChat account information and bind it to a third-party account (what goes through in the process of starting a mini program)

Functional mini programs generally need to obtain the user’s WeChat account information . Initially, the mini program could call wx.getUserInfo(Object object) pop-up window for WeChat authorization when entering for the first time. Later, the interface getUserInfo was adjusted. When this interface is called without the user's authorization, the authorization pop-up window will no longer appear and the user will be directly Enter the fail callback. If this interface is called when the user has been authorized, the user information can be successfully obtained.
Now the mini program needs to obtain authorization through the bindgetuserinfo attribute of the button component, combined with the open-type attribute, so that clicking the button returns the obtained user information:

<button></button>

Startup of the mini program:

. Before opening the mini program, the WeChat client will download the entire mini program code package locally.
. Then you can know all the page paths of the current mini program through the pages field of app.json. The first page written in the pages field is the home page of this mini program (the first page you see when you open the mini program) ).
. So the WeChat client loads the code of the home page, and through some mechanisms at the bottom of the mini program, the home page can be rendered.
. After the mini program is started, the onLaunch (triggered when the mini program starts) callback of the App instance defined in app.js will be executed

My mini program is executed in the onLaunch method of app.js What operations have been performed:
1. Execute wx.getSetting() when the project starts to obtain the user's current settings and determine whether the user has been authorized
2. If the user has been authorized, call wx.getUserInfo() to obtain the user information and avatar Nickname, etc., and then perform internal operations of your own mini program
3. If the user is not authorized, jump to the login page, and the user will click the button to pop up the authorization window to obtain user information

// app.js onShow: function () {
    var that = this
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              that.globalData.userInfo = res.userInfo              // 由于 getUserInfo 是网络请求，可能会在 Page.Summary of mini program development documents 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (that.userInfoReadyCallback) {
                that.userInfoReadyCallback(res)
              }
              // 执行项目内部操作
              that.onLogin()
            }
          })
        }else{
          // 没有授权，跳转授权登录页
          wx.redirectTo({
            url: '/pages/login/login',
          })
        }
      }
    })
  },

<!--login.wxml --><button>允许获取公开信息</button>

// login.jsonGetUserInfo: function (e) {
   app.globalData.userInfo = e.detail.userInfo  // 返回的用户信息}

If you need to bind the WeChat account information with your own project account, you can send the obtained WeChat account information as a parameter to the background, and the background will generate a corresponding project account.

3. Mini Program Configuration: Global&Page

全局配置

app.json是小程序的全局配置，包括小程序的所有页面路径、界面表现、底部 tab 等，一般包含几个字段：pages、window、tabBar

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
tabBar字段 —— 定义小程序底部tab栏的表现，以及 tab 切换时显示的对应页面。

{
  "pages": [
    "pages/index/index", 
    "pages/logs/index"
  ], // 所有页面路径
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }, // 界面表现
  "tabBar": {
    "backgroundColor": "#F7F7FA",
    "color": "#757575",
    "selectedColor": "#6D8FE8",  // 底部栏配置
    "list": [  // tab列表
      {
        "pagePath": "pages/message/index/index",  // tab对应页面路径
        "text": "消息", // tab文字显示
        "iconPath": "images/icon_message.png",  // tab默认显示图标
        "selectedIconPath": "images/icon_message_blue.png" // tab选中后的图标
      },
      {
        "pagePath": "pages/zone/index/index",
        "text": "空间",
        "iconPath": "images/icon_friend.png",
        "selectedIconPath": "images/icon_friend_blue.png"
      }
  }
 }

注： tab栏的图标icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片，同时tab列表配置最少2个，最多5个。

---

页面配置

一个小程序页面由四个文件组成：

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

每个小程序页面可以使用自己的.json文件来对本页面的窗口表现进行配置。
页面配置一般包括导航栏标题文字内容（navigationBarTitleText），是否开启下拉刷新（enablePullDownRefresh）等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

{
  "navigationBarTitleText": "个人中心",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"}

4. 小程序组件及页面介绍

小程序为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
组件是视图层的基本组成单元，一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内，例如：

<view>这是内容</view>

注意：所有组件与属性都是小写，以连字符-连接

小程序组件参考。

页面的生命周期：

1. 小程序注册完成后，加载页面，触发Summary of mini program development documents方法。

2. 页面载入后触发onShow方法，显示页面。

3. 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

4. 当小程序后台运行或跳转到其他页面时，触发onHide方法。

5. 当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。

6. 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

页面之间的通讯

小程序页面之间有时需要进行数据的传递，个人使用的页面间数据通讯有两种方式：

1. 页面A跳转到页面B时，在页面路由后携带参数，页面B在Summary of mini program development documents时获取options中的参数。
   页面A：

	wx.navigateTo({
      url: '../unrelate/unrelate?cname='+cname+'&cid='+cid,
    })

页面B：

Summary of mini program development documents: function (options) {
    if(options.cname){
      this.setData({
        cname: options.cname,
        cid: options.cid      })
    }
  }

2. 如果页面之间需要传递的参数为对象或者数组，那么通过路由拼接参数的形式就不可取了，此时可以通过app.js中的globalData全局变量进行赋值。
   页面A：

  onJumpToNextLevelPoint: function(e){
    let child = e.currentTarget.dataset.child    let name = e.currentTarget.dataset.name    if(util.isValidArray(child)){
      app.globalData.pointChild = child // 全局变量进行赋值
      wx.navigateTo({
        url: '../knowledge/knowledge?name=' + name,
      })
    }
  }

页面B：

  Summary of mini program development documents: function (options) {
    if (util.isValidArray(app.globalData.pointChild)) {
      this.setData({
        progressList: app.globalData.pointChild      })
    }
  }

5. 如何开发公共代码

开发公共组件，个人使用的是component构造器定义公共组件。
Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。
具体开发方式是：

1. 项目外层目录中创建components文件夹，创建组件文件夹然后新建Component，在这里写好公共组件的页面结构，样式，事件等。
   
   组件的js文件中包含组件属性，组件数据，组件方法等，与vue组件有相似之处。
   properties是组件的对外属性，比如引用组件的页面传递给公共组件的值就通过properties来接收。
   
2. 在需要使用公共组件的页面JSON文件中，添加usingComponents配置，使用公共组件，key值是组件要在页面中使用时的标签名，val是公共组件的路径。
   在页面的wxml文件中，使用json定义的公共组件标签，引用公共组件，并传递数据：
   
3. 公共组件中通过properties接收引用页面传递的值，然后使用{{}}在组件页面进行数据绑定即可。
   

6. 如何使用微信提供的API

为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。
调用微信扫一扫功能：

	wx.scanCode({        //扫描API
      success: function (res) {
        that.setData({
          IMECode: res.result        });
        // 接下来执行自己的业务逻辑
        that.ChkWXZIme(res.result)
      }
    })

调起本地相册选择图片或使用相机拍照功能（适用于更换头像）：

wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths
        that.setData({
          'userInfo.Avatar': tempFilePaths[0]
        })
      },
      fail() {
        that.setData({
          chooseImg: false
        })
      }
    })

发起网络请求：

	wx.request({
      url: ''
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        session: app.globalData.session      },
      success: function(res){}
    })

更多的 API 能力见 小程序的API。

7. 代码的审核与发布

提交审核

为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过审核的。

在开发者工具中上传了小程序代码之后，登录 小程序管理后台 - 开发管理 - 开发版本 找到提交上传的版本。

在开发版本的列表中，点击 提交审核 按照页面提示，填写相关的信息，即可以将小程序提交审核。

需要注意的是，请开发者严格测试了版本之后，再提交审核， 过多的审核不通过，可能会影响后续的时间。

发布

审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时登录 小程序管理后台 - 开发管理 - 审核版本中可以看到通过审核的版本。

请点击发布，即可发布小程序。

附：版本号书写规范

major.minor.patch
主版本号.次版本号.修补版本号

patch： 修复bug，兼容老版本
minor：新增功能，兼容老版本
major：新的架构调整，不兼容老版本

相关学习推荐：微信小程序教程

The above is the detailed content of Summary of mini program development documents. For more information, please follow other related articles on the PHP Chinese website!