【SDU青山】前端-移动端技术选型与问题-项目实训记录（2）

移动端技术选型与问题

• 遇到问题
• 原有技术方案对比
• uni-app
• • 为什么选择uni-app
  • 移动端功能需求
  • • 垃圾识别（核心基础功能）
    • 猜你想搜（进阶功能）
    • 游戏答题（上限很高）
    • 积分商城（暂与游戏绑定，可扩展）
    • 上门回收（扩展空间大）
    • 个人信息
  • 移动端界面需求
  • • 首页
    • 答题
    • 商城
    • 服务
    • 我的
  • 所需 uni-app主要组件
  • • view
  • 所需 uni-app API

遇到问题

在最初技术选型时没有考虑到微信小程序开发的一些困难（比如域名申请，游戏发布审核等问题）。
经过与组员探讨后，我们更加倾向于选择原生开发，即将移动端 app 发布为 android 应用/ ios 应用。

原有技术方案对比

方案	优势	劣势
微信小程序	无需下载，跨端，使用便捷	上线审核可能存在问题；对于内嵌的游戏功能可能支持不佳
android / ios原生	性能优	无法跨端；学习成本高

uni-app 为什么选择uni-app

就在几乎决定先进行 android 原生开发时，了解到了 uni-app 。在看过一遍文档教程，搭建了一个小 demo 之后，最终决定用其进行青山移动端的开发。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

一套前端代码，可以打包发布为各种形式，运行到多个平台，简直爽歪歪啊~
（是不是和某号称“一次编写，到处撒野”的J姓语言很像呢）

移动端功能需求 垃圾识别（核心基础功能）

包括

1. 拍照识别
2. 输入检索
3. 语音检索

猜你想搜（进阶功能）

根据用户识别习惯，进行智能的推荐。

游戏答题（上限很高）

利用隔空手势识别，将垃圾拖拽进入垃圾桶从而完成答题；答题可获得虚拟积分的奖励。

积分商城（暂与游戏绑定，可扩展）

利用答题所得积分可兑换游戏内物品。

上门回收（扩展空间大）

用户可以联系志愿者进行线下的垃圾分类与回收服务；志愿者可以发现用户的回收需求，进行上门回收。

个人信息

包括

1. 用户名与密码
2. 识别记录
3. 积分记录
4. 志愿者申请与注销

移动端界面需求 首页

1. 轮播图
2. 目录检索组件
3. 输入检索框
4. 拍照识别按钮
5. 语音识别按钮
6. 猜你想搜

答题

1. H5 小游戏

商城

1. 商品列表页
2. 商品详情页

服务

1. 志愿者申请按钮
2. 现有志愿者列表
3. 用户委托列表

我的

1. 个人信息
2. 识别记录
3. 积分记录
4. 关于我们

所需 uni-app主要组件 view

视图容器。

它类似于传统html中的div，用于包裹各种元素内容。

如果使用nvue，则需注意，包裹文字应该使用 组件。

所需 uni-app API