微信小程序进阶

前言：
在开辟微信小法式的进程中 微信小法式的底部与顶部默许自带的款式并不能满足平常所需，那末关于自界说顶部与自界说底部的需求也就来了。
1.自界说顶部  navigation

1.1 全局自界说顶部

一切的页面 均利用自界说 顶部，自带顶部全局设置生效    app.json

1. "window": {
2.     "backgroundTextStyle": "light",
3.     "navigationBarBackgroundColor": "#fff",
4.     "navigationBarTitleText": "Weixin",
5.     "navigationBarTextStyle": "black",
6.      //全局自界说顶部
7.     "navigationStyle": "custom"   
8.   },

复制代码

1.2 单个页面自界说顶部

针对单个页面的自界说顶部设置   页面.json

1. "navigationStyle": "custom"

复制代码

1.3 建立自界说 top-bar 组件

1.根目录下/components/top-bar 目录中 右键建立 topbar Component组件
2.在父页面 的 json文件中注册 自界说组件

1. {
2.   "usingComponents": {
3.     "top-bar":"/components/top-bar/top-bar"
4.   },
5.   "navigationStyle": "custom"
6. }

复制代码

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

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

复制代码

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

• top-bar.js
  

1. // components/top-bar/top-bar.js
2. Component({
3.   /**
4.    * 组件的属性列表
5.    */
6.   properties: {
7.     title:{
8.       type:String,
9.       default:'题目'
10.     }
11.   },
13.   /**
14.    * 组件的初始数据
15.    */
16.   data: {
17.     topBarHeight:0,  //顶部盒子总高度
18.   },
20.   /**
21.    * 组件的方式列表
22.    */
23.   methods: {
24.     getNavHeight(){
25.         // 获得装备信息
26.         const sysInfo = wx.getSystemInfoSync();
27.         // 导航栏总高度 = 状态栏+44px
28.         const TopBarheight = sysInfo.statusBarHeight+44;
29.         //异步更新数据
30.         wx.nextTick(()=>{
31.           this.setData({
32.             topBarHeight:TopBarheight,
33.           })
34.         })
35.     }
36.   },
37.   created(){
38.     this.getNavHeight()
39.   },
40. })

复制代码

• top-bar.wxml
  

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

复制代码

• top-bar.wxss
  

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

复制代码

5.完整父页面中的设置

• index.json
  

1. {
2.   "usingComponents": {
3.     "top-bar":"/components/top-bar/top-bar"
4.   },
5.   "navigationStyle": "custom"
6. }

复制代码

• index.wxml
  

1. <!--index.wxml-->
2. <view class="container">
3. <!-- 顶部组件 -->
4.   <top-bar title="公共点评上首页"></top-bar>
5.   <!-- 内容地区 -->
6.   <view class="content" >
7.       <view  wx:for="{{100}}">
8.           {{item}}
9.       </view>
10.   </view>
11. </view>

复制代码

• index.wxss
  

1. /**index.wxss**/
2. .container{
3.   width: 100vw;
4.   height: 100vh;
5.   display: flex;
6.   flex-direction: column;
7. }
8. .content{
9.   flex: 1;
10.   width: 100%;
11.   background-color: #f60;
12.   overflow-y: scroll;
13. }

复制代码

6.终极展现结果


2.自界说底部  TabBar

2.1 全局封闭 默许tabBar 设置,开启自界说tabBar

留意： 需要留意的是，就算开启了自界说 tabBar 设置，照旧需要保存全局的 tabBar 的list 设置【这样做是为了 可以经过  wx.switchTab() 方式可以跳转到 该页面，该页面照旧为 tabBar 】

1. "tabBar": {
2.     "custom": true,    //开启自界说tabBar  默许tabBar 款式生效
3.     "color": "#d4d4d2",
4.     "selectedColor": "#e26c4f",
5.     "borderStyle": "white",
6.     "list": [
7.       {
8.         "pagePath": "pages/index/index",
9.         "text": "首页",
10.         "iconPath": "/images/index.png",
11.         "selectedIconPath": "/images/index_active.png"
12.       },
13.       {
14.         "pagePath": "pages/add/add",
15.         "text": "公布",
16.         "isCenter":true,   //这里是为了表白该子项 是显现在中心的圆里面
17.         "iconPath": "/images/add.png",
18.         "selectedIconPath": "/images/add.png"
19.       },
20.       {
21.         "pagePath": "pages/discount/discount",
22.         "text": "找优惠",
23.         "iconPath": "/images/discount.png",
24.         "selectedIconPath": "/images/discount_active.png"
25.       },
26.       {
27.         "pagePath": "pages/shop/shop",
28.         "text": "找好店",
29.         "iconPath": "/images/shop.png",
30.         "selectedIconPath": "/images/shop_active.png"
31.       },
32.       {
33.         "pagePath": "pages/mine/mine",
34.         "text": "我的",
35.         "iconPath": "/images/mine.png",
36.         "selectedIconPath": "/images/mine_active.png"
37.       }
38.     ]
39.   }

复制代码

2.2 建立公共组件  components/tab-bar

• tab-bar.wxml
  

1. <!--components/tab-bar/tab-bar.wxml-->
2. <view class="bar">
3.   <block wx:for="{{tabbar.list}}" wx:key="index">
4.     <!-- 假如是中心的 -->
5.     <block wx:if="{{item.isCenter}}">
6.       <view class="center" style="background: {{tabbar.selectedColor}};" data-page="{{item.pagePath}}" bindtap="toPage">
7.         <image class="add-icon" src="{{item.iconPath}}" mode="" />
8.       </view>
9.     </block>
11.     <!-- 假如不是中心的 处置 -->
12.     <block wx:else>
13.     <!-- 假如不选中 -->
14.       <view wx:if="{{index!=active}}" bindtap="toPage" data-page="{{item.pagePath}}" class="item" style="color:{{tabbar.color}}">
15.         <image class="icon" src="{{item.iconPath}}"></image>
16.         <view>
17.           {{item.text}}
18.         </view>
19.       </view>
20.       <!-- 假如选中 -->
21.       <view wx:else class="item" bindtap="toPage" data-page="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}">
22.         <image class="icon" src="{{item.selectedIconPath}}"></image>
23.         <view>
24.           {{item.text}}
25.         </view>
26.       </view>
27.     </block>
28.   </block>
29. </view>

复制代码

• tab-bar.js
  

这里的data 里面设备了一个默许数据 tabBar 就是间接复制 的 app.json 里面的 tabBar 设置的 json工具

1. // components/tab-bar/tab-bar.js
2. Component({
3.   /**
4.    * 组件的属性列表
5.    */
6.   properties: {
7.       //当前选中的是哪个tabBar
8.     active:{
9.       type:Number,
10.       default:0,
11.     }
12.   },
14.   /**
15.    * 组件的初始数据
16.    */
17.   data: {
18.     tabbar:{
19.       "color": "#d4d4d2",
20.       "selectedColor": "#e26c4f",
21.       "borderStyle": "white",
22.       "list": [
23.         {
24.           "pagePath": "pages/index/index",
25.           "text":"首页",
26.           "iconPath": "/images/index.png",
27.           "selectedIconPath": "/images/index_active.png"
28.         },
29.         {
30.           "pagePath": "pages/discount/discount",
31.           "text":"找优惠",
32.           "iconPath": "/images/discount.png",
33.           "selectedIconPath": "/images/discount_active.png"
34.         },
35.         {
36.           "pagePath": "pages/add/add",
37.           "text": "公布",
38.           "isCenter":true,
39.           "iconPath": "/images/add.png",
40.           "selectedIconPath": "/images/add.png"
41.         },
42.         {
43.           "pagePath": "pages/shop/shop",
44.           "text":"找好店",
45.           "iconPath": "/images/shop.png",
46.           "selectedIconPath": "/images/shop_active.png"
47.         },
48.         {
49.           "pagePath": "pages/mine/mine",
50.           "text":"我的",
51.           "iconPath": "/images/mine.png",
52.           "selectedIconPath": "/images/mine_active.png"
53.         }
54.       ]
55.     }
56.   },
58.   /**
59.    * 组件的方式列表
60.    */
61.   methods: {
62.       //跳转页面
63.     toPage(event){
64.       wx.switchTab({
65.         url: '/'+event.currentTarget.dataset.page
66.       })
67.     }
68.   }
69. })

复制代码

• tab-bar.wxss
  

1. /* components/tab-bar/tab-bar.wxss */
2. .bar{
3.   width: 100%;
4.   height: 50px;
5.   background: #fff;
6.   position: fixed;
7.   bottom: 0;
8.   display: flex;
9.   justify-content: space-around;
10.   border-top: 1px solid #eee;
12. }
13. .item{
14.   flex: 1;
15.   height: 50px;
16.   display: flex;
17.   flex-direction: column;
18.   justify-content: center;
19.   align-items: center;
20.   font-size: 14px;
22. }
23. .icon{
24.   width: 25px;
25.   height: 25px;
26. }
27. .center{
28.   position: relative;
29.   top: -20px;
30.   width: 50px;
31.   height: 50px;
32.   text-align: center;
33.   line-height: 50px;
34.   border-radius: 50%;
35.   color: #fff;
37. }
38. .add-icon{
39.   margin:12.5px;
40.   width: 25px;
41.   height: 25px;
42. }

复制代码

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

页面.json

1. {
2.   "usingComponents": {
3.     "top-bar":"/components/top-bar/top-bar",
4.     "tab-bar":"/components/tab-bar/tab-bar"
5.   }
6. }

复制代码

页面.wxml

1. <!--index.wxml-->
2. <view class="container">
3. <!-- 顶部组件 -->
4.   <top-bar title="公共点评上首页"></top-bar>
5.   <!-- 内容地区 -->
6.   <view class="content" >
7.       <!-- <view  wx:for="{{100}}">
8.           {{item}}
9.       </view> -->
10.   </view>
11. </view>
12. <!-- 自界说底部  tabBar  2：暗示当前第几个被选中 进入这个页面时，需要选中的数组索引  -->
13. <tab-bar active="2"></tab-bar>

复制代码

页面.wxss

1. /**index.wxss**/
3. .container{
4.   width: 100vw;
5.   height: 100vh;
6.   display: flex;
7.   flex-direction: column;
8. }
9. .content{
10.   flex: 1;
11.   width: 100%;
12.   background-color: #f60;
13.   overflow-y: scroll;
14.   padding-bottom: 50px;
15. }

复制代码

2.4 结果展现



3.外联款式的导入

操纵@import “导入的款式文件相对途径”    可以导入公共的外联款式

1. @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

1. npm i weui-miniprogram
2. 或
3. yarn add weui-miniprogram

复制代码

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

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

复制代码

4.3 假如出现 控制台报错:依靠项 未被利用的报错

• 处理计划： 封闭依靠项检测提醒，并重启项目   project.config.json
  

1. "setting": {
2.     "ignoreDevUnusedFiles": false,
3.     "ignoreUploadUnusedFiles": false,
4.   }

复制代码

4.4 利用 weui 组件

• index.json 注册该组件
  

1. {
2.   "usingComponents": {
3.     "mp-dialog": "weui-miniprogram/dialog/dialog"
4.   }
5. }

复制代码

• index.wxml
  

1. <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
2.     <view>test content</view>
3. </mp-dialog>

复制代码

• index.js
  

1. Page({
2.   data: {
3.     buttons: [{text: '取消'}, {text: '确认'}]
4.   }
5. }

复制代码

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