原创内容，转载请注明原文网址：http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2019/0505/485.html
最近常州软件技术培训App项目要将其中一个模块抽出来做成小程序， 功用包含 ：底部的Tab栏，顶部的标题栏 这里选择自定义的缘由有两点： narBar 微信原生不支持设置返回图标，且在 Android 上标题是居左显现，在 iOS 上是居中显现。 ...
最近App项目要将其中一个模块抽出来做成小程序， 功用包含 ：底部的Tab栏，顶部的标题栏
这里选择自定义的缘由有两点：
narBar 微信原生不支持设置返回图标，且在 Android 上标题是居左显现，在 iOS 上是居中显现。
底部的 tabBar 不支持点击跳页面，图标规划不支持超越 tabBar 的高度。
下面两张图是简单完成的效果。
完成剖析 源码地址
完成剖析
以上效果我也是参考的网上例子来完成，可看该效果原作的剖析。或者看看下面我的了解。
微信小程序自定义组件
官方文档地址 developers.weixin.qq.com/miniprogram…
文档中阐明了自定义组件
能够将页面内的功用模块笼统成自定义组件，以便在不同的页面中反复运用。
也能够将复杂的页面拆分红多个低耦合的模块，有助于代码维护。
创立自定义组件
在最新的开发工具中曾经支持直接创立组件了，创立一个 components目录，然后在创立一个组件关于的目录，例如这里创立的是tabbar目录，然后在该目录点击鼠标右键选择新建Component，输入组件称号即可，例如这里输入的是tabbar。
组件模板和款式
官方文档 developers.weixin.qq.com/miniprogram…
相似于页面，自定义组件具有常州平台运营本人的wxml 模板和 wxss 款式
在组件模板中能够提供一个<slot>节点，用于承载组件援用时提供的子节点。这个<slot>节点相当于组件占位符。
默许状况wxml中只支持一个<solt>节点，能够设置支持多个<solt>节点：
规划编写好之后就开端设置款式了，在页面中能够经过wxss来定义，也能够经过设置组件的class称号，然后再调用该组件的 wxss中定义款式。
组件的wxss默许是不支持app.wxss款式的，但是能够像设置多<slot>一样，停止设置：
模板数据绑定
经过调用 Component结构器时能够指定组件的属性、数据、办法等。developers.weixin.qq.com/miniprogram…
Component({
// 细致运用看文档
behaviors: [],
properties: {
myProperty: { // 属性名
type: String, // 类型（必填），目前承受的类型包括：String, Number, Boolean, Object, Array, null（表示恣意类型）
value: '', // 属性初始值（可选），假如未指定则会依据类型选择一个
observer(newVal, oldVal, changedPath) {
// 属性被改动时执行的函数（可选），也能够写成在methods段中定义的办法名字符串, 如：'_propertyChange'
// 通常 newVal 就是新设置的数据， oldVal 是旧数据
}
},
myProperty2: String // 简化的定义方式
},
data: {}, // 私有数据，可用于模板渲染
lifetimes: {
// 生命周期函数，能够为函数，或一个在methods段中定义的办法名
attached() { },
moved() { },
detached() { },
},
// 生命周期函数，能够为函数，或一个在methods段中定义的办法名
attached() { }, // 此处attached的声明会被lifetimes字段中的声明掩盖
ready() { },
pageLifetimes: {
// 组件所在页面的生命周期函数
show() { },
hide() { },
resize() { },
},
methods: {
onMyButtonTap() {
this.setData({
// 更新属性和数据的办法与更新页面数据的办法相似
})
},
// 内部常州微信公众平台办法倡议以下划线开头
_myPrivateMethod() {
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange(newVal, oldVal) {
}
}
})
复制代码
在上面的代码中我们能够经过properties和setData分离完成动态设置数据，在methods中能够定义办法，用于给外部调用，也就是组件间的通讯。
组件间通讯
能够经过triggerEvent或者直接获取组件this.selectComponent示例来调用办法和属性。
triggerEvent
父组件还能够经过 this.selectComponent 办法获取子组件实例对象，这样就能够直接访问组件的恣意数据和办法。
开端运用组件
在页面的json文件中配置组件的途径，如下：
{
"usingComponents": {
"navbar": "/components/navbar/index",
"tabbar": "/components/tabbar/tabbar"
}
}
复制代码
在页面的wxml规划中添加，如下：
// 引入组件
<navbar navbar-data='{{nvabarData}}'></navbar>
// 内容
<view class="home-page">
<view style='margin-top: {{height}}px;margin-bottom:10px;'></view>
</view>
// 引入组件
<tabbar tabbar="{{tabbar}}"></tabbar>
复制代码
自定义 tabBar 组件剖析
看文章顶部原作者的剖析。下面引见一些坑。
固然在组件的js文件中曾经设置了tabbar 但是在app.json中还是需求配置tabbar，细致配置可看文章顶部github链接。
在页面的onload中还需求再设置一次
wx.hideTabBar({
})
复制代码
由于从分享页面点击左上角的首页图标回到首页会呈现两个tabbar，所以在首页还需求再躲藏一次tabbar.
留意途径问题，新版的开发工具components文件应该在miniprogram下，和pages为同级，否则在引入组件的途径中可能会出错。
自定义 navBar 组件剖析
小程序中分享进来的页面是没有返回按钮的，为了用户可以再次回到我们的小程序中，我们在 navbar 上自定义了一个返回按钮和返回首页的按钮。
这里经过小程序的场景值和运用一个全局的变量share来判别能否是从分享页面进来。在 app.js中做了处置：
// 判别能否由分享进入小程序
if (options.scene == 1007 || options.scene == 1008) {
this.globalData.share = true
} else {
this.globalData.share = false
};
复制代码
为了适配顶部的高度，在wxml规划中还动态设置了一个margin-top的高度，这个高度经过获取系统的状态栏高度得到。
getSystemInfo: function () {
let t = this;
wx.getSystemInfo({
success: function (res) {
// 获取高度
t.globalData.height = res.statusBarHeight;
}
});
},
复制代码
然后在页面的data中设置组件的数据和状态栏的高度：
data: {
// 组件所需的参数
nvabarData: {
showCapsule: 0, //能否显现左上角图标 1表示显现 0表示不显现
title: '让故事发作', //导航栏 中间的标题
},
// 此页面 页面内容距最顶部的间隔
height: app.globalData.height * 2 + 20,
// tabbar
tabbar: {},
},
复制代码
原常州微信小程序开发作者在完成图标的显现和躲藏局部逻辑和我的预期不分歧，我想完成的是从分享页面进入才显现左上角的返回首页图标，正常也就只显现返回按钮。修正点后的wxml如下：
<view bindtap='_navback' wx:if='{{!share}}'>
<image src='/images/back.png' mode='aspectFill' class='back-pre'></image>
</view>
// 这里把 share 取反去掉
<view class='navbar-v-line' wx:if='{{share}}'></view>
// 这里把 share 取反去掉
<view bindtap='_backhome' wx:if='{{share}}'>
<image src='/images/icon/icon_home.png' mode='aspectFill' class='back-home'></image>
</view>
上篇：上一篇：将异步回调接口 Promise 化
下篇：下一篇：在小程序中运用 React with Hooks
