微信小程序原始框架开发

本文原发表于「Eric 技术圈」，现迁移并修订至夏有木工作室官网。

如果你是微信小程序初学者，不要一上来就直接使用 Taro / uniapp 等第三方框架，避免将简单问题复杂化。除非你有非常强烈的跨平台的需求，以及能够克服引入这些框架带来的学习成本、性能损耗、排查问题难度变大、框架可持续性等问题。建议可以直接选择微信小程序原生框架进行开发，本质上小程序也是由 HTML + CSS + JavaScript 组成。

小程序基础

在微信小程序项目中，会包含以下不同类型的文件:

1. .json 后缀的 JSON 配置文件，主要有 app.json、project.config.json、page.json，分别表示当前小程序的全局配置、工具配置、页面配置。
2. .wxml 后缀的 WXML 模板文件，WXML 也是由标签、属性等等构成，和 HTML 非常相似，不一样的地方是：标签名字不一样，可以使用 wx:if 这样的属性以及 {{ }} 这样的表达式。
3. .wxss 后缀的 WXSS 样式文件，具有 CSS 大部分的特性，但也做了一些扩充和修改，例如：支持新的尺寸单位 rpx。
4. .js 后缀的 JS 脚本逻辑文件，用于处理数据、响应用户的点击、获取用户的位置、存储等等。

以上文件可以组成小程序中的 Page 和自定义 Component。同时注册小程序中的一个页面，会提供一些自带的生命周期回调函数、页面事件函数，例如：onLoad、onShow、onPullDownRefresh、onReachBottom 等。

小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了 WebView 进行渲染；逻辑层采用 JsCore 线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程，这两个线程的通信会经由微信客户端（下文中也会采用 Native 来代指微信客户端）做中转，逻辑层发送网络请求也经由 Native 转发，小程序的通信模型下图所示。

快速创建项目

打开微信开发者工具，选择基础模板进行初始化，这里选择TypeScript 基础模板。

这样你就可以创建一个基础的项目了：

如果你想要使用 JavaScript，那么在新建项目的时候选择 JS-基础模板。

引入npm工具

打开调试区域的【终端】面板，输出npm init，然后填写初始化信息，默认值直接回车，最后生成一个 package.json文件。

安装一个package进行验证，例如：npm install dayjs --save，而后会自动生成文件 package-lock.json。

如果需要在子目录中加入 npm 依赖，需要加入如下配置：

"setting": {
  "packNpmManually": true,
  "packNpmRelationList": [
    {
      "packageJsonPath": "./package.json",
      "miniprogramNpmDistDir": "./miniprogram/"
    }
}

点击 工具 --> 构建 npm --> 生成 miniprogram_npm 文件夹 。

默认创建的 typescript lib 版本太低了，需要进行升级：

npm install miniprogram-api-typings

引入 TDesign UI 组件

小程序已经支持使用 NPM 安装第三方包，详见 NPM 支持

npm i tdesign-miniprogram -S --production

修改 app.json

将 app.json 中的 "style": "v2" 移除。

修改 tsconfig.json

如果使用typescript开发，需要修改tsconfig.json指定paths

{
  "paths": {
      "tdesign-miniprogram/*":["./miniprogram/miniprogram_npm/tdesign-miniprogram/*"]
    }
}

使用组件

以按钮组件为例，只需要在 JSON 文件中引入按钮对应的自定义组件即可

{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }
}

接着就可以在 wxml 中直接使用组件

<t-button theme="primary">按钮</t-button>

如果页面没有样式，或者报tdesign的组件找不到的错误，这是因为tdesign的es6文件没有转换为es5文件导致的。需要在project.config.json 的 setting 中加入如下配置：

"setting": {
  "es6": true,
  "enhance": true
}

自定义TabBar

1、配置信息

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

示例：

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

2、添加 tabBar 代码文件

在代码根目录或者子目录（miniprogram）下添加入口文件，取决于你项目初始化选择的模板。

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3、编写 tabBar 代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

Page({
  ...
  onShow() {
    this.getTabBar().init();
  },
  ...
})

具体参考地址如下：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

展示效果：

自定义页面标题

在每个页面的 json 文件中配置 navigationBarTitleText，如下：

// pages/usercenter/index.json
{
  "navigationBarTitleText": "个人中心",
  "usingComponents": {}
}

小结

到了这里，就有小程序的基本框架了，根据项目的实际需求，在 pages 目录中新建 WML、WXSS、JSON、TypeScript 文件，逐步完善你的页面逻辑和页面 UI。

• 使用 TypeScript 进行逻辑处理、数据存储
• 使用 UI 组件减少页面绘制时间
• 使用 NPM 引入想要的 package 工具包