uniapp接入

uniapp接入指南

开发环境配置

确保已安装HBuilderX最新版本，这是uniapp官方推荐的开发工具。下载地址可从DCloud官网获取。安装完成后，在HBuilderX中新建uniapp项目，选择模板类型（如默认模板、uni-ui模板等）。

配置必要的开发依赖，包括node.js环境、npm包管理器。检查项目根目录下的package.json文件，确保核心依赖如@dcloudio/uni-app版本符合要求。对于特定平台插件（如微信小程序），需通过HBuilderX的插件市场安装。

多平台适配

在manifest.json中配置各平台参数。微信小程序需填写AppID；H5端需配置路由模式和基础路径；App端需配置原生插件权限。平台特有代码可通过条件编译实现，示例：

// #ifdef MP-WEIXIN
wx.login()
// #endif

修改pages.json设置全局样式和页面路由。配置tabBar、navigationBar等平台差异化样式时，注意不同平台的像素单位差异。推荐使用rpx单位实现自适应布局。

API调用规范

使用uniapp统一API替代原生API，如网络请求使用uni.request()而非wx.request()。处理异步回调时建议配合Promise或async/await语法。典型请求示例：

uni.request({
  url: 'https://api.example.com',
  success: (res) => {
    console.log(res.data)
  }
})

对于需要原生能力的场景（如支付、定位），通过uni.requireNativePlugin()调用原生插件。跨端兼容问题可通过uni.getSystemInfo()获取运行环境信息做分支处理。

状态管理方案

简单场景使用全局变量：

// main.js
Vue.prototype.$globalData = { userToken: null }

复杂应用推荐使用Vuex，创建store/index.js：

export default new Vuex.Store({
  state: { count: 0 },
  mutations: { increment(state) { state.count++ } }
})

调试与发布

通过HBuilderX的运行菜单选择目标平台进行真机调试。微信小程序需开启开发者工具的安全模式。发布前在manifest.json中配置版本信息，使用HBuilderX的发行功能生成各平台包。App打包需要配置证书，iOS需提供Apple开发者账号。

性能优化建议

启用分包加载减少首包体积，在pages.json中配置：

"subPackages": [{
  "root": "subpackage",
  "pages": ["pageA"]
}]

静态资源使用CDN加速，图片格式优先考虑webp。对于长列表渲染，使用<scroll-view>配合v-for的:key标识。定期使用HBuilderX的运行->清除缓存保持开发环境清洁。