【微信小程序】---- CustomBar 公用组件封装

2022-01-06 16:46:59 浏览数 (1)

1. WXML 代码

  1. 公用 CustomBar 盒子，此处可以设置公用的背景/字体颜色和字体大小；
  2. CustomBar 具体内容，按照胶囊右边距设置 CustomBar 盒子的左右 margin，设置盒子的高度；
  3. 右侧胶囊占位，左侧动态根据 title 判断展示 slot 还是直接显示 title;
  4. 除去 CustomBar 的展示数据，其他的 slot !
代码语言：javascript复制
<view class="rui-head-content" style="background: url({{bannerBgIcon}}) no-repeat center top/100% auto;min-height:{{sysInfo.CustomBar}}px;padding-top:{{sysInfo.StatusBar}}px;">
  <view class="rui-flex-ac" style="height:{{sysInfo.CustomBar - sysInfo.StatusBar}}px;margin:0 calc(750rpx - {{sysInfo.Custom.right}}px);">
    <view class="rui-fg rui-mr20 rui-flex-ac">
      <slot name="title" wx:if="{{!title}}"></slot>
      <image wx:if="{{title}}" src="{{returnIcon}}" style="width: 8px;height: 16px;" class="rui-return-icon rui-fa rui-mr20" bindtap="routeTo" data-delta="1"></image>
      <text wx:if="{{title}}" class="rui-line1 rui-color0">{{title}}</text>
    </view>
    <view class="rui-fa" style="height:{{sysInfo.Custom.height}}px;width:{{sysInfo.Custom.width}}px;"></view>
  </view>
  <view style="margin:0 calc(750rpx - {{sysInfo.Custom.right}}px);">
    <slot name="other"></slot>
  </view>
</view>

注意：flex 布局等使用的公用样式，返回的方法 routeTo 进行统一的封装！

2. JS 代码

  1. useNetIcons: [‘bannerBgIcon’, ‘returnIcon’] 获取公用 CustomBar 的图片；
  2. globalData 获取 CustomBar 的信息，只需要在 app.js 获取一次，其他组件或者页面直接使用；
  3. multipleSlots 开启插槽；
  4. routeTo 方法是点击跳转方法，封装在 Component 的拦截器中，最后详细解释 routeTo 方法！
代码语言：javascript复制
const app = getApp()
Component({
  useNetIcons: ['bannerBgIcon', 'returnIcon'],
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },
  properties: {
    title: String
  },
  data: {
    sysInfo: app.globalData
  },
  methods: {

  }
})

3. WXSS 代码

  1. 引入全局通用样式；
  2. 设置 CustomBar 的公用盒子样式！
代码语言：javascript复制
@import '../../css/common.wxss';

.rui-head-content{
  box-sizing: border-box;
  color: #FBECC4;
  font-size: 14px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1024;
}

4. CustomBar 公用组件的使用

4.1 引入组件
代码语言：javascript复制
{
  "component": true,
  "usingComponents": {
    "rui-customs": "../../components/rui-customs/rui-customs"
  }
}
4.2 使用组件
  1. 直接传入 title 使用
代码语言：javascript复制
<rui-custom title="智家专区"/>

效果：

  1. 插槽的使用
代码语言：javascript复制
<rui-customs>
    <view class="rui-fg rui-mr20 rui-flex-ac" slot="title">
       <image src="{{newlogoIcon}}" class="rui-fa rui-icon44 rui-mr20"></image>
       <text class="rui-color0 rui-mr10 rui-fa" style="font-size: 15px;">天虎严选</text>
       <text class="rui-fg"> | 优享合约 精选生活</text>
     </view>
     <view class="rui-search-content rui-flex-ac" slot="other">
       <view class="rui-fg rui-flex-ac rui-input-content">
         <image src="{{scansearchIcon}}" class="rui-icon30 rui-fa rui-mr20"></image>
         <view class="rui-fg"><input type="text" placeholder="请输入内容查找" class="rui-input rui-fs24"/></view>
         <image src="{{searchiconIcon}}" class="rui-icon30 rui-fa rui-ml20"></image>
       </view>
     </view>
</rui-customs>

效果：

5. routeTo 方法的封装和说明

  1. 引入公共提示方法 _toast ；
  2. 引入当前执行环境 env_config；
  3. 集合 wx 的跳转执行方法 types；
  4. routeTo 方法元素点击跳转执行；

4.1 获取元素的属性 dataset 中的 type, url, appid, delta； 4.2 执行 $route 方法，此方法是 js 调用方法；

  1. $route 方法是 Page 对象或者 Component 直接执行js跳转的方法；

5.1 对传入参数 type, url, appid, delta 解构赋值； 5.2 判断 appid 是否有效，如果 appid 存在，执行 wx.navigateToMiniProgram()，小程序之间的跳转，注意：需要判断 env_config 是否是正式环境； 5.3 判断 url 的值是否有效，如果有效，判断 url 中是否存在 http，进行web-view打开对应的H5页面，注意：1. webView 页面是公用的打开 H5 的页面，需提前创建；2. H5 url可以存入缓存，也可以使用全局状态变量，此处采用缓存变量【urlAndParams】； 5.4 如果 url 有效，并且不是 H5 页面，直接使用跳转方法 route； 5.5 如果 url 无效，判断 delta 返回参数是否有效，有效执行返回 wx.navigateBack()，无效提示 【功能开发中，敬请关注！】！

  1. route 判断传入的 type 是否是wx的有效跳转，如果无效，使用navigateTo，有效使用传入type执行！
  2. 将页面点击跳转方法 routeTo，和js跳转方法 route 暴露！在 Component 和 Page 拦截器添加 routeTo 和 route！
代码语言：javascript复制
import { _toast } from "../helper/utils"
import {env_config} from '../request/env'

const types = {
  navigateTo: 'navigateTo',
  switchTab: 'switchTab',
  reLaunch: 'reLaunch',
  redirectTo: 'redirectTo',
  navigateBack: 'navigateBack'
}

const routeTo = ({currentTarget}) => {
  let { type = 'navigateTo', url = '', appid = '', delta} = currentTarget.dataset
  $route({type, url, appid, delta})
}
const $route = (opts) => {
  let { type = 'navigateTo', url = '', appid = '', delta} = opts
  if(appid){
    wx.navigateToMiniProgram({
      appId: appid,
      path: url,
      envVersion: env_config.test ? 'trial' : 'release',
      success(){console.log('小程序跳转成功！')}
    })
    return
  }
  if(url){
    if(url.indexOf('http') > -1){
      wx.setStorageSync('urlAndParams', `${url}`)
      route({ url: '../../pages/webView/webView', type })
    } else {
      route(opts)
    }
  } else {
    delta ? wx.navigateBack(opts) : _toast('功能开发中，敬请关注！')
  }
}

const route = (opts) => {
  let { type = 'navigateTo', url = ''} = opts
  type = types[type] ? type : 'navigateTo'
  wx[type].call(wx, { url })
}

module.exports = {
  routeTo,
  $route
}

6. 对封装跳转方法的使用

  1. 页面返回上一页或者几页
代码语言：javascript复制
<view bindtap="routeTo" data-delta="1">返回上一页</view>
  1. js返回上一页或者几页
代码语言：javascript复制
this.$route({delta:1})
  1. 页面跳转其他小程序
代码语言：javascript复制
<view bindtap="routeTo" data-appid="wx1b4587b5486c9856" data-url="pages/index/index">跳转其他小程序</view>
  1. js 跳转其他小程序
代码语言：javascript复制
this.$route({appid:'wx1b4587b5486c9856',url: 'pages/index/index'})
  1. 页面内部普通跳转
代码语言：javascript复制
<view bindtap="routeTo" data-url="../../pages/addressList/addressList">地址管理</view>
  1. js内部普通跳转
代码语言：javascript复制
this.$route({url: '../../pages/addressList/addressList'})
  1. 页面tabbar页面跳转
代码语言：javascript复制
<view bindtap="routeTo" data-url="../../pages/index/index" data-type="switchTab">首页</view>
  1. js tabbar页面跳转
代码语言：javascript复制
this.$route({url: '../../pages/index/index',type:'switchTab'})

7. 总结

  1. 跳转方法等使用频繁的方法，尽量封装，这样后期如果需要埋点，直接在此方法，就能完成页面大部分操作行为的埋点；
  2. CustomBar 如果需要自定义，尽量封装全局组件！
php html5 小程序 微信

0 人点赞