微信小程序进阶

# 前言：

在开发微信小程序的过程中微信小程序的底部与顶部默认自带的样式并不能满足日常所需，那么关于自定义顶部与自定义底部的需求也就来了。

# 1.1 全局自定义顶部

所有的页面均使用自定义顶部，自带顶部全局配置失效 app.json

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
     //全局自定义顶部
    "navigationStyle": "custom"   
  },

1
2
3
4
5
6
7
8

# 1.2 单个页面自定义顶部

针对单个页面的自定义顶部配置 页面.json

  "navigationStyle": "custom"

# 1.3 创建自定义 top-bar 组件

1.根目录下/components/top-bar 目录中右键创建 topbar Component组件

2.在父页面的 json文件中注册自定义组件

{
  "usingComponents": {
    "top-bar":"/components/top-bar/top-bar"
  },
  "navigationStyle": "custom"
}

1
2
3
4
5
6

3.在父页面的 wxml 文件中使用该组件

<!--index.wxml-->
<view class="container">
  <top-bar title="首页"></top-bar>
</view>

1
2
3
4

4.完善 top-bar 组件样式，确定其高度与位置信息

top-bar.js

// components/top-bar/top-bar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      default:'标题'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    topBarHeight:0,  //顶部盒子总高度
  },

  /**
   * 组件的方法列表
   */
  methods: {
    getNavHeight(){
        // 获取设备信息
        const sysInfo = wx.getSystemInfoSync();
        // 导航栏总高度 = 状态栏+44px
        const TopBarheight = sysInfo.statusBarHeight+44;
        //异步更新数据
        wx.nextTick(()=>{
          this.setData({
            topBarHeight:TopBarheight,
          })
        })
    }
  },
  created(){
    this.getNavHeight()
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

top-bar.wxml

<!--components/top-bar/top-bar.wxml-->
<view class="nav" style="height:{{topBarHeight}}px;padding: {{topBarHeight}}rpx 0 0 0;">
  <view>
    {{title}} 
  </view>
</view>

1
2
3
4
5
6

top-bar.wxss

/* components/top-bar/top-bar.wxss */
.nav{
  box-sizing: border-box;
  background-color: #f1f1f1;
}

1
2
3
4
5

5.完整父页面中的配置

index.json

{
  "usingComponents": {
    "top-bar":"/components/top-bar/top-bar"
  },
  "navigationStyle": "custom"
}

1
2
3
4
5
6

index.wxml

<!--index.wxml-->
<view class="container">
<!-- 顶部组件 -->
  <top-bar title="大众点评上首页"></top-bar>
  <!-- 内容区域 -->
  <view class="content" >
      <view  wx:for="{{100}}"> 
          {{item}}
      </view>
  </view>
</view>

1
2
3
4
5
6
7
8
9
10
11

index.wxss

/**index.wxss**/
.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content{
  flex: 1;
  width: 100%;
  background-color: #f60;
  overflow-y: scroll;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

6.最终展示效果

# 2.自定义底部 TabBar

# 2.1 全局关闭默认tabBar 配置,开启自定义tabBar

注意：需要注意的是，就算开启了自定义 tabBar 配置，仍然需要保留全局的 tabBar 的list 配置【这样做是为了可以通过 wx.switchTab() 方法可以跳转到该页面，该页面仍然为 tabBar 】

"tabBar": {
    "custom": true,    //开启自定义tabBar  默认tabBar 样式失效
    "color": "#d4d4d2",
    "selectedColor": "#e26c4f",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/index.png",
        "selectedIconPath": "/images/index_active.png"
      },
      {
        "pagePath": "pages/add/add",
        "text": "发布",
        "isCenter":true,   //这里是为了表明该子项 是显示在中间的圆里面
        "iconPath": "/images/add.png",
        "selectedIconPath": "/images/add.png"
      },
      {
        "pagePath": "pages/discount/discount",
        "text": "找优惠",
        "iconPath": "/images/discount.png",
        "selectedIconPath": "/images/discount_active.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "找好店",
        "iconPath": "/images/shop.png",
        "selectedIconPath": "/images/shop_active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/images/mine.png",
        "selectedIconPath": "/images/mine_active.png"
      }
    ]
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 2.2 创建公共组件 components/tab-bar

tab-bar.wxml

<!--components/tab-bar/tab-bar.wxml-->
<view class="bar">
  <block wx:for="{{tabbar.list}}" wx:key="index">
    <!-- 如果是中间的 -->
    <block wx:if="{{item.isCenter}}">
      <view class="center" style="background: {{tabbar.selectedColor}};" data-page="{{item.pagePath}}" bindtap="toPage">
        <image class="add-icon" src="{{item.iconPath}}" mode="" />
      </view>
    </block>

    <!-- 如果不是中间的 处理 -->
    <block wx:else>
    <!-- 如果不选中 -->
      <view wx:if="{{index!=active}}" bindtap="toPage" data-page="{{item.pagePath}}" class="item" style="color:{{tabbar.color}}">
        <image class="icon" src="{{item.iconPath}}"></image>
        <view>
          {{item.text}}
        </view>
      </view>
      <!-- 如果选中 -->
      <view wx:else class="item" bindtap="toPage" data-page="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}">
        <image class="icon" src="{{item.selectedIconPath}}"></image>
        <view>
          {{item.text}}
        </view>
      </view>
    </block>
  </block>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

tab-bar.js

这里的data 里面设置了一个默认数据 tabBar 就是直接复制的 app.json 里面的 tabBar 配置的 json对象

// components/tab-bar/tab-bar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
      //当前选中的是哪个tabBar 
    active:{
      type:Number,
      default:0,
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    tabbar:{
      "color": "#d4d4d2",
      "selectedColor": "#e26c4f",
      "borderStyle": "white",
      "list": [
        {
          "pagePath": "pages/index/index",
          "text":"首页",
          "iconPath": "/images/index.png",
          "selectedIconPath": "/images/index_active.png"
        },
        {
          "pagePath": "pages/discount/discount",
          "text":"找优惠",
          "iconPath": "/images/discount.png",
          "selectedIconPath": "/images/discount_active.png"
        },
        {
          "pagePath": "pages/add/add",
          "text": "发布",
          "isCenter":true,
          "iconPath": "/images/add.png",
          "selectedIconPath": "/images/add.png"
        },
        {
          "pagePath": "pages/shop/shop",
          "text":"找好店",
          "iconPath": "/images/shop.png",
          "selectedIconPath": "/images/shop_active.png"
        },
        {
          "pagePath": "pages/mine/mine",
          "text":"我的",
          "iconPath": "/images/mine.png",
          "selectedIconPath": "/images/mine_active.png"
        }
      ]
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
      //跳转页面
    toPage(event){
      wx.switchTab({
        url: '/'+event.currentTarget.dataset.page
      })
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

tab-bar.wxss

/* components/tab-bar/tab-bar.wxss */
.bar{
  width: 100%;
  height: 50px;
  background: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #eee;

}
.item{
  flex: 1;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;

}
.icon{
  width: 25px;
  height: 25px;
}
.center{
  position: relative;
  top: -20px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  color: #fff;

}
.add-icon{
  margin:12.5px;
  width: 25px;
  height: 25px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 2.3 需要使用tabBar的页面导入该子组件

页面.json

{
  "usingComponents": {
    "top-bar":"/components/top-bar/top-bar",
    "tab-bar":"/components/tab-bar/tab-bar"
  }
}

1
2
3
4
5
6

页面.wxml

<!--index.wxml-->
<view class="container">
<!-- 顶部组件 -->
  <top-bar title="大众点评上首页"></top-bar>
  <!-- 内容区域 -->
  <view class="content" >
      <!-- <view  wx:for="{{100}}"> 
          {{item}}
      </view> -->
  </view>
</view>
<!-- 自定义底部  tabBar  2：表示当前第几个被选中 进入这个页面时，需要选中的数组索引  -->
<tab-bar active="2"></tab-bar>

1
2
3
4
5
6
7
8
9
10
11
12
13

页面.wxss

/**index.wxss**/

.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content{
  flex: 1;
  width: 100%;
  background-color: #f60;
  overflow-y: scroll;
  padding-bottom: 50px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2.4 效果展示

# 3.外联样式的导入

利用@import “导入的样式文件相对路径” 可以导入公共的外联样式

@import "../../common/common.wxss";

# 4.WeUI-微信官方团队开发UI组件库

官网文档链接： https://wechat-miniprogram.github.io/weui/docs/quickstart.html

# 4.1 下载并在小程序中使用 UI组件库

小程序支持使用npm安装第三方包，要求开发者工具>=1.02，基础库版本>=2.2.1

npm i weui-miniprogram 
或
yarn add weui-miniprogram

1
2
3

# 4.2 安装之后构建npm

安装之后，小程序开发者工具---菜单栏---工具---构建npm

# 4.2 在 app.wxss 中导入组件库样式文件

/**app.wxss**/
@import "./miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss";

1
2

# 4.3 如果出现控制台报错:依赖项未被使用的报错

解决方案：关闭依赖项检测提示，并重启项目 project.config.json

  "setting": {
    "ignoreDevUnusedFiles": false,
    "ignoreUploadUnusedFiles": false,
  }

1
2
3
4

# 4.4 使用 weui 组件

在需要使用这些组件的页面中以自定义组件的形式进行注册和使用

index.json 注册该组件

{
    "usingComponents": {
          "mp-badge": "weui-miniprogram/badge/badge"
    }
}

1
2
3
4
5

index.wxml

<mp-icon type="field" icon="album" color="black" size="{{25}}"></mp-icon>

<mp-dialog mask="true" mask-closable="true" show="{{show}}"></mp-dialog>

<button bindtap="showBtn">展示模态框</button>

1
2
3
4
5
6

index.js

Page({
  data: {
    show:true
  }
}

1
2
3
4
5

完整的组件的使用文档请参考具体的组件的文档。

# 5.vant weapp UI使用

官网地址：

https://vant-contrib.gitee.io/vant-weapp/#/home

npm 安装

# 通过 npm 安装
npm i @vant/weapp 

# 通过 yarn 安装
yarn add @vant/weapp

1
2
3
4
5

修改app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件 (opens new window)强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

修改 project.config.json

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
     "packNpmRelationList": [
            {
                "packageJsonPath": "./package.json",
                "miniprogramNpmDistDir": "./"
            }
        ],
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

安装之后，小程序开发者工具---菜单栏---工具---构建npm
使用

{
    "usingComponents": {
        "van-button": "@vant/weapp/button/index"
    }
}

1
2
3
4
5

<van-button type="danger">按钮</van-button>

编辑

← 微信小程序语法基础微信小程序高阶→

微信小程序进阶

# 前言：

# 1.自定义顶部 navigation

# 1.1 全局自定义顶部

# 1.2 单个页面自定义顶部

# 1.3 创建自定义 top-bar 组件

# 2.自定义底部 TabBar

# 2.1 全局关闭 默认tabBar 配置,开启自定义tabBar

# 2.2 创建公共组件 components/tab-bar

# 2.3 需要 使用tabBar的页面 导入该子组件

# 2.4 效果展示

# 3.外联样式的导入

# 4.WeUI-微信官方团队开发UI组件库

# 4.1 下载并在小程序中使用 UI组件库

# 4.2 安装之后 构建npm

# 4.2 在 app.wxss 中导入 组件库 样式文件

# 4.3 如果出现 控制台报错:依赖项 未被使用的报错

# 4.4 使用 weui 组件

# 5.vant weapp UI使用

# 2.1 全局关闭默认tabBar 配置,开启自定义tabBar

# 2.3 需要使用tabBar的页面导入该子组件

# 4.2 安装之后构建npm

# 4.2 在 app.wxss 中导入组件库样式文件

# 4.3 如果出现控制台报错:依赖项未被使用的报错