第一次发帖 不知道写些啥 就说说我和我的微信小程序吧
之前一直对微信小程序有兴趣 空余时间做了模仿 永辉生活做了个便利店 然后悲催的发现个体号不能用支付接口什么的 一下索然无味 然后 删了~
对!删了 然后 过了好久 又想玩玩 然后 又做了个记账的小程序 因为文档太枯燥 就 边做边查 想到点什么 就加上去 现在基本成型，我就说说 我在这过程中遇到的一些坑死我这个小白的问题吧 要是有大佬们有什么骚操作和 建议 务必留个言 让我吸收一下子哈
一.tabBar
1.自定义导航栏首先小程序底部导航栏; 官方的是在app.json里面统一配置和管理的；但是它 并不支持自定义点击事件
解决方法： 先把app.json 中tabBar的配置项 => "custom": true, 这样就使原生的导航栏失效 默认读取custom-tab-bar/index
这个就需要自己去创建写啦具体看这个https://developers.weixin.qq.com/community/develop/article/doc/0004ae44048af028877ac58ce51413
然后这个方式需要1先做个自定义的tabBar组件；2.每个需要的导航页引入该组件 3.每个导航页的onshow 执行跳转函数。至于那个自定义点击事件就 在tabBar里面实现。
2.导航页边组件。
有一说一哈 我觉得自定义导航栏好麻烦 然后我最近又把他改掉了
先新建个新的页面四件套 wxml里面实现tabBar的展示 之上则是根据条件加载不同的组件 ，这些组件就是原先的导航页 改的（这个改的很省事）
是这样的
明细
{
"usingComponents": {
"home": "/pages/home/index",
"canvasInfo": "/pages/canvasInfo/canvasInfo",
"new": "/pages/new/new",
"count": "/pages/count/count",
"wd": "/pages/wd/wd"
}
}
data: {
PageCur: 'home',
skin: app.globalData.skin,
},
NavChange(e) {
var a = e.currentTarget.dataset.cur
if (a == "new" ) {
if (!getApp().globalData.isAuthorize) {
console.log("用户没有授权");
wx.navigateTo({
url: '/pages/getWxUserInfo/getWxUserInfo',
})
return
}
wx.navigateTo({
url: "/pages/" + a + "/" + a
})
return;
}
this.NavChange1(a)
},
NavChange1(e) {
this.setData({
PageCur: e
})
let myComponent = this.selectComponent('#component'); // 页面获取自定义组件实例
console.log(myComponent)
myComponent.onLoad(); // 通过实例调用组件事件
myComponent.onShow();
},
二.皮肤
嫌着蛋疼 没想出新功能的时候就想到些花里胡哨的玩意儿，换肤功能
刚刚开始都想哭了因为最早页面样式我想写的到处都是 整理死我了
大体这样：
1.将全部需要受到换肤影响的元素都找出来
2.在每个页面js的data中增加一个skin（名字你随意）作为 1中的className （一个皮肤不同位置有不同的的样式 那就多配几个）
3增加一个wxss文件 里面写好所有的皮肤样式 样式为类选择器 类名用用于skin赋值
4.app.js中globalData也新增skin（用于每个页面skin默认值） ，并新增一个设置相应界面skin值的函数setSkin(that){}
5.提供一个选择皮肤的功能,选择对应的皮肤后 将所选的skinName 存入缓存（为了持续生效） 后调用app.js的setSkin函数 setSkin函数通过获取缓存中的数据 为相应页面skin赋值
5.在每个页面的onshow中 调用app.js的setSkin(that){}函数为skin赋值
globalData: {
skin:"normal-skin",
tab1:'normal-skin-tab1',
tab2:'normal-skin-tab2',
},
setSkin:function(that){
wx.getStorage({
key:'skin',
success:function(res){
if(res){
console.log(res)
that.setData({
skin: res.data,
tab1:res.data+'-tab1',
tab2:res.data+'-tab2',
}) } } }) }
data: {
CustomBar: app.globalData.CustomBar,
StatusBar: app.globalData.StatusBar,
skin: app.globalData.skin,
skinList: [
{'name':'默认','val':'normal-skin'},
{'name':'黑色','val':'dark-skin'},
{'name':'粉色','val':'red-skin'},
{'name':'黄色','val':'yellow-skin'},
{'name':'绿色','val':'green-skin'},
{'name':'灰色','val':'cyan-skin'},
{'name':'蓝色','val':'blue-skin'},
]}
,//换肤
setSkin:function(e){
console.log('=================setSkin=======================')
varskin = e.target.dataset.flag;
console.log(skin)
app.globalData.skin = skin
this.setData({
skin: skin,
openSet:false
})
wx.setStorage({
key:"skin",
data: skin
})
app.setSkin(this);
this.hideModal()
app.setSkin(getCurrentPages()[0])
},
三.一些通用小函数
functionformatTime(date){
varyear = date.getFullYear()
varmonth = date.getMonth() +1
varday = date.getDate()
varhour = date.getHours()
varminute = date.getMinutes()
varsecond = date.getSeconds()
return[year, month, day].map(formatNumber).join('/') +' '+ [hour, minute, second].map(formatNumber).join(':')
}
functionformatNumber(n){
n = n.toString()
returnn[1] ? n :'0'+ n
}
//2020-11-20 转为Unix
functiondateStrToUnix(date){
date = date.substring(0,19);
date = date.replace(/-/g,'/');//必须把日期'-'转为'/'
returnnewDate(date).getTime();
}
functionunixToDateStr(timestamp){
vard =newDate(timestamp);//根据时间戳生成的时间对象
return(d.getFullYear()) +"/"+
(d.getMonth() +1) +"/"+
(d.getDate()) +" "
}
functionweekAndday(dates){
letdate =newDate(dates);
returnweekAnddayByDate(date);
}
functionweekAnddayByDate(date){
letdateObj = {};
letshow_day = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
date.setDate(date.getDate());
letday = date.getDate();
letyearDate = date.getFullYear();
letmonth = ((date.getMonth() +1) <10? (date.getMonth() +1) : date.getMonth() +1);
letdayFormate = (date.getDate() <10? + date.getDate() : date.getDate());
dateObj.time = yearDate +"-"+ month +"-"+ dayFormate;
dateObj.week = show_day[date.getDay()];
dateObj.day = day;
dateObj.year = yearDate;
dateObj.month = month;
returndateObj;
}
// 除法函数
functionaccDiv(arg1, arg2){
vart1 =0, t2 =0, r1, r2;
try{ t1 = arg1.toString().split(".")[1].length }catch(e) { }
try{ t2 = arg2.toString().split(".")[1].length }catch(e) { }
r1 =Number(arg1.toString().replace(".",""));
r2 =Number(arg2.toString().replace(".",""));
return(r1 / r2) *Math.pow(10, t2 - t1);
}
// 乘法函数
functionaccMul(arg1, arg2){
varm =0,
s1 = arg1.toString(),
s2 = arg2.toString();
try{ m += s1.split(".")[1].length }catch(e) { }
try{ m += s2.split(".")[1].length }catch(e) { }
returnNumber(s1.replace(".","")) *Number(s2.replace(".","")) /Math.pow(10, m)
}
//减法函数
functionaccSub(arg1, arg2){
varr1, r2, m, n;
try{ r1 = arg1.toString().split(".")[1].length }catch(e) { r1 =0}
try{ r2 = arg2.toString().split(".")[1].length }catch(e) { r2 =0}
m =Math.pow(10,Math.max(r1, r2));
//last modify by deeka
//动态控制精度长度
n = (r1 >= r2) ? r1 : r2;
return((arg1 * m - arg2 * m) / m).toFixed(n);
}
/*用来得到精确的加法结果
*说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
*调用：accAdd(arg1,arg2)
*返回值：arg1加上arg2的精确结果
*/
functionaccAdd(arg1, arg2){
varr1, r2, m;
try{ r1 = arg1.toString().split(".")[1].length }catch(e) { r1 =0}
try{ r2 = arg2.toString().split(".")[1].length }catch(e) { r2 =0}
m =Math.pow(10,Math.max(r1, r2))
return(arg1 * m + arg2 * m) / m
}
//给Number类型增加一个add方法，调用起来更加方便。
Number.prototype.add =function(arg){
returnaccAdd(arg,this);
}
//计算今天是今年第几周
functiongetWeek(y, m, d){
letday1 =newDate(y,parseInt(m) -1, d);
letday2 =newDate(y,0,1);
letday =Math.round((day1.valueOf() - day2.valueOf()) /86400000);
returnMath.ceil((day + ((day2.getDay() +1) -1)) /7)
// console.log(y+"+"+m+"+"+d)
// var arr=whichWeek(y);
// console.log(arr)
// for(var i=0;i // if(arr[i].month==m&&arr[i].date<=d&&((arr[i].last.month==m&&arr[i].last.date>=d)||(arr[i].last.month>m))){ // return i+1 // } // } } //时间戳转年月日 参数是秒的时间戳 函数返回一个对象 对象里有年 月 日 functionyearDay(long){ vartime =newDate(long *1000) varyear = time.getFullYear(); varmonth = (time.getMonth() +1) <10?'0'+ (time.getMonth() +1) : (time.getMonth() +1); vardate = time.getDate() <10?'0'+ time.getDate() : time.getDate(); varyearday = { year, month, date } returnyearday } //计算一年中的每一周都是从几号到几号 //第一周为1月1日到 本年的 第一个周日 //第二周为 本年的 第一个周一 往后推到周日 //以此类推 再往后推52周。。。 //如果最后一周在12月31日之前，则本年有垮了54周，反之53周 //12月31 日不论是周几，都算为本周的最后一天 //参数年份 ，函数返回一个数组，数组里的对象包含 这一周的开始日期和结束日期 functionwhichWeek(year){ vard =newDate(year,0,1); while(d.getDay() !=1) { d.setDate(d.getDate() +1); } letarr = [] letlongnum = d.setDate(d.getDate()) if(longnum > +newDate(year,0,1)) { letobj = yearDay(+newDate(year,0,1) /1000) obj.last = yearDay(longnum /1000-86400) arr.push(obj) } letoneitem = yearDay(longnum /1000) oneitem.last = yearDay(longnum /1000+86400*6) arr.push(oneitem) varlastStr for(vari =0; i <51; i++) { letlong = d.setDate(d.getDate() +7) letobj = yearDay(long /1000) obj.last = yearDay(long /1000+86400*6) lastStr = long +86400000*6 arr.push(obj) } if(lastStr < +newDate(year +1,0,1)) { letobj = yearDay(lastStr /1000+86400) obj.last = yearDay(+newDate(year +1,0,1) /1000-86400) arr.push(obj) }else{ arr[arr.length -1].last = yearDay(+newDate(year +1,0,1) /1000-86400) } returnarr } // 是否是数组 functionisArray(obj){ return(typeofobj=='object')&&obj.constructor==Array; } constgetDaysInMonth =(year, month) =>{ letdate =newDate(year, month,1); returnnewDate(date.getTime() -864e5).getDate(); } // 俩个时间间隔 functionsubTime(startTime,endTime){// 时间new Date('2018-1-1') console.log(endTime - startTime);// 毫秒数 console.log(Math.floor((endTime - startTime) /1000));// 秒数 console.log(Math.floor((endTime - startTime) /1000/60));// 分钟 console.log(Math.floor((endTime - startTime) /1000/60/60));// 小时 console.log(Math.floor((endTime - startTime) /1000/60/60/24));// 天数 } // 是否同一天 functionisSameDay(startTime, endTime){ // debugger conststartTimeMs =newDate(startTime).setHours(0,0,0,0); constendTimeMs =newDate(endTime).setHours(0,0,0,0); returnstartTimeMs === endTimeMs ?true:false } // 获取元素在数组中位置 module.exports = { formatTime: formatTime, dateStrToUnix: dateStrToUnix, unixToDateStr: unixToDateStr, weekAndday: weekAndday, accSub: accSub, accAdd: accAdd, accDiv: accDiv, accMul: accMul, getWeek: getWeek, weekAnddayByDate: weekAnddayByDate, whichWeek: whichWeek, getDaysInMonth: getDaysInMonth, isArray:isArray, isSameDay:isSameDay } 四.新版本发布 自动更新 小程序发布之后没做处理的话 得需要用户冷启动才可以获取新的版本 所以需要我们加个检测机制我是 直接加在了app.js的 onshow页面调用的时候检测是否有新版本有的话弹窗让用户更新重启 onShow:function(options){ console.log('app.js==================onShow') //处理小程序更新 this.autoUpdate(); wx.onMemoryWarning(function(){ console.log('onMemoryWarningReceive') console.log('内存炸了') }) // wx.BaaS.reportTemplateMsgAnalytics(options) }, /*** * 小程序更新机制处理 */ autoUpdate(){ letthat =this //获取小程序更新机制兼容 if(wx.canIUse('getUpdateManager')){ //获取全局唯一的版本更新管理器，用于管理小程序更新 letupdateManager = wx.getUpdateManager() //1.检查小程序是否有新版本发布 updateManager.onCheckForUpdate(function(res){ //请求完新版本信息的回调 if(res.hasUpdate){ //2.小程序有新版本，则静默下载新版本，做好更新准备 updateManager.onUpdateReady(function(){ wx.showModal({ title:'更新提示', content:'新版本已经准备好，是否重启应用？', success:function(res){ if(res.confirm){ //3.新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate() }elseif(res.cancel){ //如果需要强制更新，则给出二次弹窗；如果不需要，则这里的代码都可以删除 wx.showModal({ title:'温馨提示~', content:'本次版本更新涉及到新的功能添加，旧版本无法正常访问哦', success:function(resc){ that.autoUpdate() return //第二次提示后，强制更新 if(resc.confirm){ //新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate() }elseif(resc.cancek){ //重新回到版本更新提示 that.autoUpdate() } } }) } } }) }) updateManager.onUpdateFailed(function(){ //新的版本下载失败 wx.showModal({ title:'已经有新版本了哟~', content:'新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~', }) }) } }) }else{ //如果希望用户在最新版本的客户端上体验您的小程序，可以这样提示 wx.showModal({ title:'提示', content:'当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试', }) } }, 五.问题求助 ok现在我有个坑一直没解决想要看看哪个大佬搞得来 我的小程序中引入echarts 用来做图表 我只是用初始化 和setOption()的函数 日常使用正常 但是用小程序开发工具的Audits测评 说是存在定时器未跟随页面回收 都是echarts.js里面的 我实在搞不懂这东西 看看哪位大佬帮我解决下 六.分享几个echarts的坑 1 echarts的图表在开发工具的 真机调试中会报错 这是工具的问题 2.最近发现echarts 的图表 绘制在canvas 2d里面的话 工具上正常 当手机访问的时候 会直接导致微信闪退（目前不晓得咋搞 坐等大佬解决） 解决方法 改用 canvas 好啦，还有些东西我一时也想不起来先这些啦，下面是我的小程序名字感兴趣可以看看 （处女作=>基操勿喷哈）然后希望大家有什么 好的建议和骚操作可以共享下哟 拜拜~ ZZY记账簿