微信小程序语法

1. • 小程序常用组件

view组件

<view>hai~</view>

scroll组件

<!-- 
    1.该组件必须要有固定的宽高才可以滚动
    2.scroll-y 纵向滚动
    3.scroll-x 横向滚动
-->
<scroll-view class="container" scroll-y style="height=120px;">
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

swiper轮播图组件

<!-- 轮播图组件 -->
<swiper class="swiper-lun">
   <swiper-item>a</swiper-item>
   <swiper-item>b</swiper-item>
   <swiper-item>c</swiper-item>
</swiper>

轮播图组件内部属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0,0,0,.3)	指示点颜色
indicator-active-color	color	#00000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动

button组件

<!-- button按钮 -->
<!-- 按钮颜色 type="primary" -->
<button>普通按钮</button>
<button type="primary">主要按钮</button>
<button type="warn">删除按钮</button>
<!-- 按钮大小 size="mini" -->
<button size="mini">按钮</button>
<button type="primary" size="mini">主要按钮</button>
<button type="warn" size="mini">删除按钮</button>
<!-- 空背景按钮 plain -->
<button plain>普通按钮</button>
<button type="primary" plain size="mini">主要按钮</button>
<button type="warn" plain size="mini">删除按钮</button>

image组件

<!-- image组件 -->
<image src="/images/img0.jpg" mode="widthFix"></image>

image组件内部属性

mode值	说明
scaleToFill	(默认值)缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

text组件和rich-text组件

<!-- 允许复制内容/// view组件是不允许复制内容的 不可以识别html标签 -->
<text selectable>
heihiehiehie
</text>
<!-- 允许复制内容/// 可以识别html标签 -->
<rich-text nodes="<h1>hiehie</h1>"></rich-text>

2. • 小程序事件处理函数

小程序api分为3大类

1. 事件监听api

• 特点以on开头，用来监听某些事件的触发

• 举例：wx.onWindowResize(function callback)监听窗口尺寸的变化的事件

2. 同步api

• 特点1: 以Sync 结尾的 API 都是同步 API

• 特点2:同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

• 举例: wx.setStorageSync('key'value)向本地存储中写入内容

3. 异步api

• 特点: 类似于iQuery 中的 $.ajax(options)函数，需要通过 success、fail、complete 接收调用的结果

• 举例: wx.request()发起网络数据请求，通过 success 回调函数接收数据

bind与catch的区别

bind事件绑定不会阻止冒泡事件往上冒泡，简单来说，bind所绑定的事件对应会向上传递，让自己的父组件响应对应的事件。而catch事件会把对应的事件阻拦在自己这里，只有自己能够响应对应事件。

事件函数

• 单击事件: bindtap

• 长按事件: bindlongpress、bindlongtap

• 键盘输入事件: bindinput

• 回车事件: bindconfirm

• 输入框聚焦: bindfocus

• 输入框失焦: bindblur

• value改变事件: bindchange

• 提交表单事件：bindsubmit

• 重置表单事件：bindreset

触摸事件

• 触摸动作开始：bindtouchstart

• 触摸动作结束：bindtouchend

• 触摸过程移动：bindtouchmove

• 触摸动作被打断：bindtouchcancel

双击事件

要想实现双击事件，只能通过我们写代码判断用户点击是否是双击行为。 思想：记录下用户两次点击的时间戳，两个时间戳相减如果小于300毫秒，则判断是双击事件。

双向数据绑定

<!-- 双向数据绑定 -->
<input value="{{msg}}" bindinput="inputHandle"/>

inputHandle(e) {
    // console.log(e.detail.value);
    // this.setData用于修改data中的参数
    this.setData({
      msg: e.detail.value
    })
  }

3. • 条件判断语句，列表渲染语句

多条件判断

<view wx:if="{{type === 1}}">1</view>
<view wx:elif="{{type === 2}}">2</view>
<view wx:else>3</view>

block搭配wx:if 相当于vue中的template

<block wx:if="{{true}}">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</block> 

通过hidden隐藏元素

<!-- 当hieedn的参数为true则隐藏 false显示 -->
<view hidden="{{true}}">1</view>

列表渲染

<view wx:for="{{list}}" wx:key="id">
  name:{{item.name}},
  title:{{item.title}},
  index:{{index}}
</view>

<!-- 更改item，和index的名字 -->
<view wx:for="{{list}}" wx:for-index="ind" wx:for-item="name">
  name:{{name.name}},
  title:{{name.title}},
  index:{{ind}}
</view>

4. • 全局配置文件

常用配置项

• pages 记录当前小程序所有页面的路径。

• window 全局设置小程序窗口的外观。

1. window全局设置小程序窗口的外观常用配置项。

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#00000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
backgroundColor	HexColor	#ffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

• tabBer 设置小程序底部tabBer效果。

2. tabBer的6部分组成

• backgroundColor: tabBar 的背景色

• selectedlconPath: 选中时的图片路径

• borderStyle: tabBar 上边框的颜色

• iconPath: 未选中时的图片路径

• selectedColor: tab 上的文字选中时的颜色

• color: tab 上文字的默认 (未选中)颜色

3. tabBer节点配置

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar 的位置，仅支持 bottom/top
borderStyle	String	否	black	tabBar 上边框的颜色，仅支持 black/white
color		否		tab 上文字的默认 (未选中)颜色
selectedColor		否		tab 上的文字选中时的颜色
backgroundColor		否		tabBar 的背景色
list		是		tab 页签的列表,最少 2个、最多 5个tab

4. 每个tab配置

类型	属性	必填	描述
pagePath	String	是	页面路径，页面必须在 pages 中预先定义
text	String	是	tab 上显示的文字
iconPath	String	是	未选中时的图标路径;当 postion 为 top 时，不显示 icon
selectedlconPath	String	是	选中时的图标路径;当 postion 为 top 时，不显示icon

• style 是否启用新版组件样式。

• 单独页面常用配置项。

5. 配置每个单独页面的样式

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色，如#000000
navigationBarTextStyle	String	white	当前页面导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		当前页面导航栏标题文字内容
backgroundColor	HexColor	#ffffff	当前页面窗口的背景色
backgroundTextStyle	String	dark	当前页面下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新的效果
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为 px

5. • 网路数据请求

注意事项 ！！！！

1.域名只支持https协议
2.域名不能使用IP地址或localhost
3.域名必须经过ICP备案
4.服务器域名一个月内最多修改五次

配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

发送get请求

// 发起get请求
  getInfo() {
    wx.request({
      // 接口地址，必须基于https协议
      url: 'https://www.escook.cn/api/get',
      // 请求方式
      method:'GET',
      // 发送到服务器的数据
      data:{
        name:'zs',
        age:18
      },
      // 请求成功后返回数据
      success:(res) => {
        console.log(res.data)
      }
    })
  },

发送post请求

// 发起post请求
  postInfo() {
    wx.request({
     // 接口地址，必须基于https协议
      url: 'https://www.escook.cn/api/post',
     // 请求方式
      method: 'POST',
     // 发送到服务器的数据
      data:{
        name:'ls',
        age:20
      },
     // 请求成功后返回数据
      success:(res) => {
        console.log(res);
      }
    })
  },

6. • 页面导航

声明式导航

1. 在使用<navigator>组件跳转到指定页面时，需要指定url属性和open-type属性

• url 表示要跳转的页面的地址，必须以 / 开头

• open-type 表示跳转方式，必须为 switchTab

代码示例：

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

2. 在使用<navigator>组件跳转到非tabBer页面的时候要将open-type的值改为navigate

代码示例：

<navigator url="/pages/message/message" open-type="navigate">导航到消息页面</navigator>

3. 声明式导航中后退导航

如果要后退到上一个页面或者多级页面，则需要指定open-type属性和delta属性

• open-type 的值必须是navigateBack，表示要进行后退导航

• delta 的值必须是数字，表示要回退的层级

示例代码：

<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>

编程式导航

1. 调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。其中 0bject 参数对象的属性列表如下:

属性	类型	是否必选	说明
url	string	是	需要跳转的 tabBar 页面的路径，路径后不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数 (调用成功、失败都会执行)

2. 调用wx.navigateTo(Object object)方法，可以跳转到非tabBer页面。其中Object参数对象的属性列表如下：

属性	类型	是否必选	说明
url	string	是	需要跳转到的非 tabBar 页面的路径，路径后可以带参数
success	function	是	接口调用成功的回调函数
fail	function	是	接口调用失败的回调函数
complete	function	是	接口调用结束的回调函数 (调用成功、失败都会执行)

3. 调用 wx.navigateBack(Object object)方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下:

属性	类型	默认值	说明	是否必选
delta	number	1	否	返回的页面数，如果 delta 大于现有页面数，则返回到首页
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数 (调用成功、失败都会执行)

7. • 上拉加载下拉刷新

下拉刷新

属性	类型	默认值	作用
enablePullDownRefresh	boolean	false	开启下拉刷新
onPullDownRefresh	function		监听下拉动作
wx.stopPullDownRefresh	function		关闭下拉刷新

上拉触底

属性	类型	默认值	作用
onReachBottomDistance	number	50	设置页面上拉距离触底的距离
onReachBottom	function		当上拉触底后触发该函数

8. • 小程序生命周期

应用生命周期函数（只能在app.js中触发）

 // app.js 文件
App({
// 小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作.
onLaunch:function(options) { },
// 小程序启动，或从后台进入前台显示时触发。
onShow : function(options) { },
// 小程序从前台进入后台时触发。
onHide : function() { }
 })

页面生命周期函数

小程序的页面生命周期函数需要在页面的 js 文件中进行声明，示例代码如下:

// 页面的.js文件
Page((
    onLoad:function(options){  },// 监听页面加载，一个页面只调用1次
    onShow:function(){  },       // 监听页面显示
    onReady : function() { },    // 监听页面初次渲染完成，一个页面只调用1次
    onHide: function() { },      // 监听页面隐藏
    onUnload: function() { }     // 监听页面卸载，一个页面只调用1次
})

组件生命周期函数

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

组件所在页面的生命周期函数

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期例如:每当触发页面的 show 生命周期函数的时候，我们希望能够重新生成一个随机的 RGB 颜色值在自定义组件中，组件所在页面的生命周期函数有如下3个，分别是:

生命周期函数	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object Size	组件所在的页面尺寸变化时执行

9. • 自定义组件

局部引用组件

在页面的json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下：

 // 在页面的 .json 文件中，引入组件
{
    "usingComponents":{
        "my-test1": "/components/test1/test1"
    }
}
// 在页面的 .wxml 文件中，使用组件
// <my-test1></my-test1>

全局引用VS局部引用

根据组件的使用频率和范围，来选择合适的引用方式

• 如果某组件在多个页面中经常被用到，建议进行“全局引用

• 如果某组件只在特定的页面中被用到，建议进行“局部引用

自定义组件开启样式隔离或关闭样式隔离通过options配置项

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
apply-shared	否	表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
shared	否	表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件

自定义组件接受外界传递到组件中的数据

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下

Component({
// 属性定义
properties: {
max:{
// 完整定义属性的方式[当需要指定属性默认值时，建议使用此方式]
type: Number，// 属性值的数据类型
value: 10// 属性默认值
}
max:Number  // 简化定义属性的方式[不需指定属性默认值时，可以使用简化方式]
    })
// <my-test1 max="10"></my-test1>

自定义组件数据侦听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下:

Component({
  observers: {
    '字段A, 字段B': function(字段A的新值，字段B的新值) {
      console.log(newa1, odlb2);
      this.setData({
        sum: newa1 + odlb2
      })
    }
  }
  })

数据监听器支持监听对象中单个或多个属性的变化

Component({
  observers: {
    '对象.A, 对象.B': function(A的新值，B的新值) {
    // 触发此监听器的 3 种情况:
    // [为属性A赋值]使用 setData 设置 this.data.对象.属性A 时触发
    //[为属性B赋值]使用 setData 设置 this.data.对象.属性B 时触发
    // [直接为对象赋值]使用 setData 设置 this.data.对象 时触发
    }
  }
  })

自定义组件插槽

在自定义组件的 wxm[结构中，可以提供一个 <slot> 节点(插槽)，用于承载组件使用者提供的 wxml结构。

单个插槽

<!-- 父组件 -->
<my-test2>
2222
</my-test2>

<!-- 子组件 -->
<view>
    <!-- 占位 -->
  <slot></slot>
</view>

多个插槽

Component({
  options:{
    multipleSlots:true // 开启多个插槽
  }
 }   

<!-- 父组件 -->
<my-test2>
  <view slot="aa">2222</view>
  <view slot="bb">8888</view> 
</my-test2>  

<!-- 子组件 -->
<view>
  <slot name="aa"></slot>
  <view></view>
  <slot name="bb"></slot>
</view>

10. • 组件通信

父子组件通信

1. 属性绑定

• 用于父组件向子组件的指定属性设置数据，仅能设置json兼容的数据

<!-- 父组件内容 -->
<my-test2 num="{{99}}">

</my-test2>

<!-- 子组件内容 -->
Component({
   properties: { <!-- 接收父组件传递的数据 -->
    num:Number
  },
 }  

事件绑定

• 用于子组件向父组件传递数据，可以传递任意数据

<!-- 父组件 -->
<!-- bind:sync="syncNum"自定以事件用于获取子组件向父组件传递的数据 -->
<my-test2 bind:sync="syncNum"></my-test2> <!-- my-test2子组件 -->

// 子组件 接受父组件传递的函数  
methods: {
    addja() {
      this.triggerEvent('sync',{value:this.properties.num}) // 通过triggerEvent方式将子组件数据传递给父组件
    }
  }

// 父组件通过detail接受子组件传递的数据
  syncNum(e){
    console.log(e.detail.value);
  },

获取组件实例

• 父组件还可以通过this.selectComponent()获取子组件实例对象

• 这样就可以直接访问子组件内的任意数据

<!-- 给子组件一个选择器只能是id或者class -->
<my-test2 class="test2"></my-test2>
<!-- 绑定点击事件点击后获取子组件 -->
<button bindtap="getMyTest2">获取子组件</button>

// 获取子组件
 getMyTest2() {
   const obj = this.selectComponent('.test2') // 通过this.selectComponent获取子组件只能用id或者class选择器
   obj.setData({ // 获取子组件后就可以调用该组件中的属性及方法
     num: obj.properties.num + 1
   })
 },

11. • behaviors用于实现代码共享

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。

1. 在根目录创建behaviors文件夹

2. 文件夹内创建xxx.js文件

module.exports = Behavior({
  data:{a：1},
  methods:{},
  properties:{}
})

3. 使用的地方导入const beh = require('./../../behaviors/my-behaviors')

4. 配置behaviors

Page({
    behaviors:[beh] // 配置共享的数据
 }）

5. 页面调用

<view>{{a}}</view>

behavior 常用节点

可用节点	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其它的 behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数

12. • 实现小程序请求Promise化

1. 安装miniprogram-api-promise这个第三方包。

npm i --save miniprogram-api-promise@1.0.4

2. 在入口文件app.js中配置如下：在入口文件app.js中配置如下：

// 导入miniprogram-api-promise
import { promisifyAll } from "miniprogram-api-promise"
// 定义wxp存储wx中回调函数转换成promise化的函数
const wxp = wx.p = {}
// 将wx中回调函数转换为promise风格
promisifyAll(wx, wxp)

3. 调用promise风格

// 调用promise风格回调函数  
async getInfo() {
    const res = await wx.p.request({
      url:'https://www.escook.cn/api/get',
      method:'GET',
      data:{
        name:'zs',
        age:28
      }
    })
    console.log(res)
  }

13. • 全局数据共享

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享

• mobx-miniprogram 用来创建 Store 实例对象

• mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

• 安装这两个包完成后创建store文件夹，并配置store的实例对象

// 导入包
import { observable,action } from "mobx-miniprogram"

// 创建store实例对象
export const store = observable({
  numA:1,
  numB:1,
 // 定义计算属性
  get num() {
    return this.numA + this.numB
  },
  // 修改store中的数据
  numA1: action(function (step) {
    this.numA = step
  })
})

在页面使用store中的数据

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from "../../store/store"
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      // 配置createStoreBindings
    this.storeBingings = createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'], // 字段
      actions:['numA1'] // 修改store函数
    })
  },
    /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    // 清理数据
    this.storeBingings.detroyStoreBindings()
  },
  // 改变store数据
  chanegNum(e) {
    this.numA1(e.target.dataset.step)
  }
})


// ---html---
// <view>{{numA}}+{{numB}} = {{sum}}</view>
// <van-button type="default" size="mini" bindtap="chanegNum" data-step="{{1}}">+1</van-button>
// <van-button type="primary" size="mini" bindtap="chanegNum" data-step="{{-1}}">-1</van-button>

在组件中使用store数据

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from "../../store/store"
Component({
  behaviors:[storeBindingsBehavior], // 通过 storeBindingsBehavior 来实现自动绑定
  storeBindings:{
    store, // 指定要绑定的store
    fields:{ // 指定要绑定的字段数据
      numA: () => store.numA,             // 绑定字段方式 1
      numB: (store) => store.numB,        // 绑定字段方式 2
      sum:'sum'                           // 绑定字段方式 3
    },
    actions:{ // 自定要绑定的方法
      numA1:'numA1'
    }
  }
})

14. • 分包

app.json文件

 // app.json
  "subPackages": [ // 配置分包
    {
      "root": "pakA", // 根目录
      "pages": [ // 指定路径
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
      "independent": true // 开启独立分包 
  ]

包的预下载

// app.json文件  
// 包的预下载
  "preloadRule": {
    "pages/contact/contact":{
      "packages": ["要预下载的包名"], // 预下载那个包
      "network": "all" // all 或者 wifi
    }
  }

15. • 自定义tabBer

1. 在app.json

 "tabBar": {
    "custom": true, // 开启自定义tabBer
    "list": [{ // list要保留
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/bumenchuruguanli.png",
        "selectedIconPath": "/images/部门出入管理.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/shujufenxi.png",
        "selectedIconPath": "/images/数据分析.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/zaitanxiangmuku.png",
        "selectedIconPath": "/images/项目总览.png"
      }
    ]
  },

2.自定义组件

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

在自定义 tabBar 模式下

• 为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。

• 此时需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。

• 与 tabBar 样式相关的接口，如 wx.setTabBarItem 等将失效。

• 每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例。

注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。可参考底部的代码示例。

1. 配置信息

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

示例：

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

2. 添加 tabBar 代码文件

在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3. 编写 tabBar 代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

/fs/