1、项目背景和机制
饮料促销装小程序,进入渠道有三种:一、普通二维码扫码进入;二、通过点击首页banner进入;三、通过分享进入;
项目流程:
(1)上传小票
(2)抽奖流程+填写收货信息流程
2、问题总结
(1)和后台对接过程中的问题:
问题:梳理的虚接口list还是没有特别精确,比如中奖记录返回的状态值,前端是需要具体的文案而不是数字;接口最终返回的字段中英文和类型都应该在虚接口list中精确表示,并且后台在后期虚接口的开发工程中需要参照list,如果修改在list中标明
比较好的方面:在开发过程中,使用shimo沟通,将问题列出来,一一解决;(改进点:下次在开发之前就和后台沟通清楚,一起维护这个文档;)
(2)中奖结果一定要重点测试
这次红包中奖的显示 36分显示了36元的问题,最后和后台修改别的问题的时候发现了!!!运营技术同学之前都没测出来,前端出现这个问题是由于把项目给别的同学辅助的,自己没有认真检查!!!也没这个意识。
(3)字体压缩问题,项目启动会的时候就要和设计同学确认好让他们提供压缩使用的字体文件;压缩字体,到最后再替换压缩字体;和设计同学再项目启动会的时候就沟通好设计同学提供使用的字体文件;字体需要加动态的版本号,防止cdn缓存产生的问题
(4)小程序审核版本只会有一个,新提交审核会把之前审核通过未发布的版本干掉,这点要小心。
(5)体验版需要一些标志来和正式版区分,遇到了一种情况:订阅消息扫码由于没配置好,进入的是体验版(应该是进入正式版的),幸好体验版和正式版不同,才发现这个问题
3、总结
(1)关于小程序的二维码
普通二维码发布的话,比如体验版发布,有体验权限的用户进入测试环境,没有体验权限的人会进入正式环境;
(2)加载字体代码:通用,区分压缩和原字体文件;
let loadFangZhengFont = (isMini)=>{
if(isMini=="mini"){
wx.loadFontFace({
family: 'fangzheng',
// source: 'url("https://file02.esurl.cn/daneng/2020/ys898/font/fangzheng.TTF")',
source: 'url("https://file02.esurl.cn/daneng/2020/ys898/font/mini_fangzheng.TTF?v=10")',
success: function (res) {
console.log("方正字体加载成功")
},
fail: function (res) {
console.log("方正字体加载成功 fail",res);
},
complete: function (res) {
}
})
}else{
wx.loadFontFace({
family: 'fangzheng',
source: 'url("https://file02.esurl.cn/daneng/2020/ys898/font/fangzheng.TTF")',
success: function (res) {
console.log("方正字体加载成功")
},
fail: function (res) {
console.log("方正字体加载成功 fail",res);
},
complete: function (res) {
}
})
}
}
export default loadFangZhengFont
(2)上传小票:基本的接口和微信api
获取后台OssUrl
//选择图片
wx.chooseImage({
count: 1, //最多可以选择的图片总数
sizeType: ['original'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success(res) {
// res.tempFilePaths[0], 这是微信返回的链接,继续走wx.uploadFile()上传
})
//微信上传
wx.showLoading({
title: '上传中',
mask: true
});
wx.uploadFile({
url: url,//后台ossUrl
filePath: filePath,//wx.chooseImage获得的文件路径
name: 'file',
success(res) {
wx.hideLoading();
let updata = JSON.parse(res.data);
//继续走下去
},
fail(res) {
wx.hideLoading();
wx.showToast({
title: '上传失败,请重试',
icon: 'none'
}
})
//保存图片
let res = await yhHttp.$post(api.saveImg, param);
if (res.Success) {
that.setData({
'fileId': res.Data.FilesId
})
} else {
wx.showToast({
title: res.Message,
icon: 'none'
})
}
},
//上传图片
let res = await yhHttp.$post(api.beforeUploadImg, {
FileId: that.data.fileId
});
if (res.Success) {
} else {
wx.showToast({
title: res.Message,
icon: 'none'
})
this.setData({
submitBtnDis: false
});
}
},
(3)用户信息提交(收货信息)-----通用,需要将它放到模板上
(4)活动说明弹窗、中奖记录弹窗+底部两个按钮-------通用
(4)小程序订阅消息的配置(主要是后台和运营配置过程中的问题,需要总结下)
(6)tracking小程序的渠道区分:如是通过链接带business_channel 或者utm相关参数方式的话 SDK会自动收集渠道参数的