多端前端H5 端
环境与接口配置
移动端的后端地址不在 .env 里,而在 src/config.js。改地址只看这一个文件。
config.js
const config = {
baseUrl: 'http://api.wujies.cn/tc/v1/prod/',
clientID: '428a8310cd442757ae699df5d894f051',
appEncrypt: false,
rsaPublicKey: '...',
rsaPrivateKey: '...',
}
export default config| 字段 | 作用 | 注意 |
|---|---|---|
baseUrl | 接口根地址 | 必须带协议;真机调试不能写 localhost |
clientID | 客户端标识 | 与后端客户端配置对应 |
appEncrypt | 接口加密开关 | 必须与后端同时开/关 |
rsaPublicKey | 请求加密公钥 | 更换时前后端一起换 |
rsaPrivateKey | 响应解密私钥 | 不要提交真实生产密钥到公开仓库 |
当前仓库里硬编码的是开发 / 演示地址。正式项目请改成按环境读取,至少区分
dev与prod,不要把生产地址写死在源码里。
请求封装
统一走 src/utils/wujies.js:
- 自动拼
baseUrl; - 自动带 token;
- 统一处理 401(跳登录)与错误提示;
- 需要加密时按
appEncrypt处理请求 / 响应。
页面里不要直接 uni.request,否则 token、错误码、加密逻辑会各写一套。
多端差异
| 能力 | H5 | App | 小程序 |
|---|---|---|---|
| 请求 | uni.request | 同左 | 同左,但需配置合法域名 |
| 存储 | localStorage | 原生存储 | 各端存储 |
| 支付 | H5 支付 | App 支付 | 小程序支付 |
| 登录 | 账号 / 短信 / 微信 | 同左 + 一键登录 | 微信授权登录 |
条件编译:
<!-- #ifdef H5 -->
<view>H5 专属内容</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>App 专属内容</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序专属内容</view>
<!-- #endif -->检查清单
-
baseUrl指向正确环境,且真机可访问 -
clientID与后端一致 -
appEncrypt与后端一致 - 生产密钥没有提交到公开仓库
- 小程序端已配置 request 合法域名