开发技术栈

JavaScript

前端使用 JavaScript 或 TypeScript 进行开发，定义页面数据（data），处理用户交互、网络请求等。

WXML 和 WXS

WXML (WeiXin Markup Language)

• 微信小程序的模板语言，类似 HTML
• 使用特殊标签

WXS (WeiXin Script)

• 微信小程序的脚本语言，运行在视图层
• 用于在 WXML 中进行简单计算，避免频繁通信

// 价格格式化
module.exports = {
  formatPrice: function(price) {
    return '¥' + (price/100).toFixed(2)
  }
}

为什么需要 WXML 文件？

React 运行在浏览器，可以直接操作 DOM。在小程序中是双线程架构，逻辑层与渲染层分离，渲染层和逻辑层并行处理，避免频繁 DOM 操作带来的性能问题。

Less CSS

.wxcc 就是小程序版的 CSS。.less 语法更简单，会被编译成 .wxss 文件。

.less 文件 → 编译 → .wxss 文件 → 小程序使用

Less 不是官方必需，但是业界常用的最佳实践：

• 官方支持：原生只支持 .wxss（类似 CSS）
• 开发者选择：Less/Sass 是开发者为了提升效率而采用的工具
• 工具链支持：微信开发者工具和主流构建工具都支持 Less 编译

为什么使用组件库，仍然需要编写 .less 文件？

组件库解决了 80% 的基础 UI 问题，剩下 20% 的定制化需求需要我们自己编写样式来实现。

组件库

推荐腾讯 TDesign 组件库。

TDesign 是腾讯开源的企业级设计体系和 UI 组件库。

微信开发者工具

关闭开发环境域名校验

可以点击右上角「详情 -> 本地设置 -> 不校验合法域名、web-view (业务域名) 、TLS 版本以及 HTTPS 证书」。

准备工作

注册小程序

在这里注册小程序。

微信小程序

小程序是一种新的开放能力，可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序开发者可在小程序内提供便捷、丰富的服务，如预订、商品购买、游戏、信息查询等。

个人用户注册无法使用微信支付，无法获取用户手机号，且数量限制为 5 个。企业最多可注册 50 个。

注册微信商户

微信商户号是微信支付体系中用于管理商家资金、交易和结算的账号。要使用微信支付功能，必须注册微信商户号。

小程序 AppID

小程序后台 -> 开发与服务 ->开发管理：

H5

H5 在能力上受限，例如支付会比较麻烦。

H5 适合用在宣传页面、活动页面，Marketing 相关的工作，但不适合用来处理真正的业务。

集成支付功能

微信小程序集成支付功能的主要要求：

资质要求

• 必须是企业主体（个人主体不支持）
• 需要有营业执照
• 部分类目需要额外资质（如食品需要食品经营许可证）

账号要求

• 完成小程序认证（300元/年）
• 开通微信支付商户号
• 商户号与小程序账号主体一致或有授权关系

技术要求

• 服务器需要 HTTPS 协议
• 后端实现支付接口（统一下单、支付回调等）
• 前端调用 wx.requestPayment API

审核要求

• 小程序需要通过类目审核
• 支付功能需要在代码审核时明确标注
• 确保支付流程符合微信规范

费率说明

• 一般行业费率：0.6%
• 特殊行业可能更高（如游戏、直播等）

建议先完成企业认证和商户号申请，这通常需要 3-5 个工作日。

阿里云集成

上传图片到 OSS 存储

微信后台，配置 OSS 域名白名单

为防止微信拦截上传请求，应在小程序后台配置 Bucket 域名为合法域名。

微信公众号后台：管理 -> 开发管理 -> 服务器域名。

除了 OSS 端点之外，签名接口的 API 域名也需要配置到 request 合法域名中：

必须使用 HTTPS！

后端，OSS 签名生成

/vx/generateSignature

前端，上传图片到 OSS

在阿里云文档的小程序示例代码中，使用的是 HTTP 直传，不是 SDK。

wx.uploadFile({
  url: 'https://examplebucket.oss-cn-hangzhou.aliyuncs.com',
  filePath: filePath,
  name: 'file',
  formData: formData,
  // ...
})

使用 wx.uploadFile API，直接向 OSS 的 HTTP 接口发送 POST 请求

• 使用表单形式（multipart/form-data）上传
• 通过 formData 携带签名等认证信

前端，将 URL 发送给后端

微信支付

微信登录

使用微信登录，必须提供 AppID 和 AppSecret，两者均可在微信公众号后台获取。

另外，微信登录分为两个部分：基础登录和用户信息获取。

基础登录（wx.login）

和 Apple 登录不同，微信基础登录每次都能获取：

• openid - 用户唯一标识（始终可获取）
• session_key - 会话密钥（始终可获取）
• unionid - 开放平台唯一标识（如果绑定了开放平台）

但是 PI 信息需要用户主动授权，否则无法获取：用户昵称、用户头像、性别等个人信息。

用户信息获取

最佳实践

// 后端数据库设计
CREATE TABLE users (
  id UUID PRIMARY KEY,
  wechat_openid VARCHAR(128) UNIQUE NOT NULL,  -- 始终可获取
  nickname VARCHAR(64),                         -- 用户自定义
  avatar VARCHAR(256),                          -- 用户自定义
  wechat_nickname VARCHAR(64),                  -- 微信昵称（可能为空）
  wechat_avatar VARCHAR(256),                   -- 微信头像（可能为空）
  phone VARCHAR(20),                            -- 手机号（需单独授权）
  created_at TIMESTAMP,
  updated_at TIMESTAMP
);

获取 AppID

小程序后台 -> 开发与服务 ->开发管理。

获取 AppSecret

微信公众号后台 -> 管理 -> 开发管理 -> 开发设置 -> AppSecret

后端服务

微信云开发

可以更方便的使用微信支付、认证功能，可免鉴权直接使用平台提供的 API 进行业务开发。

限制：

• 公众号必须完成认证，才能使用云开发。
• 每月 19.9 基础费用，无免费额度。