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

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.效果图