微信小程序小結(jié) （自定義tabBar,換膚等）

第一次發(fā)帖 不知道寫些啥? 就說說我和我的微信小程序吧

之前一直對微信小程序有興趣 空余時間做了模仿 永輝生活做了個便利店 然后悲催的發(fā)現(xiàn)個體號不能用支付接口什么的 一下索然無味 然后 刪了~

對!刪了 然后 過了好久 又想玩玩 然后? 又做了個記賬的小程序 因為文檔太枯燥 就 邊做邊查? 想到點什么 就加上去? 現(xiàn)在基本成型佑菩，我就說說 我在這過程中遇到的一些坑死我這個小白的問題吧? 要是有大佬們有什么騷操作和 建議 務(wù)必留個言 讓我吸收一下子哈


一.tabBar

1.自定義導(dǎo)航欄首先小程序底部導(dǎo)航欄; 官方的是在app.json里面統(tǒng)一配置和管理的；但是它 并不支持自定義點擊事件

解決方法： 先把app.json 中tabBar的配置項 =>? "custom": true, 這樣就使原生的導(dǎo)航欄失效 默認(rèn)讀取custom-tab-bar/index

這個就需要自己去創(chuàng)建寫啦具體看這個https://developers.weixin.qq.com/community/develop/article/doc/0004ae44048af028877ac58ce51413

然后這個方式需要1先做個自定義的tabBar組件裁赠；2.每個需要的導(dǎo)航頁引入該組件 3.每個導(dǎo)航頁的onshow 執(zhí)行跳轉(zhuǎn)函數(shù)殿漠。至于那個自定義點擊事件就 在tabBar里面實現(xiàn)。

2.導(dǎo)航頁邊組件佩捞。

有一說一哈 我覺得自定義導(dǎo)航欄好麻煩? 然后我最近又把他改掉了

先新建個新的頁面四件套 wxml里面實現(xiàn)tabBar的展示 之上則是根據(jù)條件加載不同的組件 绞幌，這些組件就是原先的導(dǎo)航頁 改的（這個改的很省事）

是這樣的

<!--index.wxml-->

明細(xì)

<!--index.json-->

{

? "usingComponents": {

? ? "home": "/pages/home/index",

? ? "canvasInfo": "/pages/canvasInfo/canvasInfo",

? ? "new": "/pages/new/new",

? ? "count": "/pages/count/count",

? ? "wd": "/pages/wd/wd"

? }

}

<!--index.js-->

data: {

? ? PageCur: 'home',

? ? skin: app.globalData.skin,

? },

? NavChange(e) {

? ? var a = e.currentTarget.dataset.cur

? ? if (a == "new" ) {

? ? ? if (!getApp().globalData.isAuthorize) {

? ? ? ? console.log("用戶沒有授權(quán)");

? ? ? ? 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(); // 通過實例調(diào)用組件事件

? ? myComponent.onShow();

? },


二.皮膚

嫌著蛋疼 沒想出新功能的時候就想到些花里胡哨的玩意兒猪狈，換膚功能

剛剛開始都想哭了因為最早頁面樣式我想寫的到處都是 整理死我了

大體這樣：

1.將全部需要受到換膚影響的元素都找出來

2.在每個頁面js的data中增加一個skin（名字你隨意）作為 1中的className （一個皮膚不同位置有不同的的樣式 那就多配幾個）

3增加一個wxss文件 里面寫好所有的皮膚樣式 樣式為類選擇器 類名用用于skin賦值

4.app.js中g(shù)lobalData也新增skin（用于每個頁面skin默認(rèn)值） 芋簿，并新增一個設(shè)置相應(yīng)界面skin值的函數(shù)setSkin(that){}

5.提供一個選擇皮膚的功能,選擇對應(yīng)的皮膚后? 將所選的skinName 存入緩存（為了持續(xù)生效） 后調(diào)用app.js的setSkin函數(shù) setSkin函數(shù)通過獲取緩存中的數(shù)據(jù) 為相應(yīng)頁面skin賦值

5.在每個頁面的onshow中 調(diào)用app.js的setSkin(that){}函數(shù)為skin賦值

<!--app.js-->

? 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',

? ? ? ? })? }? ? }? })? }

<!--index.html-->

<!--setskin.js-->

data: {

CustomBar: app.globalData.CustomBar,

StatusBar: app.globalData.StatusBar,

skin: app.globalData.skin,

skinList: [

{'name':'默認(rèn)','val':'normal-skin'},

{'name':'黑色','val':'dark-skin'},

{'name':'粉色','val':'red-skin'},

{'name':'黃色','val':'yellow-skin'},

{'name':'綠色','val':'green-skin'},

{'name':'灰色','val':'cyan-skin'},

{'name':'藍(lán)色','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])

? },

三.一些通用小函數(shù)

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 轉(zhuǎn)為Unix

functiondateStrToUnix(date){

date = date.substring(0,19);

date = date.replace(/-/g,'/');//必須把日期'-'轉(zhuǎn)為'/'

returnnewDate(date).getTime();

}

functionunixToDateStr(timestamp){

vard =newDate(timestamp);//根據(jù)時間戳生成的時間對象

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;

}

// 除法函數(shù)

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);

}

// 乘法函數(shù)

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)

}

//減法函數(shù)

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

//動態(tài)控制精度長度

? n = (r1 >= r2) ? r1 : r2;

return((arg1 * m - arg2 * m) / m).toFixed(n);

}

/*用來得到精確的加法結(jié)果

*說明：javascript的加法結(jié)果會有誤差刹缝，在兩個浮點數(shù)相加的時候會比較明顯哲银。這個函數(shù)返回較為精確的加法結(jié)果童太。

*調(diào)用：accAdd(arg1,arg2)

*返回值：arg1加上arg2的精確結(jié)果

*/

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方法鄙才，調(diào)用起來更加方便庵朝。

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

//? ? }

// }

}

//時間戳轉(zhuǎn)年月日? 參數(shù)是秒的時間戳 函數(shù)返回一個對象 對象里有年 月 日

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 日不論是周幾杜窄，都算為本周的最后一天

//參數(shù)年份 ，函數(shù)返回一個數(shù)組算途，數(shù)組里的對象包含 這一周的開始日期和結(jié)束日期

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

}

// 是否是數(shù)組

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);// 毫秒數(shù)

console.log(Math.floor((endTime - startTime) /1000));// 秒數(shù)

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));// 天數(shù)

}

// 是否同一天

functionisSameDay(startTime, endTime){

// debugger

conststartTimeMs =newDate(startTime).setHours(0,0,0,0);

constendTimeMs =newDate(endTime).setHours(0,0,0,0);

returnstartTimeMs === endTimeMs ?true:false

}

// 獲取元素在數(shù)組中位置

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

}

四.新版本發(fā)布 自動更新

小程序發(fā)布之后沒做處理的話 得需要用戶冷啟動才可以獲取新的版本 所以需要我們加個檢測機制我是 直接加在了app.js的 onshow頁面調(diào)用的時候檢測是否有新版本有的話彈窗讓用戶更新重啟

onShow:function(options){

console.log('app.js==================onShow')

//處理小程序更新

this.autoUpdate();

wx.onMemoryWarning(function(){

console.log('onMemoryWarningReceive')

console.log('內(nèi)存炸了')

? ? })

// wx.BaaS.reportTemplateMsgAnalytics(options)

? },

/***

? * 小程序更新機制處理

? */

? autoUpdate(){

letthat =this

//獲取小程序更新機制兼容

if(wx.canIUse('getUpdateManager')){

//獲取全局唯一的版本更新管理器塞耕，用于管理小程序更新

letupdateManager = wx.getUpdateManager()

//1.檢查小程序是否有新版本發(fā)布

updateManager.onCheckForUpdate(function(res){

//請求完新版本信息的回調(diào)

if(res.hasUpdate){

//2.小程序有新版本，則靜默下載新版本嘴瓤，做好更新準(zhǔn)備

updateManager.onUpdateReady(function(){

? ? ? ? ? ? wx.showModal({

title:'更新提示',

content:'新版本已經(jīng)準(zhǔn)備好荷科，是否重啟應(yīng)用唯咬？',

success:function(res){

if(res.confirm){

//3.新的版本已經(jīng)下載好，調(diào)用 applyUpdate 應(yīng)用新版本并重啟

? ? ? ? ? ? ? ? ? updateManager.applyUpdate()

}elseif(res.cancel){

//如果需要強制更新畏浆，則給出二次彈窗胆胰；如果不需要，則這里的代碼都可以刪除

? ? ? ? ? ? ? ? ? wx.showModal({

title:'溫馨提示~',

content:'本次版本更新涉及到新的功能添加刻获，舊版本無法正常訪問哦',

success:function(resc){

? ? ? ? ? ? ? ? ? ? ? that.autoUpdate()

return

//第二次提示后蜀涨，強制更新

if(resc.confirm){

//新的版本已經(jīng)下載好，調(diào)用 applyUpdate 應(yīng)用新版本并重啟

? ? ? ? ? ? ? ? ? ? ? ? ? updateManager.applyUpdate()

}elseif(resc.cancek){

//重新回到版本更新提示

? ? ? ? ? ? ? ? ? ? ? ? that.autoUpdate()

? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? }

? ? ? ? ? ? })

? ? ? ? ? })

updateManager.onUpdateFailed(function(){

//新的版本下載失敗

? ? ? ? ? ? wx.showModal({

title:'已經(jīng)有新版本了喲~',

content:'新版本已經(jīng)上線啦~蝎毡，請您刪除當(dāng)前小程序厚柳，重新搜索打開喲~',

? ? ? ? ? ? })

? ? ? ? ? })

? ? ? ? }

? ? ? })

}else{

//如果希望用戶在最新版本的客戶端上體驗?zāi)男〕绦颍梢赃@樣提示

? ? ? wx.showModal({

title:'提示',

content:'當(dāng)前微信版本過低沐兵，無法使用該功能别垮，請升級到最新微信版本后重試',

? ? ? })

? ? }

? },

五.問題求助

ok現(xiàn)在我有個坑一直沒解決想要看看哪個大佬搞得來

我的小程序中引入echarts 用來做圖表 我只是用初始化 和setOption()的函數(shù) 日常使用正常 但是用小程序開發(fā)工具的Audits測評 說是存在定時器未跟隨頁面回收 都是echarts.js里面的 我實在搞不懂這東西 看看哪位大佬幫我解決下

六.分享幾個echarts的坑

1 echarts的圖表在開發(fā)工具的 真機調(diào)試中會報錯 這是工具的問題

2.最近發(fā)現(xiàn)echarts 的圖表 繪制在canvas 2d里面的話 工具上正常? 當(dāng)手機訪問的時候 會直接導(dǎo)致微信閃退（目前不曉得咋搞 坐等大佬解決） 解決方法 改用 canvas

好啦，還有些東西我一時也想不起來先這些啦扎谎，下面是我的小程序名字感興趣可以看看 （處女作=>基操勿噴哈）然后希望大家有什么? 好的建議和騷操作可以共享下喲 拜拜~

ZZY記賬簿

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末碳想，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子毁靶，更是在濱河造成了極大的恐慌胧奔，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,284評論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件预吆，死亡現(xiàn)場離奇詭異龙填，居然都是意外死亡，警方通過查閱死者的電腦和手機拐叉，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門岩遗，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人凤瘦，你說我怎么就攤上這事宿礁。” “怎么了廷粒？”我有些...
    開封第一講書人閱讀 164,614評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵窘拯，是天一觀的道長。 經(jīng)常有香客問我坝茎，道長涤姊，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,671評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任嗤放，我火速辦了婚禮思喊，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘次酌。我一直安慰自己恨课，他們只是感情好舆乔，可當(dāng)我...
    茶點故事閱讀 67,699評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著剂公，像睡著了一般希俩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上纲辽，一...
    開封第一講書人閱讀 51,562評論 1贊 305
  • 城市分裂傳說
    那天颜武，我揣著相機與錄音，去河邊找鬼拖吼。 笑死鳞上，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的吊档。 我是一名探鬼主播篙议，決...
    沈念sama閱讀 40,309評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼怠硼！你這毒婦竟也來了鬼贱？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,223評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤拒名，失蹤者是張志新（化名）和其女友劉穎吩愧，沒想到半個月后芋酌，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體增显，經(jīng)...
    沈念sama閱讀 45,668評論 1贊 314
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年脐帝，在試婚紗的時候發(fā)現(xiàn)自己被綠了同云。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,981評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡堵腹，死狀恐怖炸站，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情疚顷，我是刑警寧澤旱易，帶...
    沈念sama閱讀 35,705評論 5贊 347
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站腿堤，受9級特大地震影響阀坏，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜笆檀，卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一忌堂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧酗洒，春花似錦士修、人聲如沸枷遂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0贊 22
  • 一樁弒父案棋嘲，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽酒唉。三九已至，卻和暖如春沸移，著一層夾襖步出監(jiān)牢的瞬間黔州，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工阔籽， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留流妻，地道東北人。 一個月前我還...
    沈念sama閱讀 48,146評論 3贊 370
  • 代替公主和親
    正文 我出身青樓笆制，卻偏偏與公主長得像绅这，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子在辆，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,933評論 2贊 355

推薦閱讀更多精彩內(nèi)容