weex css单位,Weex中CSS和JS的重用

多个页面共用的CSS

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

下面才是正确的使用方式:

...

...

竟然写两个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

哈哈

 ←左边的是iconfont

import util from './utils/iconfont'

export default {

data: {},

methods: {},

created () {

// 页面初始化完成后加载iconfont字体

util.initIconfont();

}

}

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来定义,父组件访问的数据

{{leftText}}

{{midText}}

{{rightText}}

export default {

props: [leftText,rightText,midText],

data: {},

methods: {}

}

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

import title from './component/title.vue'

export default {

data: {},

components: {

title

},

methods: {

}

}

通过对象方式

父组件声明:

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

{{bundle.leftText}}

{{bundle.midText}}

{{bundle.rightText}}

export default {

props: {

bundle: {

type: Object,

default: function () {

return {

leftText: '返回',

midText: '标题',

rightText: '新增',

}

}

},

},

data: {},

methods: {}

}