#港艺移动端构建历程
##移动端H5构建
这是一个基于uni-app开发的移动端电商网站,支持中文繁体和英文双语切换。
- 手机号登录
- 短信验证码
- 用户协议与隐私政策
- 商品列表展示
- 商品详情
- 商品分类浏览
- 商品搜索
- 商品购买
- 订单创建
- 订单支付
- 订单详情
- 订单状态跟踪
- 地址管理(增删改查)
- 我的订单
- 邀请好友
- 设置
- 实时汇率展示(港币兑人民币)
- 数据可视化图表
- 多语言支持(中文繁体/英文)
- 用户数据统计
- uni-app
- Vue 3
- vue-i18n (国际化)
- uni-ui
- echarts (数据可视化)
- CSS3
- Flex布局
- RESTful API
- uni.request
- uni Storage
- echarts-config (图表配置)
- uQRCode (二维码生成)
- HBuilderX
- npm
- 将uni-app编译平台从H5切换为微信小程序
- 调整为微信小程序的开发工具和环境
- 使用微信开发者工具进行调试和预览
- 替换手机号登录为微信授权登录
- 使用微信开放能力
<button open-type="getUserInfo"> - 对接微信登录API，获取用户openid和session_key
- 保留手机号验证作为补充认证方式
- 替换原支付系统为微信支付
- 接入微信支付API
- 实现微信支付回调处理
- 订单状态同步更新
- 调整图片资源到CDN
- 使用微信小程序的图片组件
- 优化图片加载和缓存策略
- 遵循微信小程序的页面结构要求
- 调整页面路由配置到app.json
- 适配微信小程序的生命周期
- 优化页面渲染性能
- 替换uni Storage为wx.setStorage系列API
- 合理利用小程序的缓存机制
- 控制存储数据大小在10MB以内
- 实现分包加载
- 预加载分包
- 优化首页关键数据加载
- 控制主包大小在2MB以内
- 合理分包，单个分包不超过2MB
- 压缩图片和静态资源
- 采用虚拟列表
- 避免不必要的setData
- 优化频繁更新的数据
- 添加转发分享功能
- 集成微信订阅消息
- 添加客服消息能力
- 集成小程序码功能
- 实现分享裂变
- 添加微信卡券功能
- 支持微信直播
- 集成微信广告组件
- 评估现有H5代码，确定可复用部分
- 规划小程序架构和功能模块
- 分批次进行功能迁移
- 进行充分测试
- 灰度发布
- 遵循微信小程序的设计规范
- 注意微信小程序的各种限制
- 做好版本兼容
- 保证数据安全
- 做好用户体验优化
- 注意小程序审核规范
- 第一阶段：基础框架搭建（1周）
- 第二阶段：核心功能迁移（2周）
- 第三阶段：性能优化（1周）
- 第四阶段：测试修复（1周）
- 第五阶段：发布上线（1周）
总计开发周期：预计6周
除了使用传统的小程序页面进行跳转，我们还可以尝试将 H5 页面整合到小程序中。具体操作流程如下：
① 在小程序中使用 webview 组件，将 H5 页面引入到小程序中。
② 在 H5 页面中设置 return_url 参数，将需要返回的页面地址写入参数中。
③ 在 H5 页面中引入 JS 脚本，并使用 window.parent.postMessage 方法将 return_url 参数传递到跳转页面中。
通过整合 H5 页面，我们可以实现更为灵活和自由的跳转方式，同时也可以充分发挥 H5 页面特性，获得更好的用户体验。
- 已有语言包文件：
utils/i18n.js - 支持语言：英文(en)和繁体中文(zh-Hant)
- 现存大量硬编码中文文本需要处理
- pages/index/
- index.wxml: 首页文案
- index.js: 图表配置、提示文案
- pages/mine/
- index.wxml: 个人中心文案
- index.js: 操作提示
- pages/login/
- index.wxml: 登录页面文案
- index.js: 表单验证提示
- packageGoods/pages/
- detail/index/: 商品详情
- pay/index/: 支付相关
- typeList/index/: 商品分类
- packageMine/pages/
- orderList/index/: 订单列表
- orderDetail/index/: 订单详情
- user/index/: 用户信息
- about/index/: 关于我们
- addressList/index/: 地址管理
- components/
- navigation-bar/: 导航栏组件
- ec-canvas/: 图表组件配置
- loading/: 加载提示
- empty/: 空状态提示
- 页面标题
- 按钮文字
- 提示信息
- 表单标签
- 状态描述
- 错误提示
- 占位文本
- 后端返回的数据展示
- 时间日期格式化
- 货币金额展示
- 状态枚举值显示
- 图片中的文字内容
- 第三方组件的文本配置
- 动态生成的提示信息
- 正则验证提示
-
完善语言包
- 添加简体中文(zh-Hans)支持
- 补充缺失的翻译项
- 统一翻译键名规范
-
工具函数完善
- 语言切换方法
- 格式化工具
- 监听器机制
- 语言配置
const LANGUAGES = {
'zh-Hant': '繁體中文',
'zh-Hans': '简体中文',
'en': 'English'
}
const DEFAULT_LANGUAGE = 'zh-Hant'- 语言包结构
{
'zh-Hant': {
'language': {
'current': '當前語言',
'traditional': '繁體中文',
'simplified': '简体中文',
'english': 'English'
}
// ... 其他翻译
},
'zh-Hans': {
'language': {
'current': '当前语言',
'traditional': '繁体中文',
'simplified': '简体中文',
'english': 'English'
}
// ... 其他翻译
},
'en': {
'language': {
'current': 'Current Language',
'traditional': 'Traditional Chinese',
'simplified': 'Simplified Chinese',
'english': 'English'
}
// ... 其他翻译
}
}-
功能实现流程
- 首页添加语言切换按钮，显示当前语言
- 点击按钮弹出底部选择框（wx.showActionSheet）
- 选择新语言后保存设置并刷新页面
- 所有页面监听语言变化事件
-
数据持久化
- 使用 wx.setStorageSync 存储语言选择
- 应用启动时读取存储的语言设置
- 默认使用繁体中文（zh-Hant）
-
页面刷新机制
- 语言切换时触发页面刷新
- 使用 getCurrentPages 获取当前页面栈
- 重新加载当前页面数据
-
注意事项
- 确保所有文本都有对应的三语言翻译
- 处理好异步加载的文本内容
- 考虑后端API的语言参数调整
- 保持用户其他状态（如登录状态）
- 优化语言切换的用户体验
-
更新 i18n.js
- 添加简体中文翻译
- 完善语言切换方法
- 添加语言变化事件监听
-
修改首页
- 添加语言切换按钮
- 实现底部弹窗选择
- 处理语言切换逻辑
-
更新页面组件
- 使用 t 函数替换静态文本
- 添加语言变化监听
- 处理动态内容的翻译
-
系统适配
- 调整 API 请求头部
- 更新错误提示信息
- 处理日期和货币格式
-
测试验证
- 检查所有页面的翻译完整性
- 验证语言切换功能
- 测试页面刷新机制
- 确认用户状态保持
- 语言切换功能
- 页面文案展示
- 动态内容多语言
- 格式化功能
- 不同机型适配
- 长文本展示
- 特殊字符处理
- 语言包加载
- 页面渲染性能
- 内存占用
- 保持键名结构统一
- 注意文本长度适配
- 保持翻译的准确性
- 考虑性能优化
- 做好版本控制
- 前期准备：2天
- 公共组件改造：2天
- 主包页面改造：3天
- 分包页面改造：4天
- 测试验证：2天
- 问题修复：2天
总计：15个工作日
- 自动化翻译工具集成
- 翻译管理平台
- 翻译键名检查工具
- 未翻译内容检测
- 性能优化方案
- 作用：在WXML中直接使用的语言转换函数
- 位置：utils/i18n.wxs
- 使用场景：模板中的文本国际化处理
-
语言包同步
- 将i18n.js中的translations对象同步到wxs
- 确保键值结构完全一致
- 保持三种语言版本同步更新
-
工具函数同步
- t函数：文本翻译
- format函数：日期格式化
- currency函数：货币格式化
- number函数：数字格式化
-
使用方式
<wxs src="../../utils/i18n.wxs" module="i18n" />
<view>{{i18n.t('key')}}</view>
-
WXS的语法限制
- 不支持ES6+语法
- 不支持外部依赖
- 需要使用commonJS模块规范
-
性能考虑
- 控制wxs文件大小
- 优化查找算法
- 避免复杂运算
-
维护策略
- 确保js和wxs文件同步更新
- 建立自动化同步机制
- 做好版本管理
-
语言包更新
- 更新i18n.js
- 同步到i18n.wxs
- 验证键值完整性
-
函数更新
- 改写现代js语法为es5
- 处理外部依赖
- 测试功能一致性
-
验证测试
- 检查翻译完整性
- 测试函数可用性
- 性能压力测试