前面写的是因为微信小程序号称解决了前端程序员头疼的兼容性问题，只需要按照腾讯官方的一套规则进行编码，就可以满足不同终端的需求.于是去年下半年用微信小程序实现了一个在我们公司使用的项目（目前用户700+）。下面是我在探索过程中的一些心得总结，为以后的同学们做铺垫，让大家早点下班回家陪老婆孩子。你将学习：如何使用自定义tabbar和权限控制如何使用echarts图表插件程序大小超限如何分包如何使用vantUI组件解决页面滚动自定义页眉弹出层滑动问题并将页面滚动到顶部如何实现自动更新，以及手动更新方案。内部软件需要登录，如何通过审核？其他陷阱？为什么在使用wepy设置数据后不更新视图？1如何使用自定义tabbar和权限控制用过原生tabbar的同学都知道，原生tabbar太丑了，有些样式没办法自定义。大多数应用最终都会有自定义tabbar的需求。按照规矩，先丢官方链接。使用步骤：将官方demo中的custom-tab-bar文件复制到我使用的wepy框架的根目录下，然后复制到src目录下如图。是的，自定义tabbar部分需要使用原生写法。其他自己的业务页面使用wepy框架。入口文件app.json启用自定义tabbarwepy框架。app.wpy配置对象中列表中的pagePath是其自身页面的目录。有必要，其他属性可以删掉，因为具体的tabbar样式（比如图片和颜色）还是要在Customizecustom-tab-bar中设置。"tabBar":{"custom":true,//"color":"#7A7E83",//这里写着不起作用，可以注释掉//"selectedColor":"#3cc51f",//这里写的不行，可以注释//"borderStyle":"black",//"backgroundColor":"#ffffff",//写这里不行，可以注释"list"：[{"pagePath":"index/index","iconPath":"image/icon_component.png",//写这里不行可以评论"selectedIconPath":"image/icon_component_HL.png",//写这里可以不行可以评论"text":"Component"//写在这里不行可以评论},{"pagePath":"index/index2","iconPath":"image/icon_API.png",//写在这里不行cancomment"selectedIconPath":"image/icon_API_HL.png",//写到这里可以评论"text":"Interface"//写到这里不行可以评论}]}，回到自定义的custom-tab-bar/index.js，有如下代码：Component({data:{selected:0,//默认的下标颜色selecteditem:"#7A7E83",//默认item的字体颜色selectedColor:"#3cc51f",//selecteditem列表的字体颜色:[{pagePath:"/index/index",iconPath:"/image/icon_component.png",selectedIconPath:"/image/icon_component_HL.png",text:"组件"},{pagePath：“/index/index2”，iconPath：“/image/icon_API.png”，selectedIconPath：“/image/icon_API_HL.png”，文本：“接口”}]}，附加（）{}，方法：{switchTab(e){constdata=e.currentTarget.datasetconsturl=data.pathwx.switchTab({url})//this.setData({注释掉这三行//selected:data.index//})}}})把this.setData()方法注释掉，因为跳转的标签页也会setData一次，避免重复设置数据造成的闪烁，继续往下看添加wepy框架中每个标签页生命周期展示的代码是显示方法。获取当前页面对象selected:0//每个标签页在配置的列表数组中有不同的下标，需要相应修改})}}不难发现，每次进入标签页，都会得到该标签页的bar对象当前页（tabbar对象在每个tab页不一样，是一个新的对象），然后setselected。所以把上面switchTab方法中的setData方法注释掉，因为重复了。菜单右上角的numberinfo实现并更新list数组中的属性infoNum（只添加需要的菜单项）。infoNum在wxml代码中有条件地呈现（仅当它有一个值并且大于0时）。在每个标签页的显示生命周期中获取信息编号后设置数据。this.$wxpage.getTabBar().setData({['list[1].infoNum']:infoNum//更新信息数})['list[1].infoNum']如何更新多层对象，对吧？我想投诉。相信很多同学也有这种根据登录的角色来控制菜单项的需求，根据登录的用户不同，看到的底部菜单也不同，比如：administrator。实现方法和info非常相似。将属性添加到列表数组。在wx:for循环中，根据list数组中的条件添加show和hide的className。登录后获取用户权限列表，确定显示或隐藏的项目。调用方法更新条形实例的数据。为了方便，可以在custom-tab-bar/index.jsmethods中创建一个方法，然后在每个tab页调用：this.$wxpage.getTabBar().yourFuncName(balabala)，注意每个bar页，因为上面说到每个tabpagebar实例都是独立的。原生页面可以直接通过this.getTabBar()获取TabBar实例。由于篇幅有限，有些细节没有说完。如果您有任何需求，请发表评论或直接与我联系。如何使用echats图表插件在小程序中使用图表是一个很常见的需求。好在有比较成熟的echarts组件。使用方法很简单，按照官方文档按照规则按照官方链接进行配置即可，但是需要注意的地方：echarts.js原版比较大，小程序打包有大小限制.建议去echarts官网按需打包，需要写样式上面：ec-canvas{width:100%;height:100%;}3.在微信开发工具中预览echarts图表显示有问题，但在真机上并没有出现程序大小超出限制的情况。打开程序，拥有良好的用户体验。所以小程序的大小是有限制的（总共不超过20M，每包不超过2M），但是随着程序越来越复杂，页面越来越多，难免会超过限制。好在官方给出了分包方案。按照规则，官方链接简单的说就是主页面（tabbar关联的页面）先下载到客户端显示——主包的其他次级页面（详情页）可以在需要的时候下载显示.-可以有任意数量的分包，这样可以有效地控制每个包的大小。核心配置代码：app.js/app.wepypages:[//主要封装tabpages'pages/index','pages/bill','pages/mgMenu','pages/my',],subPackages:[{//分包配置是一个代表多个根的数组，可以添加：'subPackage1',//subPackage1是分包目录的名字，你可以选择你想要的名字pages:["pages/login",//login"pages/billDetail",//账单明细"pages/shopDetail",//商品申请]}],注意：每次添加新页面时，页面路径都要添加到对应包的页面中小程序的大小，项目中的静态文件比如（开源的js、字体、图片、视频）等都可以丢到CDN上，一方面减小包体积，另一方面增加阅读速度。CDN可以是付费的，比如阿里，也可以是免费的CDN，比如BootCDN、jsdelivr（国内最近慎用）、unpkg国内版等，有兴趣的我会单独写一篇关于CDN免费的文章。如何使用vantUI组件在当前快速迭代的趋势下，UI库非常重要。我个人喜欢开源的vantUI。当然其他的UI库也很好，看个人喜好。遵循规则，下面分享官方链接，分享我使用vant组件的一些心得：我选择下载编译好的组件代码，将项目需要哪些组件复制到自己的组件中。单击此处使用此方法。有一个缺点，就是如果使用的组件依赖于其他组件，则需要将它们一起复制。依赖组件可以在component/index.json中看到。例如
