weex 项目开发自定义 过滤函数 和 混合 及 自定义 Header 组件

Posted 2020-10-17 每天都要进步一点点

1.自定义  过滤函数

src / filters / index.js

/**
 * 自定义 过滤函数
 */
export function host (url) {
  if (!url) return \'\'
  const host = url.replace(/^https?:\\/\\//, \'\').replace(/\\/.*$/, \'\')
  const parts = host.split(\'.\').slice(-3)
  if (parts[0] === \'www\') parts.shift()
  return parts.join(\'.\')
}

export function https (url) {
  const env = weex.config.env || WXEnvironment
  if (env.platform === \'ios\' && typeof url === \'string\') {
    return url.replace(/^http\\:/, \'https:\')
  }
  return url
}

export function timeAgo (time) {
  const between = Date.now() / 1000 - Number(time)
  if (between < 3600) {
    return pluralize(~~(between / 60), \' minute\')
  } else if (between < 86400) {
    return pluralize(~~(between / 3600), \' hour\')
  } else {
    return pluralize(~~(between / 86400), \' day\')
  }
}

function pluralize (time, label) {
  if (time === 1) {
    return time + label
  }
  return time + label + \'s\'
}

export function unescape (text) {
  let res = text || \'\'

  ;[
    [\'<p>\', \'\\n\'],
    [\'&\', \'&\'],
    [\'&\', \'&\'],
    [\'\'\', \'\\\'\'],
    [\'\'\', \'\\\'\'],
    [\'/\', \'/\'],
    [\'\'\', \'\\\'\'],
    [\'/\', \'/\'],
    [\'<\', \'<\'],
    [\'>\', \'>\'],
    [\' \', \' \'],
    [\'"\', \'"\']
  ].forEach(pair => {
    res = res.replace(new RegExp(pair[0], \'ig\'), pair[1])
  })

  return res
}

2.自定义  混合 函数

src / mixins / index.js

/**
 * 混合
 */
export default {
  methods: {
    jump (to) {
      if (this.$router) {
        this.$router.push(to)
      }
    }
  }
}

3.自定义  Header 组件

src / components / Header.vue

Header.vue

<!-- Header 组件 -->
<template>
  <div class="wrapper">
    <div class="scan">
      <text class="ic iconfont"></text>
      <text class="txt">扫一扫</text>
    </div>
    <text class="search iconfont"  @click="jumpWeb()"> 搜索商品，共8888款好物</text>
    <div class="notice">
      <text class="ic iconfont"></text>
      <text class="txt">消息</text>
    </div>
  </div>
</template>
 
<script>
  var navigator = weex.requireModule(\'navigator\');
  import util from \'../utils/util.js\';

  export default {
    data () {
      return {
        //
      }
    },
    created () {
      //
    },
    methods: {
      jumpWeb (_url) {
        if(!_url) _url = \'http://m.you.163.com/search\';
        const url = this.$getConfig().bundleUrl;
        navigator.push({
          url: util.setBundleUrl(url, \'page/webview.js?weburl=\'+_url) ,
          animated: "false"
        });
      }
    }
  }
</script>
 
<style scoped>
  .iconfont {
    font-family:iconfont;
  }
  .wrapper{
    position: fixed;
    top: 0;
    left: 0;right: 0;
    height: 114px;
    padding-top: 34px;
    display:flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-around;
    z-index: 101;
    background-color: #fafafa;
    opacity: .99;
  }
  .scan,.notice{
    height: 80px;
    width: 96px
  }
  .ic,.txt,.search{
    text-align: center;
    color:#666;
    font-weight: 300;
  }
  .ic{
    font-size: 32px;
  }
  .txt{
    font-size: 18px;
  }
  .search {
    flex: 1;
    height: 60px;
    font-size: 26px;
    padding-top: 13px;
    background-color: #ededed;
    border-radius: 8px;
  }
</style>

4.页面调用

src / pages / Home / Home.vue

Home.vue

<!-- 首页 -->
<template>
  <div>
    <!-- 顶部标题栏 -->
    <home-header></home-header>
  </div>
</template>
 
<script>
  import Header from \'../../components/Header.vue\';

  export default {
    name: \'Home\',
    components: {
      \'home-header\': Header,
    },
    data: () => ({
      //
    }),
    created () {
      //
    },
    methods: {
      //
    }
  };
</script>

5.效果图