9个工作日完成了一个小程序的开发以及冒烟自测~
此小程序主要涉及二维码扫描，拍照识别，倒计时，输入限制，tab切换，腾讯地图，canvas的应用，合计10个页面，10个接口；还是属于比较简单的，但开发过中也遇到一些问题，故记录下来，如下~~
1.登陆流程问题
小程序官方登陆流程是
理解官方登陆流程是没什么问题的；只是还有一些疑问，比如说用户首次登陆应该怎么办，第二次登陆又应该怎么走；
- appid和appsecret在微信公众平台获取；对于前端来说只需要appid；
- 如图，openid（用户唯一标识），session_key（一串加密/解密需要的字符串）都是由后台处理，不需要经手前端；
- 项目中后台把token设置为不过期；
下面是对于此项目登陆流程的解读
用户进入页面判断有没有本地token，没有的话用wx.login拿来的code去调用后台的登陆接口，判断是否首次登陆，如果是首次登陆则进入注册流程，注册流程有两步骤，一是获取用户信息，二是获取用户手机号码，根据最新官方开发要求，这两个事件都需要用户自己触发button；由此做了两个页面（感觉用户体验不好）;注册完成之后又进入首页调用登陆接口拿到token存储到本地；接着一切按照正常流程走~~~
2.背景图片设置问题；
使用背景图片必须使用链接（放服务器）
3.自定义照相页面问题；
在camera标签内嵌套cover标签就可以
4.input输入4位插入空格问题；
inputEvent:function(e){
this.kongge_string(e.detail.value);
},
// 输入自动添加空格
kongge_string: function (e) {
var kongge_sn = e.replace(/[^A-Za-z0-9]/g, '');
var result = [];
for (var i = 0; i < kongge_sn.length; i++) {
if (i == 4 || i == 8 || i==12 || i==16) {
result.push(" " + kongge_sn.charAt(i));
}
else {
result.push(kongge_sn.charAt(i));
}
}
kongge_sn = result.join("");
this.setData({
sn: kongge_sn.toUpperCase()
})
}
5.封装wx.request问题；
util.js
const request=(url,data)=>{
return new Promise(function(reslove,reject){
//网络请求
wx.request({
url: url,
data: data,
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'Content-Type': 'application/x-www-form-urlencoded'
}, // 设置请求的 header
success: function(res){
// success网络请求成功
if(res.statusCode!=200){
reject({error:'服务器忙，请稍后重试',code:500});
return;
}
resolve(res.data.data);
},
fail: function(res) {
// fail调用接口失败
reject({error:'网络错误',code:0});
},
complete: function(res) {
// complete
}
})
})
}
module.expors={
request:request
}
注：页面引用js：const util = require('../../utils/util.js')
页面引用css:@import "weui.wxss";
6.下拉刷新真机问题；
在需要下拉刷新的页面json文件添加"enablePullDownRefresh": true,"backgroundTextStyle": "dark",然后js文件需要加上wx.stopPullDownRefresh();不然会出现下拉不回弹问题
7.showLoading和wx.showToast显示时间问题
在wx.showToast()前面用到wx.hideLoading(),后面的showToast根本就不会出来；
需要如下这样处理
wx.hideLoading()
setTimeout(()=>{
wx.showToast({
title: '没有更多数据了~',
icon: 'none'
})
setTimeout(() => {
wx.hideToast();
}, 3000)
},0)
8.iphone6真机地图页面文字不显示问题；
//暂未解决
9.真机与电脑调试图片base64上传中断问题；
其实是公司网络不好....
10.倒计时
countDown: function () {
let that = this;
let countDownNum = that.data.countDownNum;
that.setData({
timer: setInterval(function () {
countDownNum--;
that.setData({
countDownNum: countDownNum
})
if (countDownNum == 0) {
that.initApi();
clearInterval(that.data.timer);
}
}, 1000)
})
},
11.发布体验版真机无法请求问题
小程序对体验版也做了协议请求限制，必须使用https；https最好在测试前7天做好准备。。。花钱，备案，域名等；。。
12.测试阶段还遇到一个快速多次点击的问题；
这个。。百度有很多种解决方案了；
13.测试阶段遇到虚拟按键影响手机页面布局问题；
https://segmentfault.com/q/1010000015932925
14.最后提交审核的时候提交资料不知道标题是不是小程序名称。。搜了谷歌看来是的
微信图片_20181123171442.png
网友评论