微信小程序小结（自定义tabBar,换肤等）

第一次发帖不知道写些啥就说说我和我的微信小程序吧

之前一直对微信小程序有兴趣空余时间做了模仿永辉生活做了个便利店然后悲催的发现个体号不能用支付接口什么的一下索然无味然后删了~

对!删了然后过了好久又想玩玩然后又做了个记账的小程序因为文档太枯燥就边做边查想到点什么就加上去现在基本成型，我就说说我在这过程中遇到的一些坑死我这个小白的问题吧要是有大佬们有什么骚操作和建议务必留个言让我吸收一下子哈

一.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<arr.length;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记账簿

最后编辑于：2021.01.06 17:32:53

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 160,108评论 4赞 364
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,699评论 1赞 296
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,812评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,236评论 0赞 213
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,583评论 3赞 288
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,739评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,957评论 2赞 315
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,704评论 0赞 204
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,447评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,643评论 2赞 249
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,133评论 1赞 261
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,486评论 3赞 256
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,151评论 3赞 238
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,108评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,889评论 0赞 197
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,782评论 2赞 277
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,681评论 2赞 272

微信小程序小结 （自定义tabBar,换肤等）

推荐阅读更多精彩内容

微信小程序小结（自定义tabBar,换肤等）