UniApp开发完整项目总结与实战指南

Question

前期概述：本文基于长时间的小程序开发经验，提供一个完整的 UniApp 项目总结，旨在帮助学习和开发中的小伙伴。文章侧重于功能实现和流程，而非原理。

UniApp 是一款强大的跨平台应用框架，支持开发小程序、H5、PC 端和 App 等。

一、创建项目及初始化步骤

（1）创建项目

在 UniApp 中创建项目，可以通过官方工具或 IDE 进行。

（2）启动小程序

启动小程序前，建议在 UniApp 中配置小程序的 AppID，以避免启动失败。

步骤：

在微信公众平台查看小程序 AppID：进入开发管理 → 开发设置 → 获取 AppID。
在 UniApp 项目中的 manifest.json 文件里，找到微信小程序配置项，填写获取的 AppID。

（3）目录结构

UniApp 项目的典型目录结构如下：

pages：页面目录，每个页面作为一个文件。
static：静态资源目录，存放图片、音视频等。
unpackage：打包文件目录。
App.vue：主文件，可定义全局方法、样式和变量。
main.js：入口文件，用于引入插件。
pages.json：页面路由配置文件。
package.json：npm 相关配置文件。
uni.scss：常用于定义全局样式变量或第三方 UI 库样式。

在 pages.json 中配置新页面时，需要手动添加页面路径和样式。常用样式配置项包括导航栏标题、背景色等，具体可参考官方文档。

App.vue 中常用部分：

onLaunch：仅在应用启动时执行一次，常用于获取微信公众号 code 等初始化操作。调用方法时使用 getApp().方法名()。
globalData：定义公共变量，如图片路径、设备类型（iOS 或安卓）。使用前需在 JS 中引入 App.vue。
style：定义全局公共样式，如居中布局、通用类目样式。

（4）推荐 UI 库

UniApp 生态推荐使用 uView 2.0 框架。
功能实现困难时，可参考 UniApp 插件市场。
原生小程序扩展可使用 Vant Weapp 组件库。

（5）页面生命周期

页面生命周期包括 onLoad、onShow、onReady 等。onLoad 用于接收参数，例如从 A 页面跳转到 B 页面时传递参数：

A 页面跳转代码：

toB() {
  uni.navigateTo({
    url: '/pages/index/b?name=奥特曼'
  })
}

B 页面接收参数：
```
onLoad(e) {
  console.log(e.name);
}
```

（6）组件生命周期

组件支持 Vue 标准生命周期，如 beforeCreate、created、mounted 等。注意：组件没有页面级的 onLoad 生命周期，如需发送请求可在子组件的生命周期中执行。使用 $nextTick 确保子组件完全挂载。

（7）底部导航

在 pages.json 中配置 tabBar，设置颜色、背景色和导航项列表。例如：

"tabBar": {
  "color": "#8a8a8a",
  "selectedColor": "#B88DFF",
  "borderStyle": "white",
  "backgroundColor": "#ffffff",
  "list": [
    {
      "pagePath": "pages/index",
      "text": "主页",
      "iconPath": "static/home.png",
      "selectedIconPath": "static/homeCurrent.png"
    }
  ]
}

自定义底部导航可参考 UI 库，并注意解决切换闪动问题。

（8）页面跳转

页面跳转使用 uni.navigateTo 等方法。页面栈 getCurrentPages() 可用于获取当前页面之前的页面参数或修改数据。例如：

const pages = getCurrentPages();
console.log(pages);

获取上一页面值：pages[pages.length - 2]。H5 端和小程序端参数处理略有不同，修改页面数据时需注意。

使用场景：如购买商品时的地址切换，点击后更新上一页面地址。

（9）项目功能场景

1. 登录授权

一般流程：

调用 uni.login() 获取 code。
通过 code 调用后端接口获取 sessionKey 和 openId。
授权用户信息获取参数。
调用登录接口存储 token。

存储 token 使用 uni.setStorageSync('token', res.userinfo.token)，取用 uni.getStorageSync('token')，移除 uni.removeStorageSync('token')，清除所有缓存 uni.clearStorageSync()。

2. 获取经纬度

使用 uni.getLocation：

uni.getLocation({
  type: 'wgs84',
  success: function(res) {
    console.log('经度：' + res.longitude + '，纬度：' + res.latitude);
  }
});

如果后台需根据经纬度算距离，可将 type 改为 gcj02。

3. 地图选择位置

使用 wx.chooseLocation 选择位置并获取数据。

4. 地图组件

使用 map 组件显示地图，设置中心点、标记点和路线。常用属性包括 longitude、latitude、scale、markers、polyline 等。使用场景如定位当前坐标或物流路线展示。

5. 上传图片

使用 uni.chooseImage 选择图片：

uni.chooseImage({
  count: 6,
  sizeType: ['original', 'compressed'],
  sourceType: ['album'],
  success: function(res) {
    console.log(JSON.stringify(res.tempFilePaths));
  }
});

选择后获取本地路径，再上传到服务器获取网络链接。

6. 图片预览

使用 uni.previewImage 预览网络图片链接列表：

uni.previewImage({
  current: index,
  urls: photoList
});

7. 支付

使用 uni.requestPayment 调用微信支付：

uni.requestPayment({
  provider: 'wxpay',
  timeStamp: res.payDetail.timeStamp,
  nonceStr: res.payDetail.nonceStr,
  package: res.payDetail.package,
  signType: res.payDetail.signType,
  paySign: res.payDetail.paySign,
  success: function(res) {
    console.log('支付成功');
  }
});

8. 分页

使用 onReachBottom 事件实现触底加载：

onReachBottom() {
  if(this.page >= this.lastPage) return;
  this.page = this.page + 1;
  this.loadData();
}

如果使用 scroll-view，请参考官方文档方法。

9. 弹窗

使用 uni.showToast 显示提示：

uni.showToast({
  title: '提示内容',
  icon: 'success',
  duration: 1500
});

隐藏弹窗使用 uni.hideToast()。显示 loading 提示框使用 uni.showLoading()，需主动调用 uni.hideLoading() 关闭。

10. 分享

默认情况下分享未启用，需在页面中添加 onShareAppMessage 和 onShareTimeline 方法。可自定义分享标题、路径和图标等参数。

（10）复用组件与优化

封装文件上传方法。
适配 iPad 端平板端。
实现 App 人脸识别组件。
解决自定义 tabbar 闪动问题。
使用腾讯云 OCR 进行身份证识别。
处理 iOS 上拉下拉白边。
解决滑动穿透问题。
实施分包优化。
实现实时语音识别和通过经纬度获取省市区。

总结：以上是 UniApp 开发的基础方法和 API 使用，如需更多功能请查阅官方文档。遇到问题可搜索相关文章、参考插件市场或加入官方社区交流。