阶段四-移动端项目实战-垃圾分类app-个人学习字典

外包小前端
251 阅读3分钟

一、框架

ui框架：Mui===>dev.dcloud.net.cn/mui/

调取设备：html5plus ===>www.html5plus.org/doc/

二、产品的定位：垃圾分类查询的app

功能

2.1语音识别
打开新页面===》传值
2.2垃圾分类==》滑块功能
2.3查询功能
2.4搜索记录

image.png image.png

三：问题

1：设置手机端（顶部）状态栏的背景颜色和内容区的一致

amui.plusReady(function (){
plus.navigator.setStatusBarBackground('#F2F2F0')；
})

请问：底部状态栏 怎么修改？？？

image.png

2：滑动不了，要这样解决这个bug

mui('.mui-slider').slider().gotoItem(0);

3：APP状态栏开启沉浸式:

1：填写这个配置
            "statusbar": {
		"immersed": true // 开启沉浸式
	},
 2：在每个html文件的meta标签中加上这个配置：viewport-fit=cover

image.png

四：接口

一、根据垃圾名称检索分类信息
1.1接口地址：http://apis.juhe.cn/rubbish/search
1.2请求参数说明：
key :dfe7a5dc90a9be32d35d15d5a06eb619
q：需要查询的垃圾名称(含材质)，比如：小龙虾、苹果、纸巾

二：垃圾分类：
1.1 http://apis.juhe.cn/rubbish/category
1.2请求参数说明：
key :dfe7a5dc90a9be32d35d15d5a06eb619

三、热门搜索
1.1接口地址:http://apis.juhe.cn/rubbish/hotSearch
1.2请求参数说明：
key :dfe7a5dc90a9be32d35d15d5a06eb619

五：垃圾搜索：

image.png

遇到问题：搜索垃圾总是提示这个什么东西，不影响功能 21:05:59.901 Unable to preventDefault inside passive event listener due to target being treated as passive. See www.chromestatus.com

六：考核视频 一、录制一个视频（出镜） 二、内容要求： 1、产品是什么？ 这次我们做的一个产品是：移动端app的垃圾分类查询产品，只要功能模块有，回收站，垃圾站和垃圾分类，语音查找，关于我们和文字查找

2、用了哪些技能点和接入的东西？ 整个app采用的框架是mui，调取设备使用html5plus，

3、具体实现哪些功能？ 下面我说一下我负责的功能模块有三个，分别是 语音查找，垃圾分类，和文字搜索。 先说一下语音查找，使用的是讯飞语音识别，触摸语音识别按钮调用讯飞语音识别功能，在规定10秒时间内通过语音识别成功后调用后端接口跳转到新的匹配结果页面，可以看到查找的垃圾是干垃圾还是湿垃圾，如果语音识别失败，会有相应的toast弹窗提示用户。

垃圾分类：采用了轮播组件和区域滚组件，进行了页面渲染垃圾分类数据，在数据渲染完成后，

文字搜索功能，可以输入对应的垃圾名称，点击搜索后进行相应的查找，的信息做了本地数据持久化存放在localstore中，用户下次可以通过点击手搜索历史快速查找，还有一个是热门搜索的部分，也可以直接点击热门的数据进行快速搜索

4、遇到哪些问题？以及处理方式？ 在做垃圾分类数据渲染完成后，发现轮播功能无效，官方文档没有对应的解决方案，通过快速查找相关技术论坛得到解决方案。 打了一个不是正式的apk包，在手机运行的时候，发现语音功能不能正确搜索到对应的垃圾分类，但是本地运行的时候又是可以的。通过调试发现语音识别完成后都有一个句号，通过正则或用语音官当文档提供的api方法把多余的标点符号攫取掉就可以正常使用了

5、上线流程？ 打包上线是先在mainifest配置完相关配置，然后再运行中选择制作自定义调试基座，填写相关配置信息，比如android的apk要填写证书相关信息，然后打一个自定义调试基座的apk包安装到手机进行测试，测试通过再打正式包，发布到手机应用商店上。

avatar
文章
阅读
粉丝