多個頁面共用的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來定義,父組件訪問的數(shù)據(jù)

<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里聲明標簽的字符,瑪?shù)逻@里必須吐槽一下,第一次定義成了header,在android里死都出來,iOS上是好的.哎,鬧心,注意一下,最好不用html里已經(jīng)存在的標簽

<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>