微信小程序开发｜青训营笔记

我是彭于晏
223 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的第13天

一 研发流程

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 实时日记录

五、参考官方文档

小程序接入指南

六、参考小程序的优点

  • 便捷性
  • 远好于公众号和H5页面的体验
  • 释放手机内存空间
  • 让手机桌面更加简洁

小程序的MVVM架构

Vue的MVVM和小程序MVVM对比 image.png MVVM好在哪里？

  • DOM Listeners: ViewModel层可以将DOM的监听绑定到Model层
  • Data Bindings: ViewModel层可以将数据的变量, 响应式的反应到View层 MVVM架构将我们从命令式编程转移到声明式编程

小程序的双线程模型

微信客户端是小程序的宿主环境，宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件提供了小程序的双线程模型

双线程模型： WXML模块和WXSS样式运行于渲染层，渲染层使用WebView线程渲染（一个程序有多个页面，会使用多个WebView的线程）。JS脚本运行于逻辑层，逻辑层使用JsCore运行JS脚本。这两个线程都会经由微信客户端（Native）进行中转 交互。

界面渲染过程

  • 在渲染层，宿主环境会把WXML转化成对应的JS对象；
  • 将JS对象再次转成真实DOM树，交由渲染层线程渲染；
  • 数据变化时，逻辑层提供最新的变化数据，JS对象发生变化比较进行diff算法对比；
  • 将最新变化的内容反映到真实的DOM树中，更新UI；

小程序的启动流程

下载小程序包 -> 启动小程序 -> 加载解析app.json -> 注册App()【执行App生命周期】 -> 加载自定义组件代码、注册自定义组件 -> 加载解析page.json、渲染层加载渲染page.wxml、逻辑层注册Page()【执行Page生命周期】

注意事项

加载规则

  1. 小程序启动时，默认会下载主包并启动主包内页面（所以tabBar放主包里面）
  2. 用户访问某个分包页面的时候，客户端会把对应包下载下来

大小限制

一个包不能超过2M，所有包加起来不能超过20M

独立分包

一种特殊的分包，可以不依赖主包独立运行

独立分包与其他分包之间相互隔绝，不能相互引用资源

使用场景：

有的功能不依赖主包即可运行，但是进入小程序时却需要默认下载主包——这时候就该独立分包了

使用方式：

需要在app.json对每个包的设置中加上independent字段并设置为true

预下载

在进入某个页面时，由框架自动预先下载好之后可能需要的分包，从而优化进入后续分包页面的速度

使用方式： 在app.json中使用preloadRule字段配置预下载

一个分包的预下载大小限额：2M，超出的部分会下载失败

avatar
文章
阅读
粉丝