weex 怎样引用外部css文件,js文件

html-css018

weex 怎样引用外部css文件,js文件,第1张

weex是基于vue搭建的,所以也遵循CommonJS的模块化规范,可以使用require来引用别的js文件,或者用ES6的import来引用js文件。

weex怎么引用外部css,我也不是很清楚......,一般是通过一个整体布局的html页面来集体引用样式文件。

所有 weex 标签都有以下基本样式规则。

weex 盒模型基于 CSS 盒模型,每个 weex 元素都可视作一个盒子。我们一般在讨论设计或布局时,会提到「盒模型」这个概念。

元素实际的内容(content)、内边距(paddings)、边框(borders)、外边距(margins),形成一层层的盒子包裹起来,这就是盒模型大体上的含义。

注意:目前在 <image>和 <text>组件上尚无法只定义一个或几个角的 border-radius。比如你无法在这两个组件上使用 border-top-left-radius。

weex 盒模型的 box-sizing 默认为 border-box,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度。

示例:

weex 布局模型基于 CSS 的 Flexbox。以便所有页面元素的排版能够一致可预测,同时页面布局能适应各种设备或者屏幕尺寸。

Flexbox 包含 flex 容器和 flex 成员项。如果一个 weex 元素可以容纳其他元素,那么它就成为 flex 容器。需要注意的是,flexbox 的老版规范相较新版有些出入,比如是否能支持 wrapping。这些都描述在 W3C 的工作草案中了,你需要注意下新老版本之间的不同。另外,老版本只在安卓 4.4 版以下得到支持。

在 weex 中,Flexbox 是默认且唯一的样式模型,所以你不需要手动为元素添加 display: flex属性。

flex: <number>

flex 属性定义了 flex 成员项在容器中占据的尺寸。如果所有成员项都设置为 flex: 1,那么它们就有相等的宽度(水平排列)或者相等的高度(垂直排列)。如果一共有两个成员项,其中一个 flex: 1,另一个 flex: 2,那么第一个将占据 1/3 的空间,另一个占据 2/3。如果所有 flex 成员项都不设置 flex 属性,它们将根据容器的 justify-content 属性来决定如何排列。

一组平分了容器的图片。

一张固定宽度的图片加上一段流动布局的文本。

复杂的混合布局。

一段文本左对齐,其他内容右对齐。

我们可以使用以下属性来定位一个 weex 元素。

你可以按照以下步骤来规划 weex 页面的样式。

不支持 background-image,要达到background-image的效果,可以使用 <image>组件和 position 定位来现实。代码参考如下:

<template>

<div>

<image style="width:750pxheight:750px" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></image>

<div class="title">

<text style="font-size:50pxcolor: #ff0000">你好,image</text>

</div>

</div></template><style>

.title{position:absolute top:50 left:10

}</style>