项目
该项目名称为音果云音。目前已上架百度助手，各端下载地址为：
技术栈
uni-app框架vue3+piniauview组件库luch-request请求接口
Bug 数记录
主要模块
登录
允许用户通过手机号验证码、手机号密码、微信授权三种方式登录；登录前需同意用户协议。
tabBar页（首页、商城、合作、我的）我要测试
允许用户本人填写，也可帮他人填写，帮助他人填写需要填入对方手机、年龄、性别、体重（均必填），本人填写则直接获取本地存储的数据（需判断用户是否已填写自己的信息，未填写则弹出提示并跳转）。
选择考卷后答题，每份试卷对应一种类别，每一份试卷对应多种分数模版，最后根据所得的分数显示对应的模版结果。
分享
推广中心
用户分享推广商品的链接，其他用户复制后购买，双方建立上下级关系，上级可获取相应的佣金。
终端操作
售后
工具类商品允许申请售后，确认收货与取消订单。
只有在待付款状态下允许取消订单。
只有在待收货状态下允许确认收货。
售后只有在待发货、待收货、已完成、售后四种状态下发起。若该商品的支付方式为钵币支付，也不允许发起售后。
其余功能······
遇到的问题
苹果上架
该项目有佣金推广模块与虚拟商品购买模块，导致苹果商城上架不成功，经过讨论决定苹果手机上把这些模块隐藏。判断用户使用的设备是否为苹果代码如下：
export const is_iOS = () => {
if (uni.getSystemInfoSync().platform == 'ios') {
return true
} else {
return false
}
}富文本图片不显示
在移动端调试的时候图片能够显示，在手机端运行时发现图片无法显示，但是点击后能够预览，也有宽高占位。百度一阵有人给出了解答：因为图片宽度大于手机屏幕的宽度，导致获取渲染图片时其宽度为 null 。
解决方案： 通过正则表达式匹配图片标签，为其加上 max-width: 100% （注意不要破坏原来的样式）
changeImgWidth(html) {
if (!html) return
let newContent = html
if (/<img style="/.test(html)) {
newContent = html.replace(/<img style="/g, '<img style="max-width: 100%; height: auto;');
} else if(/<img/.test(html)) {
newContent = html.replace(/<img/gi, '<img style="max-width:100%; height: auto;"');
}
return newContent
}页面跳转失败
场景如下：
- 刚进页面调用接口请求，由于没有携带
token返回 401 未登录，判断到状态后跳转到登录页。 - 获取用户的粘贴板，根据链接信息跳到对应的商品页
出现的问题：
- 虽然请求发送了，也收到没有登录的提示了，但是没有跳转到登录页，重新再调一次接口后才自动跳转，并且报错
- 不跳转对应的商品页，并且报错
报错信息如下所示：
Waiting to navigate to xxx, do not operate continuously xxx百度之后找到这个问答帖子：这是啥意思？为什么不跳呢 ，答案大意就是页面还没渲染好，准备跳到起始页（即 pages.json 的第一个页面），然后触发事件，又要跳到设置的对应页面，因此报错。
解决方法：
加一个延迟器，延迟执行跳转的操作即可。
setTimeout(() => {
uni.navigateTo({
url: '/pages/login/Login',
})
}, 500)项目亮点
音频播放
使用 uni.createInnerAudioContext() 音频组件控制播放音频。
- 通过
src字段添加链接；设置startTime开始使用 - 通过循环的方式动态次数循环播放音频
- 通过
play()事件播放音频，pause()事件暂停音频，stop()事件停止音频，seek()事件切换音频当前播放位置，onEnded()监听音频停止时间，onTimeUpdate()动态获取音频当前播放位置。 - 根据使用者是否听音频来动态增加减少当前音频在听人数，通过暂定、停止、结束事件调用后端接口传递记录当前使用者听该音频的时长。
画布绘制
使用 canvas 画布绘制海报并生成图片保存到手机相册。
- 通过
canvas标签以及uni.createCanvasContext方法生成海报。 - 通过
uni.canvasToTempFilePath方法把画布转为图片。 - 通过
uni.saveImageToPhotosAlbum方法把图片保存到手机相册中。
蓝牙功能
使用 UniApp 内置 API 实现蓝牙搜索与低功耗蓝牙连接读写功能；使用 UniApp 内置 API 实现扫一扫功能。详细信息请见《操作页》内容。
支付
通过 uni.requestPayment 方法实现支付功能
- 调用后端接口创建订单获取订单编号，成功后即可调用后端支付接口获取对应 sdk
- 使用
uni.requestPayment方法调起支付，其中，属性provider为支付服务提供商。如支付宝支付参数为alipay，微信支付为wxpay，orderInfo传入第一步获取到的订单编号
剪切板
动态设置用户剪切板内容，实现商品链接的保存分享
- 通过
uni.setClipboardData设置系统剪贴板的内容，其中，data属性的参数为要设置的内容。 - 通过
uni.getClipboardData获取系统剪贴板的内容。
检查更新
获取当前 app 的版本号，调用接口获取服务器最新版本号，如果当前并非最新版本号，则更新下载最新版本。详情请见： 更新
贡献者
刀刀
duyidao
v_duyilin
Orange
laowang