Résumé des documents de développement du mini-programme-Développement de mini-programmes-php.cn

Résumé du développement d'un petit programme

Récemment, le leader m'a confié la tâche de développer seul un petit projet de programme . Publier un petit document de projet de programme. C'est aussi mon premier contact avec les mini programmes, j'ai donc résumé les exigences de la direction pour le sujet et les problèmes que j'ai rencontrés au cours du processus de développement comme suit :

1 Comment créer un projet de mini programme<.>

La description de cette étape dans le document officiel est très claire, et elle est principalement divisée en plusieurs étapes :

Dans la plateforme de gestion du mini programme, vous pouvez voir l'
AppID et l'AppSecret du mini programme.

Les comptes d'abonnement, les comptes de service, les mini-programmes, les applications et les sites Web PC liés à un compte de plateforme ouverte WeChat sont appelés « applications ». Chaque application a son propre AppID et AppSecret, AppID est. appelé l'identifiant unique de l'application, et AppSecret est appelé la clé de l'application.

Le rôle et l'utilisation d'AppID et AppSecret :
Si vous souhaitez utiliser les fonctions liées à WeChat pendant le processus de développement, vous devez disposer d'un mot de passe de compte officiellement certifié
application dans le projet de mini programme Les attributs appid et secret doivent être ajoutés aux données .js Lorsqu'ils sont utilisés ensemble, les capacités d'interface du compte officiel peuvent être appelées

Installer des outils de développement
Brève introduction aux outils de développement
Les petits programmes WeChat et le développement de comptes officiels ont leurs propres outils de développement WeChat. , qui intègre le débogage Web du compte officiel et le petit Il existe deux modes de développement pour le débogage du programme.

En utilisant le débogage du mini-programme, les développeurs peuvent compléter l'API du mini-programme et développement et débogage de pages, visualisation et édition de code, aperçu et publication de mini-programmes et autres fonctions.

Ajout de la syntaxe de sirène pour prendre en charge la fonction
Gantt 1

(Recommandations d'apprentissage associées :

Tutoriel de développement de mini-programmes)

2. Comment obtenir les informations du compte WeChat et les lier à un compte tiers (ce qui se passe lors du démarrage d'un mini-programme)

Les mini-programmes fonctionnels doivent généralement obtenir les informations du compte WeChat de l'utilisateur. Initialement, le mini-programme pouvait appeler la fenêtre contextuelle wx.getUserInfo (objet objet) pour l'autorisation WeChat lors de la première entrée. Plus tard, l'interface getUserInfo a été ajustée lorsque cette interface est appelée sans l'autorisation de l'utilisateur. La fenêtre up n'apparaîtra plus et l'utilisateur sera directement saisi du rappel d'échec. Si cette interface est appelée lorsque l'utilisateur a été autorisé, les informations utilisateur peuvent être obtenues avec succès.

Maintenant, le mini programme doit obtenir l'autorisation via l'attribut bindgetuserinfo du composant bouton, combiné avec l'attribut open-type, afin que cliquer sur le bouton renvoie les informations utilisateur obtenues :

<button></button>

Copier après la connexion

Démarrez le mini programme :

. Avant d'ouvrir le mini programme, le client WeChat téléchargera l'intégralité du package de code du mini programme localement.

. Ensuite, vous pouvez connaître tous les chemins de page du mini programme actuel via le champ pages de app.json. La première page écrite dans le champ pages est la page d'accueil de ce mini programme (la première page que vous voyez lorsque vous le faites). ouvrez le mini programme) ).

. Ainsi, le client WeChat charge le code de la page d'accueil, et grâce à certains mécanismes au bas du mini programme, la page d'accueil peut être restituée.
. Une fois le mini-programme démarré, le rappel onLaunch (déclenché au démarrage du mini-programme) de l'instance d'application définie dans app.js sera exécuté

Mon mini-programme est exécuté dans la méthode onLaunch de app.js Quelles opérations ont été effectuées :

1. Exécutez wx.getSetting() lorsque le projet démarre pour obtenir les paramètres actuels de l'utilisateur et déterminez si l'utilisateur a été autorisé

2. Si l'utilisateur a été autorisé, appelez wx.getUserInfo() pour obtenir les informations sur l'utilisateur et le surnom de l'avatar, etc., puis effectuez des opérations internes de votre propre mini-programme
3. Si l'utilisateur n'est pas autorisé, accédez à la page de connexion et l'utilisateur le fera. cliquez sur le bouton pour autoriser la fenêtre contextuelle pour obtenir des informations sur l'utilisateur

Résumé des documents de développement du mini-programme

// 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.Résumé des documents de développement du mini-programme 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (that.userInfoReadyCallback) {
                that.userInfoReadyCallback(res)
              }
              // 执行项目内部操作
              that.onLogin()
            }
          })
        }else{
          // 没有授权，跳转授权登录页
          wx.redirectTo({
            url: '/pages/login/login',
          })
        }
      }
    })
  },

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Résumé des documents de développement du mini-programme

Si vous devez lier les informations du compte WeChat avec votre propre compte de projet, vous pouvez envoyez les informations du compte WeChat obtenues en tant que paramètre à l'arrière-plan, et l'arrière-plan générera un compte de projet correspondant.

3. Configuration du mini programme : 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"       }   } }
Copier après la connexion

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

页面配置

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

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

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

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

{   "navigationBarTitleText": "个人中心",   "enablePullDownRefresh": true,   "backgroundTextStyle": "dark"}
Copier après la connexion

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

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

<view>这是内容</view>
Copier après la connexion

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

小程序组件参考。

页面的生命周期：

小程序注册完成后，加载页面，触发Résumé des documents de développement du mini-programme方法。

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

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

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

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

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

页面之间的通讯

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

页面A跳转到页面B时，在页面路由后携带参数，页面B在Résumé des documents de développement du mini-programme时获取options中的参数。
页面A：

wx.navigateTo({       url: '../unrelate/unrelate?cname='+cname+'&cid='+cid,     })
Copier après la connexion

页面B：

Résumé des documents de développement du mini-programme: function (options) {     if(options.cname){       this.setData({         cname: options.cname,         cid: options.cid      })     }   }
Copier après la connexion

如果页面之间需要传递的参数为对象或者数组，那么通过路由拼接参数的形式就不可取了，此时可以通过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,       })     }   }
Copier après la connexion

页面B：

  Résumé des documents de développement du mini-programme: function (options) {     if (util.isValidArray(app.globalData.pointChild)) {       this.setData({         progressList: app.globalData.pointChild      })     }   }
Copier après la connexion

5. 如何开发公共代码

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

项目外层目录中创建components文件夹，创建组件文件夹然后新建Component，在这里写好公共组件的页面结构，样式，事件等。

组件的js文件中包含组件属性，组件数据，组件方法等，与vue组件有相似之处。
properties是组件的对外属性，比如引用组件的页面传递给公共组件的值就通过properties来接收。

在需要使用公共组件的页面JSON文件中，添加usingComponents配置，使用公共组件，key值是组件要在页面中使用时的标签名，val是公共组件的路径。
在页面的wxml文件中，使用json定义的公共组件标签，引用公共组件，并传递数据：

公共组件中通过properties接收引用页面传递的值，然后使用{{}}在组件页面进行数据绑定即可。

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

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

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

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

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         })       }     })
Copier après la connexion

发起网络请求：

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

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

7. 代码的审核与发布

提交审核

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

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

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

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

发布

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

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

附：版本号书写规范

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!