共计 7100 个字符，预计需要花费 18 分钟才能阅读完成。
写在后面
因微信小程序声称解决了前端程序员头痛的兼容问题，只须要依照腾讯官网那一套规定进行编码就能够满足不同的终端需要。所以去年下半年我就用微信小程序实现了咱们公司外部应用的一个我的项目（目前应用人数 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, '/')办法替换成 '/' 解决。
小程序命名可能违反规定
小程序上线时的名字是十分要害的，名字在某种程度上是引流的工具，然而小程序官网对名称有十分严格的规定，如果不依照规定取名，上线后会强行下架。咱们公司就取了“电费”这个词语，而后要求整改改名，因为这个词语是政府性质的，公有企业不能应用。官网连贯
感激
因为是第一次写这类技术文章，有诸多不足之处，感激你看到最初，如果这篇文章对你有帮忙请不要忘了给我点赞、评论。