多个页面共用的CSS

这个必须吐槽一下,找了各种方法,用了什么@import和sass以及scss,都不好使,特别注意@import方式,在web上好用在native上是不好使的.
下面才是正确的使用方式:

<template>
    ...
</template>
<style src="../utils/iconfont/iconfont.css" scoped></style>
<style src="./title.css" scoped></style>
<script>
    ...
</script>

竟然写两个style就好了.心疼我的智商

引入公用JS(也就是工具类)

如下目录层级:

目录层级

1 在script标签中,通过import引入,使用相对目录,注意如果需要引入的文件直接在当前文件所在层级的子目录,必须用./子目录/xxx.js;的方式,不可直接子目录/xxx.js.

import util from '../utils/iconfont/iconfont-utils';

2 在被导入的js文件中添加export.default.xxx 这个export一定要写在你定义的变量后边.

export default iconfontUtils

Show me the code

index.vue

<template>
    <div style="flex-direction: column">
        <text>哈哈</text>
        <text class="iconfont"> ←左边的是iconfont</text>
    </div>
</template>

<style src="../utils/iconfont/iconfont.css" scoped></style>
<style src="./title.css" scoped></style>

<script>
    import util from './utils/iconfont'
    export default {
        data: {},
        methods: {},
        created () {
            // 页面初始化完成后加载iconfont字体
            util.initIconfont();
        }
    }
</script>

iconfontUtil.js

/**
 * 初始化加载iconfont字体
 * 
 * @type {{initIconfont: (function())}}
 */
let iconfontUtils = {
    initIconfont() {
        let dom = weex.requireModule('dom');
        //通过获取platform判断加载字体文件的路径,(待完善,在手机playground中,是无法加载本地文件的)
        let platform = weex.config.env.platform.toLowerCase();
        let url;
        if ( "android" == platform) {
            //本地资源采用'local:// '的方式加载
           //第三个斜杠是代表当前目录,对于android来说,如果加载的是字体,那么就是assets目录,同理`/iconfont.ttf'`就是加载`assets`目录下的iconfont.ttf文件
            url = "url('local:///font/iconfont.ttf')";//注意我这里是将字体文件放在'assets/font/''目录下的
        } else if ("ios" == platform) {
            //todo 理论上同android未测试
            url = "url('local:///font/iconfont.ttf')";
        } else {
            url = "url('http://at.alicdn.com/t/xxxxxxx.ttf')"
        }
        dom.addRule('fontFace', {
            'fontFamily': "iconfont",
            'src': url
        });
    }
}
export default iconfontUtils;

封装组件(比如App的Header)

通过props来定义,父组件访问的数据

<template>
    <div class="wrapper">
        <text class="left">{{leftText}}</text>
        <text class="title">{{midText}}</text>
        <text class="right">{{rightText}}</text>
    </div>
</template>
<script>
    export default {
        props: [leftText,rightText,midText],
        data: {},
        methods: {}
    }
</script>

在父组件中通过以下方式,在compents里声明标签的字符,玛德这里必须吐槽一下,第一次定义成了header,在android里死都出来,iOS上是好的.哎,闹心,注意一下,最好不用html里已经存在的标签

<template>
  <title :leftText="返回" :midText="标题" :midText="搜索" ></title>
</template>
<script>
    import title from './component/title.vue'

    export default {
        data: {},
        components: {
            title
        },
        methods: {
        }
    }

</script>

通过对象方式

父组件声明:

<title :bundle="header"></title>

show me the fucking code ---> title.vue

<template>
    <div class="wrapper">
        <text class="left">{{bundle.leftText}}</text>
        <text class="title">{{bundle.midText}}</text>
        <text class="right">{{bundle.rightText}}</text>
    </div>
</template>

<script>
    export default {
        props: {
            bundle: {
                type: Object,
                default: function () {
                    return {
                        leftText: '返回',
                        midText: '标题',
                        rightText: '新增',
                    }
                }
            },
        },
        data: {},
        methods: {}
    }
</script>