先说一下自己的心得在把线上项目改成uni-app之后，我属实觉得哪里都是坑啊，而且还没有任何招架之力，只能硬着头皮改了
感觉心力交瘁，因为用了整整一天时间把项目写出来，我只休息了4个小时，感觉也快在猝死的边缘徘徊了。
不过对大佬来说就都是小事，我就是个菜菜~
1、封装接口以及规范
首先就是所有的页面公用的方法必须要在main.js中引入
然后挂载到Vue原型链上
然后就可以在所有的页面通过你挂载的属性名进行引用
很简单的步骤，相信大家上手都会很快
1.1 请求数据接口封装
主要是对请求的过程进行一个封装，但是觉得其实还可以多加改善
params：options接收一个对象，对请求地址、请求方法以及数据进行传参
封装方法：
export const doAjax = (options) =>{
return new Promise((resolve,reject)=>{
uni.showLoading({
title: '加载中'
});
uni.request({
url:options.url,
method:options.method || 'GET',
data:options.data || {},
success:(res)=>{
uni.hideLoading();
resolve(res.data);
},
fail:(err) =>{
uni.showToast({
title:"系统繁忙，请稍后再试"
});
reject(err);
}
})
})
};
使用方式：
1、引入
import {doAjax,isPhoneNumber,handleWrap} from './common/util.js'
2、挂载
Vue.prototype.$doAjax = doAjax
3、使用
async getchartCode(){
let param = {
"headerInfo": { "functionCode": "getPicRandomCode"},
"requestContent":{"sessionid":this.pageData.sessionid || ""}
}
const res = await this.$doAjax({
//#ifdef H5
url: 'http://wapapp01.zsc.189.cn/wapclient/queryAward.do', //这里分两种方式主要是因为h5跨域问题
//#endif
//#ifndef H5
url: 'http://wapapp01.zsc.189.cn/wapclient/queryAward.do',
//#endif
method: 'POST',
data: param
})
}
1.2 判断手机号是否符合
param：obj代表要进行正则判断的手机号码
封装方法
export const isPhoneNumber = (obj) =>{
let phoneID = /^((13|14|15|16|17|18|19)){1}\d{9}$/;
if(!phoneID.test(obj)){
return false;
}else{
return true;
}
};
使用方式：
if(!this.$isPhoneNumber(this.pageDom.phoneNum)){
this.errTipFun(this.errTip.e001); //手机号输入错误
return false;
}
1.3 对base64位长编码返回的换行进行处理
param：chart代表要进行转换的64位图片
封装方法：
export const handleWrap = (chart) =>{
let base64 = chart.replace(/[\r\n]/g, "");
return base64;
}
使用方式：
let res = this.$handleWrap(data.randomData) //data.randomData代表base64位内容
2、在开发过程中遇到的坑
干活首先脑子要灵活，我因为一点小问题也有困扰我一个小时的，太难了
2.1 base64位图片不能显示
具体原因就是因为base64位返回的长编码代有换行，不能自己转换
但是uni-app底层又是通过背景图片进行显示图片的，base64位图片不经过处理通过img可以显示，但是使用背景就不好显示了
2.2 图片与图片同时使用会有一点间距
因为啥我也不知道，我自己上手使用margin-top调了调
3、总结的知识点
3.1 在弹窗滑动阻止页面滚动
在要滚动的区域添加上
@touchmove.stop.prevent="moveHandle"就可以阻止滚动用的十分顺手啊！！
3.2 手动实现倒计时60s
可能有什么bug 但是目前没发现 ，发现也别讲出来，把正确的发给我就好
方法：
reduceCount:function(){
if(!this.pageDom.randomNum){ //倒计时结束
clearInterval(this.time); //清除计时器
this.pageDom.randomText = '重新获取' //将文本改为重新获取
this.getchartCode(); //获取校验码
this.flagArr.randombtnflag = true; //获取验证码显示 倒计时隐藏
this.pageDom.randomNum = 60; //将倒计时重新开始
this.pageDom.randomCode = ''; //将短信验证码文本置空
}else{
--this.pageDom.randomNum; //每隔1s减一次
}
},
调用：
this.time = setInterval(this.reduceCount,1000); //开启倒计时
3.3 源码地址
虽然项目中并没有用到必须的tabbar还有跳转等基础的API，但是也学到了很多，项目虽小，但也可以积累经验。
