微信小程序小结 (自定义tabBar,换肤等)_竹No心的博客-程序员秘密

技术标签: 微信小程序  echarts  小程序  javascript  

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

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

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

 

目录

一.tabBar

二.皮肤

 三.一些通用小函数

四.新版本发布 自动更新

五.问题求助

六.分享几个echarts的坑 


一.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的展示 之上则是根据条件加载不同的组件 ,这些组件就是原先的导航页 改的(这个改的很省事)

是这样的

<!--index.wxml-->
<home  id="component" wx:if="{
   {PageCur=='home'}}"></home>
<canvasInfo  id="component" wx:if="{
   {PageCur=='canvasInfo'}}"></canvasInfo>
<new id="component" wx:if="{
   {PageCur=='new'}}"></new>
<count id="component" wx:if="{
   {PageCur=='count'}}"></count>
<wd id="component" wx:if="{
   {PageCur=='wd'}}"></wd>

<view class="cu-bar tabbar {
   {skin}} shadow foot">
  <view class="action" bindtap="NavChange" data-cur="home">
    <view class='cuIcon-cu-image'>
      <image src="/images/明细{
   {PageCur=='home'?'':'1'}}.png"></image>
    </view>
    <view class="{
   {PageCur=='home'?'text-green':'text-gray'}}">明细</view>
  </view>

</view>
<!--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("用户没有授权");
        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赋值

<!--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-->

<view class="{
   {skin}}" style="height:100%; width:100%"></view>

<!--setskin.js-->
 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=======================')
    var skin = 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])

  },

 三.一些通用小函数

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}
//2020-11-20 转为Unix
function dateStrToUnix(date) {
  date = date.substring(0, 19);
  date = date.replace(/-/g, '/'); //必须把日期'-'转为'/'
  return new Date(date).getTime();
}
function unixToDateStr(timestamp) {
  var d = new Date(timestamp);    //根据时间戳生成的时间对象
  return (d.getFullYear()) + "/" +
    (d.getMonth() + 1) + "/" +
    (d.getDate()) + " "
}
function weekAndday(dates) {
  let date = new Date(dates);

  return weekAnddayByDate(date);
}
function weekAnddayByDate(date) {
  let dateObj = {};
  let show_day = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  date.setDate(date.getDate());
  let day = date.getDate();
  let yearDate = date.getFullYear();
  let month = ((date.getMonth() + 1) < 10 ? (date.getMonth() + 1) : date.getMonth() + 1);
  let dayFormate = (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;
  return dateObj;
}
// 除法函数
function accDiv(arg1, arg2) {
  var t1 = 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);
}
// 乘法函数
function accMul(arg1, arg2) {
  var m = 0,
    s1 = arg1.toString(),
    s2 = arg2.toString();
  try { m += s1.split(".")[1].length } catch (e) { }
  try { m += s2.split(".")[1].length } catch (e) { }
  return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
}
//减法函数
function accSub(arg1, arg2) {
  var r1, 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的精确结果
*/
function accAdd(arg1, arg2) {
  var r1, 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) {
  return accAdd(arg, this);
}
//计算今天是今年第几周
function getWeek(y, m, d) {
  let day1 = new Date(y, parseInt(m) - 1, d);
  let day2 = new Date(y, 0, 1);
  let day = Math.round((day1.valueOf() - day2.valueOf()) / 86400000);
  return Math.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
  //     }
  // }
}

//时间戳转年月日  参数是秒的时间戳 函数返回一个对象 对象里有年 月 日
function yearDay(long) {
  var time = new Date(long * 1000)
  var year = time.getFullYear();
  var month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
  var date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
  var yearday = { year, month, date }
  return yearday
}
//计算一年中的每一周都是从几号到几号
//第一周为1月1日到 本年的 第一个周日
//第二周为 本年的 第一个周一 往后推到周日
//以此类推 再往后推52周。。。
//如果最后一周在12月31日之前,则本年有垮了54周,反之53周
//12月31 日不论是周几,都算为本周的最后一天
//参数年份 ,函数返回一个数组,数组里的对象包含 这一周的开始日期和结束日期
function whichWeek(year) {
  var d = new Date(year, 0, 1);
  while (d.getDay() != 1) {
    d.setDate(d.getDate() + 1);
  }
  let arr = []
  let longnum = d.setDate(d.getDate())
  if (longnum > +new Date(year, 0, 1)) {
    let obj = yearDay(+new Date(year, 0, 1) / 1000)
    obj.last = yearDay(longnum / 1000 - 86400)
    arr.push(obj)
  }
  let oneitem = yearDay(longnum / 1000)
  oneitem.last = yearDay(longnum / 1000 + 86400 * 6)
  arr.push(oneitem)
  var lastStr
  for (var i = 0; i < 51; i++) {
    let long = d.setDate(d.getDate() + 7)
    let obj = yearDay(long / 1000)
    obj.last = yearDay(long / 1000 + 86400 * 6)
    lastStr = long + 86400000 * 6
    arr.push(obj)
  }
  if (lastStr < +new Date(year + 1, 0, 1)) {
    let obj = yearDay(lastStr / 1000 + 86400)
    obj.last = yearDay(+new Date(year + 1, 0, 1) / 1000 - 86400)
    arr.push(obj)
  } else {
    arr[arr.length - 1].last = yearDay(+new Date(year + 1, 0, 1) / 1000 - 86400)
  }
  return arr
}
// 是否是数组
function isArray(obj){
  return (typeof obj=='object')&&obj.constructor==Array;
  }
const getDaysInMonth = (year, month) => {
  let date = new Date(year, month, 1);
  return new Date(date.getTime() - 864e5).getDate();
}
// 俩个时间间隔
function subTime(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)); // 天数
}
// 是否同一天
function isSameDay(startTime, endTime) {
  // debugger
  const startTimeMs = new Date(startTime).setHours(0,0,0,0);
  const endTimeMs = new Date(endTime).setHours(0,0,0,0);
  return startTimeMs === 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(){
    let that = this
    //获取小程序更新机制兼容
    if(wx.canIUse('getUpdateManager')){
      //获取全局唯一的版本更新管理器,用于管理小程序更新
      let updateManager = 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()
                }else if(res.cancel){
                  //如果需要强制更新,则给出二次弹窗;如果不需要,则这里的代码都可以删除
                  wx.showModal({
                    title: '温馨提示~',
                    content: '本次版本更新涉及到新的功能添加,旧版本无法正常访问哦',
                    success: function(resc) {
                      that.autoUpdate()
                      return
                      //第二次提示后,强制更新
                      if(resc.confirm){
                          //新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                          updateManager.applyUpdate()
                      }else if(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

 好啦,还有些东西我一时也想不起来先这些啦,下面是我的小程序二维码 感兴趣可以看看 (处女作=>基操勿喷哈)然后希望大家有什么

好的建议和骚操作可以共享下哟 拜拜~

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yu704011/article/details/112274428

智能推荐

跨域问题:解决跨域的三种方案_zb0002011的博客-程序员秘密

当前端页面与后台运行在不同的服务器时,就必定会出现跨域这一问题,本篇简单介绍解决跨域的三种方案,部分代码截图如下,仅供参考:方式一:使用ajax的jsonp前端代码服务器代码使用该方式的缺点:请求方式只能是get请求方式二:使用jQuery的jsonp插件插件下载网址:https://github.com/jaubourg/jquery-jsonp前端代码服务器代码使用该方式的特点:与方式一相比,请求方式不只局限于get请求,还可以是post请求,但从服务器从获取的数据依然是jsonp...

pycharm中使用清华镜像源方法(详细附图)_一只努力向上的佳佳怪的博客-程序员秘密_pycharm清华源

pycharm中使用阿里镜像源方法很多小伙伴因为导入包的时候因为下载速度过慢而头疼,这是因为pycharm下载包的默认源是国外网站(https://pypi.python.org/simple),这时候我们可以用清华镜像或者其他镜像源1、首先进入设置界面(File-Settings)2、进入安装包的界面,点击右边的+号3、点击Manage Repoditories,这个就是设置仓库4、添加清华镜像源,点击OK5、配置成功...

PyCharm vs Spyder:两个Python IDE的快速比较_cumei1658的博客-程序员秘密

If you have followed my blog you may have noticed that a lot of focus have been put on how to learn programming (particularly in Python). I have also written about Integrated Development Environments ...

961计算机组成原理,2018考研华中科技大学961计算机组成原理(二)考试大纲_祈盟的博客-程序员秘密

华中科技大学研究生考试大纲为广大想报考华中科技大学的考生划出了大致的考试范围以及试卷的结构和题型,是广大考研学生的重要参考文件之一。下面是研招网小编为大家整理的最新2018考研华中科技大学961计算机组成原理(二)考试大纲,以供大家参考。硕士研究生入学考试大纲――《计算机组成原理(二)》科目代码(961)一、考试性质《计算机组成原理》是报考我校协和医院生物医学工程学硕士的专业基础课,旨在考察学生是...

JS本地存储和会话存储的区别_Serena_tz的博客-程序员秘密_本地存储和会话存储的区别

1、localStorage本地存储localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。2、sessionStorage会话存储sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object

随便推点

RxDataSources与TableView实现界面展示(一)_发烧的小龙虾的博客-程序员秘密

// ViewController.swift// RxSwiftTest//// Created by travey on 2018/11/5.// Copyright 2018年 ZhouShijie. All rights reserved.import UIKitimport RxSwiftimport RxCocoaimport SnapKitimp...

软件学院天梯赛参赛队员第一次训练 L2-1 红豆生南国 (25 分)(完全二叉树,树的遍历,重建二叉树,DFS)_forget……的博客-程序员秘密

题目:有诗云: 相思 (王维 唐)红豆生南国, 春来发几枝。愿君多采撷, 此物最相思。那么,我们来采红豆吧!假设红豆树是这个样子的:这种红豆树的特点是:每个结点都有一个正整数编号,标在结点内部。结点的编号各不相同。 最上方一层结点是“红豆”(图中红圈所示的5个结点),这一层被称之为红豆层。 树的根结点、左子结点、右子结点、左子树、右子树等的定义与“数据结构”中的“二叉树”相同,但它毕竟是“自然界中的树”,树根在最下方,如图中的结点5 图中这棵红豆树...

华中科技大学计算机组成原理慕课第四章 存储系统(一) 单元测验(习题+答案+详细解析)_Code_流苏的博客-程序员秘密_sram中的存储单元

华中科技大学计算机组成原理慕课第四章 存储系统(一) 单元测验(习题+答案+详细解析)

Pycharm IDE安装pandas库失败解决方法_ChiFanLAM的博客-程序员秘密_安装pandas库失败

Pycharm IDE安装pandas库失败解决方法作为一名python新手,我们利用Pychram IDE进行编程时总是会遇到一些配置上的难题。比如,在配置第三方库文件时,我们会遇到漫长的等待安装时间后,却发现安装失败!!!具体的安装失败错误提示为:Error occur when installing " "找遍了各种方法,发现下面的解决方案真的屡试不爽:进入Pycharm的terminal:输入:python -m pip install -upgrade pip或者在P

linux 挂载存储命令,Linux挂载存储及命令_知乎汽车的博客-程序员秘密

常用命令一、网卡部分1、确认IP地址命令ifconfigifconfig -aifconfig ethX2、关闭命令ifdown ethXservice network stop3、开启命令ifup ethXservice network start4、重启命令service network restart/etc/init.d/network restart5、修改IP地址命令vi /etc/s...

华东理工大学计算机组成原理试题,华中科技大学计算机组成原理1999年考研真题考研试题硕士研究生入学考试试题(原华东理工大学)..._Z-JO的博客-程序员秘密

华中理工大学1999硕士入学计算机组成原理真题一.填空(每空1分,共20分)1.计算机中数值数据表示长采用的格式有 和 两种。2.已知十进制数,则相应的二进制数X= ,[X]补= 。3.若X=-0.X1X2……Xn,则[X]原= ,[-X]补= 。4.主机与外部设备之间以软件方式控制信息交换的方式有 ...

推荐文章

热门文章

相关标签