微信小程序怎么引入外部的wxss

html-css09

微信小程序怎么引入外部的wxss,第1张

一、引入模板 小程序提供了两个引入外部模板的方法:import和include使用外部模板可以实现大部分共同页面的代码利用,在一个app中,头部和脚部基本不会 变动太大,这时就可以通过模板的方式引入,实现多个页面的复用。1.1 import示例:<!--view.wxml--> <template name="view"> <text>{{text}}</text> </template>1234引入:<import src="view.wxml"/> <template is="view" data="{{text: 'forbar'}}"/>12注意:import有作用域,即import引入的模板只在当前页面有效,即import不会向下查找另外的模板1.2 includeinclude标签可以看作是对 “html”的一个拷贝,即将外部的wxml片段拷贝进文档中 示例: 外部wxml片段<!-- header.wxml --> <view>header </view> <!-- footer.wxml --> <view>footer </view>1234<!-- index.wxml --> <include src="header.wxml"/> <view>body </view> <include src="footer.wxml"/>12345总结:import是引入模板片段,且有作用域限制,不能进行模板嵌套。include是引入wxml片段,相当于代码拷贝。二、WXSS 微信样式表小程序中,页面样式的渲染通过wxss文件实现,.wxss可以看成是css,因为它们都在实现相同的功能。实质上wxss也是在css的基础之上进行了扩充和修改得到的。 wxss在css上的扩展特性: 1)、尺寸单位:rpx rpx:是一个相对像素单位,可以根据屏幕宽度进行自适应。 针对移动端的开发,设计稿一般都是以iphone6为标准的。而iphone用的是视网膜屏,即我们css中设定的1px,在iphone上实际是由2px*2px的像素点组成的。 以iphone6为准,屏幕宽度375px,共有750个物理像素,则750rpx=350px,即1rpx=0.5px 2)、样式导入 @import 跟在css中的外部样式表的导入类似@import "common.wxss"

如果想让该样式库作为公共样式的话,可以在app.wxss文件中写入

@import "样式库路径"

如果只是作为某个页面的样式,可以在该页面的.wxss文件中写入

@import "样式库路径"

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有:(1)尺寸单位(2)样式导入尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。样式导入使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用表示语句结束。