发表于 2023-3-10 08:50:56

微信小程序进阶

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

1.1 全局自定义顶部

所有的页面 均使用自定义 顶部，自带顶部全局配置失效    app.json"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
   //全局自定义顶部
    "navigationStyle": "custom"   
},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"
}3.在父页面的 wxml 文件中使用该组件
<!--index.wxml-->
<view class="container">
<top-bar title="首页"></top-bar>
</view>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()
},
})

[*]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>

[*]top-bar.wxss
/* components/top-bar/top-bar.wxss */
.nav{
box-sizing: border-box;
background-color: #f1f1f1;
}5.完整父页面中的配置

[*]index.json
{
"usingComponents": {
    "top-bar":"/components/top-bar/top-bar"
},
"navigationStyle": "custom"
}

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

[*]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;
}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"
      }
    ]
}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>

[*]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
      })
    }
}
})

[*]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;
}2.3 需要 使用tabBar的页面 导入该子组件

页面.json
{
"usingComponents": {
    "top-bar":"/components/top-bar/top-bar",
    "tab-bar":"/components/tab-bar/tab-bar"
}
}页面.wxml
<!--index.wxml-->
<view class="container">
<!-- 顶部组件 -->
<top-bar title="大众点评上首页"></top-bar>
<!-- 内容区域 -->
<view class="content" >
      <!-- <viewwx:for="{{100}}">
          {{item}}
      </view> -->
</view>
</view>
<!-- 自定义底部tabBar2：表示当前第几个被选中 进入这个页面时，需要选中的数组索引-->
<tab-bar active="2"></tab-bar>页面.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;
}2.4 效果展示



3.外联样式的导入

利用@import “导入的样式文件相对路径”    可以导入公共的外联样式@import "../../common/common.wxss";4.WeUI-微信官方团队开发UI组件库

官网文档链接： https://wechat-miniprogram.github.io/weui/docs/quickstart.html4.1 下载并在小程序中使用 UI组件库

小程序支持使用npm安装第三方包，要求开发者工具>=1.02，基础库版本>=2.2.1
npm i weui-miniprogram
或
yarn add weui-miniprogram4.2 在 app.wxss 中导入 组件库 样式文件

/**app.wxss**/
@import "./miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss";4.3 如果出现 控制台报错:依赖项 未被使用的报错




[*]解决方案： 关闭依赖项检测提示，并重启项目   project.config.json
"setting": {
    "ignoreDevUnusedFiles": false,
    "ignoreUploadUnusedFiles": false,
}4.4 使用 weui 组件


[*]index.json 注册该组件
{
"usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
}
}

[*]index.wxml
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    <view>test content</view>
</mp-dialog>

[*]index.js
Page({
data: {
    buttons: [{text: '取消'}, {text: '确认'}]
}
} 完整的组件的使用文档请参考具体的组件的文档。
页: [1]
查看完整版本: 微信小程序进阶