第一次发帖 不晓得写些啥 就说说我和我的微信小程序吧
之前始终对微信小程序有趣味 空余工夫做了模拟 永辉生存做了个便利店 而后悲催的发现个体号不能用领取接口什么的 一下索然无味 而后 删了~
对!删了 而后 过了良久 又想玩玩 而后 又做了个记账的小程序 因为文档太干燥 就 边做边查 想到点什么 就加上去 当初根本成型，我就说说 我在这过程中遇到的一些坑死我这个小白的问题吧 要是有大佬们有什么骚操作和 倡议 务必留个言 让我排汇一下子哈
一.tabBar
1.自定义导航栏首先小程序底部导航栏; 官网的是在app.json外面对立配置和治理的；然而它 并不反对自定义点击事件
解决办法： 先把app.json 中tabBar的配置项 => "custom": true, 这样就使原生的导航栏生效 默认读取custom-tab-bar/index
这个就须要本人去创立写啦具体看这个[https://developers.weixin.qq....]
而后这个形式须要1先做个自定义的tabBar组件；2.每个须要的导航页引入该组件 3.每个导航页的onshow 执行跳转函数。至于那个自定义点击事件就 在tabBar外面实现。
2.导航页边组件。
有一说一哈 我感觉自定义导航栏好麻烦 而后我最近又把他改掉了
先新建个新的页面四件套 wxml外面实现tabBar的展现 之上则是依据条件加载不同的组件 ，这些组件就是原先的导航页 改的（这个改的很省事）
是这样的
1. <!--index.wxml--> 2. <home id="component" wx:if="{{PageCur=='home'}}"></home> 3. <canvasInfo id="component" wx:if="{{PageCur=='canvasInfo'}}"></canvasInfo> 4. <new id="component" wx:if="{{PageCur=='new'}}"></new> 5. <count id="component" wx:if="{{PageCur=='count'}}"></count> 6. <wd id="component" wx:if="{{PageCur=='wd'}}"></wd> 8. <view class="cu-bar tabbar {{skin}} shadow foot"> 9. <view class="action" bindtap="NavChange" data-cur="home"> 10. <view class='cuIcon-cu-image'> 11. <image src="/images/明细{{PageCur=='home'?'':'1'}}.png"></image> 12. </view> 13. <view class="{{PageCur=='home'?'text-green':'text-gray'}}">明细</view> 14. </view> 16. </view> 17. <!--index.json--> 18. { 19. "usingComponents": { 20. "home": "/pages/home/index", 21. "canvasInfo": "/pages/canvasInfo/canvasInfo", 22. "new": "/pages/new/new", 23. "count": "/pages/count/count", 24. "wd": "/pages/wd/wd" 26. } 27. } 28. <!--index.js--> 29. data: { 30. PageCur: 'home', 31. skin: app.globalData.skin, 32. }, 33. NavChange(e) { 34. var a = e.currentTarget.dataset.cur 35. if (a == "new" ) { 36. if (!getApp().globalData.isAuthorize) { 37. console.log("用户没有受权"); 38. wx.navigateTo({ 39. url: '/pages/getWxUserInfo/getWxUserInfo', 40. }) 41. return 42. } 43. wx.navigateTo({ 44. url: "/pages/" + a + "/" + a 45. }) 46. return; 47. } 48. this.NavChange1(a) 49. }, 50. NavChange1(e) { 51. this.setData({ 52. PageCur: e 53. }) 54. let myComponent = this.selectComponent('#component'); // 页面获取自定义组件实例 55. console.log(myComponent) 56. myComponent.onLoad(); // 通过实例调用组件事件 57. myComponent.onShow(); 59. }, 二.皮肤
嫌着蛋疼 没想出新性能的时候就想到些花里胡哨的玩意儿，换肤性能
刚刚开始都想哭了因为最早页面款式我想写的到处都是 整顿死我了
大体这样：
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赋值
1. <!--app.js--> 2. globalData: { 3. skin: "normal-skin", 4. tab1:'normal-skin-tab1', 5. tab2:'normal-skin-tab2', 6. }, 7. setSkin:function(that){ 8. wx.getStorage({ 9. key: 'skin', 10. success: function(res) { 11. if(res){ 12. console.log(res) 13. that.setData({ 14. skin: res.data, 15. tab1:res.data+'-tab1', 16. tab2:res.data+'-tab2', 17. }) } } }) } 19. <!--index.html--> 21. <view class="{{skin}}" style="height:100%; width:100%"></view> 23. <!--setskin.js--> 24. data: { 25. CustomBar: app.globalData.CustomBar, 26. StatusBar: app.globalData.StatusBar, 27. skin: app.globalData.skin, 28. skinList: [ 29. { 'name': '默认', 'val': 'normal-skin' }, 30. { 'name': '彩色', 'val': 'dark-skin' }, 31. { 'name': '粉色', 'val': 'red-skin' }, 32. { 'name': '黄色', 'val': 'yellow-skin' }, 33. { 'name': '绿色', 'val': 'green-skin' }, 34. { 'name': '灰色', 'val': 'cyan-skin' }, 35. { 'name': '蓝色', 'val': 'blue-skin' }, 36. ]} 37. , //换肤 38. setSkin: function (e) { 39. console.log('=================setSkin=======================') 40. var skin = e.target.dataset.flag; 41. console.log(skin) 42. app.globalData.skin = skin 43. this.setData({ 44. skin: skin, 45. openSet: false 46. }) 48. wx.setStorage({ 49. key: "skin", 50. data: skin 51. }) 52. app.setSkin(this); 53. this.hideModal() 54. app.setSkin(getCurrentPages()[0]) 56. }, 三.一些通用小函数
1. function formatTime(date) { 2. var year = date.getFullYear() 3. var month = date.getMonth() + 1 4. var day = date.getDate() 6. var hour = date.getHours() 7. var minute = date.getMinutes() 8. var second = date.getSeconds() 9. return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10. } 11. function formatNumber(n) { 12. n = n.toString() 13. return n[1] ? n : '0' + n 14. } 15. //2020-11-20 转为Unix 16. function dateStrToUnix(date) { 17. date = date.substring(0, 19); 18. date = date.replace(/-/g, '/'); //必须把日期'-'转为'/' 19. return new Date(date).getTime(); 20. } 21. function unixToDateStr(timestamp) { 22. var d = new Date(timestamp); //依据工夫戳生成的工夫对象 23. return (d.getFullYear()) + "/" + 24. (d.getMonth() + 1) + "/" + 25. (d.getDate()) + " " 26. } 27. function weekAndday(dates) { 28. let date = new Date(dates); 30. return weekAnddayByDate(date); 31. } 32. function weekAnddayByDate(date) { 33. let dateObj = {}; 34. let show_day = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; 35. date.setDate(date.getDate()); 36. let day = date.getDate(); 37. let yearDate = date.getFullYear(); 38. let month = ((date.getMonth() + 1) < 10 ? (date.getMonth() + 1) : date.getMonth() + 1); 39. let dayFormate = (date.getDate() < 10 ? + date.getDate() : date.getDate()); 40. dateObj.time = yearDate + "-" + month + "-" + dayFormate; 41. dateObj.week = show_day[date.getDay()]; 42. dateObj.day = day; 43. dateObj.year = yearDate; 44. dateObj.month = month; 45. return dateObj; 46. } 47. // 除法函数 48. function accDiv(arg1, arg2) { 49. var t1 = 0, t2 = 0, r1, r2; 50. try { t1 = arg1.toString().split(".")[1].length } catch (e) { } 51. try { t2 = arg2.toString().split(".")[1].length } catch (e) { } 53. r1 = Number(arg1.toString().replace(".", "")); 55. r2 = Number(arg2.toString().replace(".", "")); 56. return (r1 / r2) * Math.pow(10, t2 - t1); 57. } 58. // 乘法函数 59. function accMul(arg1, arg2) { 60. var m = 0, 61. s1 = arg1.toString(), 62. s2 = arg2.toString(); 63. try { m += s1.split(".")[1].length } catch (e) { } 64. try { m += s2.split(".")[1].length } catch (e) { } 65. return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m) 66. } 67. //减法函数 68. function accSub(arg1, arg2) { 69. var r1, r2, m, n; 70. try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } 71. try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 } 72. m = Math.pow(10, Math.max(r1, r2)); 73. //last modify by deeka 74. //动静控制精度长度 75. n = (r1 >= r2) ? r1 : r2; 76. return ((arg1 * m - arg2 * m) / m).toFixed(n); 77. } 78. /*用来失去准确的加法后果 79. *阐明：javascript的加法后果会有误差，在两个浮点数相加的时候会比拟显著。这个函数返回较为准确的加法后果。 80. *调用：accAdd(arg1,arg2) 81. *返回值：arg1加上arg2的准确后果 82. */ 83. function accAdd(arg1, arg2) { 84. var r1, r2, m; 85. try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } 86. try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 } 87. m = Math.pow(10, Math.max(r1, r2)) 88. return (arg1 * m + arg2 * m) / m 89. } 91. //给Number类型减少一个add办法，调用起来更加不便。 92. Number.prototype.add = function (arg) { 93. return accAdd(arg, this); 94. } 95. //计算明天是往年第几周 96. function getWeek(y, m, d) { 97. let day1 = new Date(y, parseInt(m) - 1, d); 98. let day2 = new Date(y, 0, 1); 99. let day = Math.round((day1.valueOf() - day2.valueOf()) / 86400000); 100. return Math.ceil((day + ((day2.getDay() + 1) - 1)) / 7) 101. // console.log(y+"+"+m+"+"+d) 102. // var arr=whichWeek(y); 103. // console.log(arr) 105. // for(var i=0;i<arr.length;i++){ 106. // if(arr[i].month==m&&arr[i].date<=d&&((arr[i].last.month==m&&arr[i].last.date>=d)||(arr[i].last.month>m))){ 107. // return i+1 108. // } 109. // } 110. } 112. //工夫戳转年月日 参数是秒的工夫戳 函数返回一个对象 对象里有年 月 日 113. function yearDay(long) { 114. var time = new Date(long * 1000) 115. var year = time.getFullYear(); 116. var month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1); 117. var date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate(); 118. var yearday = { year, month, date } 119. return yearday 120. } 121. //计算一年中的每一周都是从几号到几号 122. //第一周为1月1日到 本年的 第一个周日 123. //第二周为 本年的 第一个周一 往后推到周日 124. //以此类推 再往后推52周。。。 125. //如果最初一周在12月31日之前，则本年有垮了54周，反之53周 126. //12月31 日不论是周几，都算为本周的最初一天 127. //参数年份 ，函数返回一个数组，数组里的对象蕴含 这一周的开始日期和完结日期 128. function whichWeek(year) { 129. var d = new Date(year, 0, 1); 130. while (d.getDay() != 1) { 131. d.setDate(d.getDate() + 1); 132. } 133. let arr = [] 134. let longnum = d.setDate(d.getDate()) 135. if (longnum > +new Date(year, 0, 1)) { 136. let obj = yearDay(+new Date(year, 0, 1) / 1000) 137. obj.last = yearDay(longnum / 1000 - 86400) 138. arr.push(obj) 139. } 140. let oneitem = yearDay(longnum / 1000) 141. oneitem.last = yearDay(longnum / 1000 + 86400 * 6) 142. arr.push(oneitem) 143. var lastStr 144. for (var i = 0; i < 51; i++) { 145. let long = d.setDate(d.getDate() + 7) 146. let obj = yearDay(long / 1000) 147. obj.last = yearDay(long / 1000 + 86400 * 6) 148. lastStr = long + 86400000 * 6 149. arr.push(obj) 150. } 151. if (lastStr < +new Date(year + 1, 0, 1)) { 152. let obj = yearDay(lastStr / 1000 + 86400) 153. obj.last = yearDay(+new Date(year + 1, 0, 1) / 1000 - 86400) 154. arr.push(obj) 155. } else { 156. arr[arr.length - 1].last = yearDay(+new Date(year + 1, 0, 1) / 1000 - 86400) 157. } 158. return arr 159. } 160. // 是否是数组 161. function isArray(obj){ 162. return (typeof obj=='object')&&obj.constructor==Array; 163. } 164. const getDaysInMonth = (year, month) => { 165. let date = new Date(year, month, 1); 166. return new Date(date.getTime() - 864e5).getDate(); 167. } 168. // 俩个工夫距离 169. function subTime(startTime,endTime) {// 工夫new Date('2018-1-1') 170. console.log(endTime - startTime); // 毫秒数 171. console.log(Math.floor((endTime - startTime) / 1000)); // 秒数 172. console.log(Math.floor((endTime - startTime) / 1000 / 60)); // 分钟 173. console.log(Math.floor((endTime - startTime) / 1000 / 60 / 60)); // 小时 174. console.log(Math.floor((endTime - startTime) / 1000 / 60 / 60 / 24)); // 天数 175. } 176. // 是否同一天 177. function isSameDay(startTime, endTime) { 178. // debugger 179. const startTimeMs = new Date(startTime).setHours(0,0,0,0); 180. const endTimeMs = new Date(endTime).setHours(0,0,0,0); 181. return startTimeMs === endTimeMs ? true : false 182. } 183. // 获取元素在数组中地位 185. module.exports = { 186. formatTime: formatTime, 187. dateStrToUnix: dateStrToUnix, 188. unixToDateStr: unixToDateStr, 189. weekAndday: weekAndday, 190. accSub: accSub, 191. accAdd: accAdd, 192. accDiv: accDiv, 193. accMul: accMul, 194. getWeek: getWeek, 195. weekAnddayByDate: weekAnddayByDate, 196. whichWeek: whichWeek, 197. getDaysInMonth: getDaysInMonth, 198. isArray:isArray, 199. isSameDay:isSameDay 200. } 四.新版本公布 自动更新
小程序公布之后没做解决的话 得须要用户冷启动才能够获取新的版本 所以须要咱们加个检测机制我是 间接加在了app.js的 onshow页面调用的时候检测是否有新版本有的话弹窗让用户更新重启
1. onShow:function(options){ 2. console.log('app.js==================onShow') 3. //解决小程序更新 4. this.autoUpdate(); 5. wx.onMemoryWarning(function () { 6. console.log('onMemoryWarningReceive') 7. console.log('内存炸了') 8. }) 9. // wx.BaaS.reportTemplateMsgAnalytics(options) 10. }, 11. /*** 12. * 小程序更新机制解决 13. */ 14. autoUpdate(){ 15. let that = this 16. //获取小程序更新机制兼容 17. if(wx.canIUse('getUpdateManager')){ 18. //获取全局惟一的版本更新管理器，用于治理小程序更新 19. let updateManager = wx.getUpdateManager() 20. //1.查看小程序是否有新版本公布 21. updateManager.onCheckForUpdate(function(res){ 22. //申请完新版本信息的回调 23. if(res.hasUpdate){ 24. //2.小程序有新版本，则静默下载新版本，做好更新筹备 25. updateManager.onUpdateReady(function(){ 26. wx.showModal({ 27. title: '更新提醒', 28. content: '新版本曾经筹备好，是否重启利用？', 29. success: function(res) { 30. if(res.confirm){ 31. //3.新的版本曾经下载好，调用 applyUpdate 利用新版本并重启 32. updateManager.applyUpdate() 33. }else if(res.cancel){ 34. //如果须要强制更新，则给出二次弹窗；如果不须要，则这里的代码都能够删除 35. wx.showModal({ 36. title: '舒适提醒~', 37. content: '本次版本更新波及到新的性能增加，旧版本无奈失常拜访哦', 38. success: function(resc) { 39. that.autoUpdate() 40. return 41. //第二次提醒后，强制更新 42. if(resc.confirm){ 43. //新的版本曾经下载好，调用 applyUpdate 利用新版本并重启 44. updateManager.applyUpdate() 45. }else if(resc.cancek){ 46. //从新回到版本更新提醒 47. that.autoUpdate() 48. } 49. } 50. }) 51. } 52. } 53. }) 54. }) 55. updateManager.onUpdateFailed(function(){ 56. //新的版本下载失败 57. wx.showModal({ 58. title: '曾经有新版本了哟~', 59. content: '新版本曾经上线啦~，请您删除以后小程序，从新搜寻关上哟~', 60. }) 61. }) 62. } 63. }) 64. }else{ 65. //如果心愿用户在最新版本的客户端上体验您的小程序，能够这样提醒 66. wx.showModal({ 67. title: '提醒', 68. content: '以后微信版本过低，无奈应用该性能，请降级到最新微信版本后重试', 69. }) 70. } 71. },五.问题求助
ok当初我有个坑始终没解决想要看看哪个大佬搞得来
我的小程序中引入echarts 用来做图表 我只是用初始化 和setOption()的函数 日常应用失常 然而用小程序开发工具的Audits测评 说是存在定时器未追随页面回收 都是echarts.js外面的 我切实搞不懂这货色 看看哪位大佬帮我解决下
六.分享几个echarts的坑
1 echarts的图表在开发工具的 真机调试中会报错 这是工具的问题
2.最近发现echarts 的图表 绘制在canvas 2d外面的话 工具上失常 当手机拜访的时候 会间接导致微信闪退（目前不知道咋搞 坐等大佬解决） 解决办法 改用 canvas
好啦，还有些货色我一时也想不起来先这些啦，上面是我的小程序二维码 感兴趣能够看看 （处女作=>基操勿喷哈）而后心愿大家有什么
好的倡议和骚操作能够共享下哟 拜拜~