写在后面
因微信小程序声称解决了前端程序员头痛的兼容问题，只须要依照腾讯官网那一套规定进行编码就能够满足不同的终端需要。所以去年下半年我就用微信小程序实现了咱们公司外部应用的一个我的项目（目前应用人数700+），上面是我在摸索过程中的一些总结经验，给前面的同学铺铺路，让大家早点上班回家陪老婆孩子。
你将学习到：
- 如何应用自定义tabbar及权限管制
- 如何应用echarts图表插件
- 程序大小超过限度如何分包
- 如何应用vantUI组件，解决弹出层滑动穿透页面滚动
- 自定义头部及滚动页面浮现到顶部
- 如何实现自动更新，以及手动更新计划
- 外部应用软件须要登录，如何通过审核
其它一些坑 - 应用wepy设置data后为何不更新视图
- wepy methods中怎么拜访本人的methods办法
- 小程序命名可能违反规定
- iOS上工夫Date初始化的坑
1 如何应用自定义tabbar及权限管制
应用过原生tabbar的同学都晓得，原生tabbar太丑了，而且想自定义一些款式齐全没法，大多数app最终都会有自定义tabbar的需要。
按规矩先丢官网链接
应用步骤：
拷贝官网demo中的custom-tab-bar文件到根目录
我用的wepy框架，则复制到src目录下如图，没错自定义tabbar局部需应用原生的写法，其余本人的业务页面应用wepy框架。
入口文件app.json启用自定义tabbar
wepy框架在app.wpy config对象中
list中的pagePath是本人页面的目录是必须的，其余属性都能够删除，因为具体的tabbar款式（如图片和色彩）还是得在自定义custom-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": "组件"//这里写了不起作用可正文 }, { "pagePath": "index/index2", "iconPath": "image/icon_API.png",//这里写了不起作用可正文 "selectedIconPath": "image/icon_API_HL.png",//这里写了不起作可正文 "text": "接口"//这里写了不起作用可正文 } ] },回到自定义custom-tab-bar/index.js
有如下代码：
Component({ data: { selected: 0,//默认选中项下标 color: "#7A7E83",//默认项字体色彩 selectedColor: "#3cc51f",//选中项字体色彩 list: [{ 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", text: "接口" }] }, attached() { }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({url}) //this.setData({ 正文掉这三行 // selected: data.index //}) } }})正文掉this.setData()办法是因为跳转的tab页面也会setData一次，防止反复设置data导致闪动，持续往下看。
为每个tab页面生命周期show增加代码
在wepy框架中是onShow办法。
获取以后页面对象this.$wxpage
onShow() { if (typeof this.$wxpage.getTabBar === 'function' && this.$wxpage.getTabBar()) { this.$wxpage.getTabBar().setData({ selected: 0//每个tab页在配置的list数组中下标不同，须要相应批改 }) }}不难发现，在每次进入tab页的时候都会获取以后页面的bar对象（tabbar对象在每个tab页面中不是同一个，都是一个新的对象），而后设置selected。所以在下面的switchTab办法中正文掉setData办法，因为反复了。
菜单右上角数字info实现及更新
- list数组中增加属性infoNum（须要的菜单项才增加）。
- wxml代码中按条件渲染infoNum（有值且大于0才显示）。
- 每个tab页show生命周期中获取info数字后setData。
this.$wxpage.getTabBar().setData({ ['list[1].infoNum']: infoNum //更新info数字})['list[1].infoNum'] 更新多层对象的形式，是不是有点想吐槽了依据登陆的角色管制菜单项
我置信有很多同学也有这个需要，依据登陆的用户不同，看到的底部菜单也不同，例如：管理员。
实现的形式和info十分类似
- list数组中增加属性show
- wxml代码中 wx:for循环中中按条件增加show和hide的className
- 登陆后获取用户权限列表，判断要显示或暗藏的项
调用办法更新bar实例的data
为了不便，能够在custom-tab-bar/index.jsmethods中创立办法,而后在每个tab页面调用：this.$wxpage.getTabBar().yourFuncName(balabala)，留神是每个bar页，因为下面说到每个tab页bar实例是独立的。原生页面获取TabBar实例间接
this.getTabBar()即可。
因篇幅无限有些细节并没有说完，有需要可留下评论或间接分割我。
如何应用echats图表插件
在小程序中应用图表是十分常见的需要，好在曾经有了比拟成熟的echarts组件。应用办法很简略，按规矩先甩官网链接
依照官网文档配置即可，但须要留神的点：
- 原版echarts.js比拟大,小程序打包有大小限度，举荐到echarts官网按需打包
- 须要在style中写上：
ec-canvas { width: 100%; height: 100%;}3.在微信开发工具中预览echarts图表显示有问题，然而在真机上没呈现
程序大小超过限度如何分包
小程序为了用户保障疾速关上程序、有一个良好的用户体验。所以限度了小程序的大小（总共不超过20M,每个包不超过2M），然而咱们随着程序越来越简单、页面越来越多，少不了会超过限度，还好官网给了一个分包的计划。按规矩官网链接
- 简略说就是次要的页面（tabbar关联的那几个页面）优先下载到客户端并展现-主包
- 其它主要页面（详情页）能够在须要的时候下载展现。-分包
其中分包能够有任意多个，这样就能无效的管制每个包的大小。
外围配置代码：
app.js/app.wepy
pages: [ //主包tab页 'pages/index', 'pages/bill', 'pages/mgMenu', 'pages/my',],subPackages: [{//分包配置，是数组代表能够增加多个 root: 'subPackage1',//subPackage1是分包目录名可取本人想要的名称 pages: [ "pages/login", //登录 "pages/billDetail", //账单详情 "pages/shopDetail", //商品申请 ]}],留神：每次新增一个页面都要在相应包的pages中增加页面门路
说到小程序的大小问题，我的项目中的动态文件例如（开源js、字体、图片、视频）等能够丢到CDN下面去，一方面缩小打包大小，一方面减少读取速度。CDN能够应用免费的如阿里，也能够应用收费的CDN，如BootCDN、jsdelivr(最近国内很慢慎用)、unpkg国内版等。如果大家感兴趣我将独自写一篇白嫖CDN的文章。
如何应用vantUI组件
在当初疾速迭代的趋势下，UI库显得就很重要了，集体比拟喜爱有赞开源的vantUI，当然其余UI库也有十分不错的，看集体爱好。按规矩甩出官网链接
上面分享下我用vant组件的一些心得：
我抉择的是下载编译后的组件代码，我的项目须要哪个组件就拷贝到本人的components中，点这里
应用这个办法有个弊病，就是应用的组件如果依赖其余组件，须要一并拷贝。依赖的组件能够看组件/index.json
例如<van-button>组件的index.json如下：{ "component": true, "usingComponents": { "van-icon": "../icon/index", "van-loading": "../loading/index" }}能够看到
<van-button>组件还依赖于<van-iconn>和<van-loading>组件，这时候咱们把<van-iconn>和<van-loading>组件也拷贝到本人的components目录中即可。
2.在页面中应用前需在usingComponents中配置，且配置时的门路是绝对地位，不能像import中用@的模式，必须用..来寻找门路。
usingComponents: { "van-action-sheet": "../components/lib/action-sheet/index", "van-toast": "../components/lib/toast/index", "van-picker": "../components/lib/picker/index", "van-popup": "../components/lib/popup/index", "van-search": "../components/lib/search/index"},Popup弹窗阻止页面滚动办法
当咱们用Popup弹出层弹出工夫选择器，或者picker等。此时滚动弹出层内容时，底部的主页面内容也会滑动，影响用户操作，咱们能够用<scroll-view>包裹住主内容默认scroll-y="true"，当咱们事实弹出层的时候设置属性scroll-y="{{false}}"。
通过变量管制即可：
<scroll-view scroll-y="{{!noScroll}}" bindscroll="scrol">
在弹出层显示或暗藏时设置noScroll为true或者''（空字符串） 。留神"false"这个字符串布尔值其实是true
另外如果页面自身只有一屏内容，没有滚动需要的时候，能够通过页面config设置disableScroll：false
外部应用软件如何通过审核
企业外部的软件大多数都是进入程序必须登录能力持续应用，但不合乎小程序官网的设计规范。之前咱们公司就是进入页面就跳转到登录页，后果审核不通过。
如果你的页面保密性没那么强，能够默认显示主页及菜单，然而数据都是留白。在要害中央提醒登录后可见，
咱们公司小程序访客模式如下：
如果你的软件保密性较强，必须受权用户登录才行，能够在发动审核时提供一个体验账号给审核人员，并且注明软件只是企业内容应用。
自定义头部及滑动浮现在顶部
自定义头部也是比拟常见的需要，上面阐明我是如何实现的
- 页面config设置
navigationStyle：'custom' - wxml中退出代码
<view class="cus-head" hidden="{{!showCusHead}}" style="height:{{cusHead}}"></view><view class="head-title" style="top:{{titleTop}}">我是页面题目</view>cus-head：自定义头部块 fixed布局 。
head-title：题目 fixed布局，保障 z-index在cus-head之上，top值要保障同胶囊雷同，line-height保障同胶囊高度一致。以下是获取胶囊的api：
const res = wx.getMenuButtonBoundingClientRect()console.log(res.height)//获取胶囊高度console.log(res.top)//获取胶囊top值cusHead:自定义头部，高度要保障大于胶囊高度，可更据本人须要调整。
showCusHead:管制显示暗藏，在滚动到肯定水平时显示，滚回顶部时暗藏
- 增加滚动监听函数
scroll(e) { //滚动时触发 wepy框架 原生应用setData办法 const top = e.detail.scrollTop; if (top >= 10) { this.showCusHead = true; } else { this.showCusHead = false; } this.$apply();},如何实现自动更新，以及自动更新时的手动更新备用计划
在app.wpy或app.js生命周期show/onLaunch中退出以下代码。本人能够写成一个函数间接调用。
残缺代码参考：
// 获取小程序更新机制兼容if (wx.canIUse('getUpdateManager')) { const 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 ( res) { self.autoUpdate() return; //第二次提醒后，强制更新 if (res .confirm ) { // 新的版本曾经下载好，调用 applyUpdate 利用新版本并重启 updateManager .applyUpdate() } else if ( res .cancel ) { //从新回到版本更新提醒 self.autoUpdate() } } }) } } }) }) updateManager.onUpdateFailed(function () { // 新的版本下载失败 wx.showModal({ title: '更新提醒', content: '新版本曾经上线啦~，请您删除以后小程序，从新搜寻关上', }) }) } })# } else { // 如果心愿用户在最新版本的客户端上体验您的小程序，能够这样子提醒 wx.showModal({ title: '提醒', content: '以后微信版本过低，无奈应用该性能，请降级到最新微信版本后重试。' })}备用更新计划
在小程序页面中例如集体核心，退出版本号，给版本号增加点击事件，点击后再次调用下面的办法，进行手动更新。
其它一些坑
wepy框架设置data后要手动调用this.$applay()视图才会更新
对于应用vue的同学很不敌对，常常会忘了写导致视图没有更新，认为是出什么bug了
wepy methods中无奈通过this.funname拜访本人
- 要用this.funname间接拜访的话须要写在最外层（同生命周期同层级）
- 如果硬要间接调用可应用 this.methods.funcName.call(this)
iOS零碎上new Date报错问题
iOS零碎上通过new Date('2021-1-1 12:00:00')这种通过-连贯的字符串无奈辨认，可通过 .replace(/\-/g, '/')办法替换成'/'解决。
小程序命名可能违反规定
小程序上线时的名字是十分要害的，名字在某种程度上是引流的工具，然而小程序官网对名称有十分严格的规定，如果不依照规定取名，上线后会强行下架。咱们公司就取了“电费”这个词语，而后要求整改改名，因为这个词语是政府性质的，公有企业不能应用。官网连贯
感激
因为是第一次写这类技术文章，有诸多不足之处，感激你看到最初，如果这篇文章对你有帮忙请不要忘了给我点赞、评论。