小程序开发流程

254 阅读4分钟

一 研发流程

1-1 小程序注册

小程序注册

1-2 微信公众平台配置

1-2-1 基本信息配置

小程序信息完善及开发前准备

1-2-2 成员管理

  • 管理员可添加小程序项目成员,并配置成员的权限,查看详细说明

  • 体验成员可使用体验版小程序,查看详细说明

1-2-3 开发管理

  • 服务器域名配置包括 request、socket、uploadFile、downloadFile域名配置, 了解域名配置

  • 业务域名配置:配置为业务域名后,可调用web-view组件在小程序中打开,查看详情

  • 扫普通链接二维码打开小程序,设置普通链接二维码跳转小程序的规则,配置完成后开发人员可进行调试并发布现网。 详情请点击查看 开发文档

  • 接口设置:如果小程序需要使用收货地址、地图、地理位置时开通对应接口权限并在开发者工具中进行接口配置:

    • 微信公众平台申请开通权限 image.png

    • 开发者工具,app.json增加接口使用配置,如需要选择地址、获取位置

      app.json

{
  ...
  "requiredPrivateInfos": [
    "chooseAddress",
    "getLocation"
  ],
  ...
}

1-2-4 其他常用功能接入

  • 微信支付

  • 订阅消息

1-2-5 关联配置:设置 - 关联设置

  • 微信开放平台帐号:绑定微信开放平台帐号后,该小程序可与帐号下的移动应用、网站应用、公众号及其他小程序之间通过unionID机制统一用户账号。了解详情

  • 关注公众号:用户扫码使用小程序时,即可展示当前公众号,用户可直接关注公众号。查看详情

  • 公众号关联小程序:公众号关联小程序后,将可在自定义菜单、模板消息、客服消息等功能中使用小程序。图文消息中可直接使用小程序卡片、链接、图片素材,无需关联小程序。

登录公众号后台 - 小程序 - 小程序管理 - 添加 - 关联小程序

image.png

1-3 项目创建及配置

1-3-1 新建、导入小程序

  • 导入已存在的小程序,或者新建小程序。新建小程序依次填写项目名称、项目目录、appID、语音、模板等等。

    image.png

  • 调整目录接口,为了项目代码结构的美观,以及源码与配置文件的隔离,可以调整源码目录结构

    • 手动新建源码根目录如:src,并将以下源码文件调整到src目录下

      image.png

    • project.config.json 中指定小程序根目录

      project.config.json

      {
        ...
        "miniprogramRoot": "src/",
        ...
      }
      
      

1-3-2 npm支持

  • 小程序尽量轻量化,从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。此文档要求开发者们对 npm 有一定的了解,因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm,请翻阅 官方 npm 文档 进行学习。
  • 由于调整了源码的位置,需自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式,如为调整源码位置,则使用默认配置即可,以下为自定义配置:

    project.config.json

    {
      ...
      "setting": {
        ...
        "packNpmRelationList": [
          {
            "packageJsonPath": "/package.json",
            "miniprogramNpmDistDir": "./src/"
          }
        ]
        ...
      }
      ...
    }
    

注:在小程序中使用 npm 包前,需先构建 npm

1-3-3 vant-ui 支持

1-3-4 登录拦截

1-3-5 eslint、stylelint、comitlit等配置

二、版本管理

2-1 环境管理

小程序运行环境分为开发版、体验版、正式版。根据不同的运行环境,我们可以配置不同的服务域名。如:

config.js

// envVersion 运行环境
const { miniProgram: { envVersion } } = wx.getAccountInfoSync()
 
 
const ENV_VERSION = {
  DEVELOP: 'develop', // 开发版
  TRIAL: 'trial', // 体验版
  RELEASE: 'release', // 线上版
}
 
 
// 诊后管理域名地址
const DOMAIN_MAP = {
  [ENV_VERSION.DEVELOP]: 'https://dev.com',
  [ENV_VERSION.TRIAL]: 'https://test.com',
  [ENV_VERSION.RELEASE]: 'https://prod.com',
}
 
 
// 获取当前服务域名
const getCurrentDomain = (MAP) => {
  if (envVersion in MAP) {
    return MAP[envVersion]
  }
  return MAP[ENV_VERSION.DEVELOP]
}
 
 
// 当前接口base_url
export const BASE_URL = `${getCurrentDomain(DOMAIN_MAP)}/api`

2-2 发布流程

不同于H5部署在具体的服务器,小程序产物只能通过开发者帐号来管理。一个开发者账号只能上传一份代码(产物)

  • 上传代码:选择更新类型,版本号,项目备注。上传之后的代码可以在微信公众平台 - 管理 - 版本管理中查看。

    image.png image.png

  • 选择体验版,供测试同事进行测试 image.png

  • 版本审核,选择开发版本提交审核 image.png

  • 灰度发布,可以选择按照微信号,发布比例等进行灰度发布。进行线上环境测试。

  • 全量发布,提升发布比例100%即可。 image.png

四、运营

4-1 埋点接入

4-2 实时日记录

五、参考

小程序接入指南