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

一、引入模板

小程序提供了两个引入外部模板的方法：import和include

使用外部模板可以实现大部分共同页面的代码利用，在一个app中，头部和脚部基本不会

变动太大，这时就可以通过模板的方式引入，实现多个页面的复用。

1.1 import

示例：

<!--view.wxml-->

<template name="view">

<text>{{text}}</text>

</template>

1

2

3

4

引入：

<import src="view.wxml"/>

<template is="view" data="{{text: 'forbar'}}"/>

1

2

注意：import有作用域，即import引入的模板只在当前页面有效，即import不会向下查找另外的模板

1.2 include

include标签可以看作是对 “html”的一个拷贝，即将外部的wxml片段拷贝进文档中

示例：

外部wxml片段

<!-- header.wxml -->

<view>header </view>

<!-- footer.wxml -->

<view>footer </view>

1

2

3

4

<!-- index.wxml -->

<include src="header.wxml"/>

<view>body </view>

<include src="footer.wxml"/>

1

2

3

4

5

总结：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"

在微信小程序后台管理系统中，找到“模板消息”菜单，点击进入。

在模板消息页面中，选择“包邮模板”，点击“添加模板”，添加包邮模板信息。

在添加模板页面中，输入模板标题，选择模板类型，输入模板内容，点击“保存”按钮，保存模板信息。

在模板消息页面中，可以看到刚才添加的包邮模板，点击“发送”按钮，可以将包邮模板发送给用户。

如果你是个人类的小程序，要想套用微信小程序模板开发一个属于自己的小程序感觉不是那么容易。最近有信息说个人的现在已经审核通不过了。不知道你想开发的是小游戏还是游戏类型的小程序。如果是小游戏的话是需要证书才能开发的。游戏类型的小程序应该可以找到模板，假如你真的想开发，可以尝试一下，祝你成功，欢迎评论留言私信交流，一起探讨

---