微信小程序外部引入方法
来源:互联网 发布:centos更新火狐浏览器 编辑:程序博客网 时间:2024/06/02 02:37
一、引入模板
小程序提供了两个引入外部模板的方法: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";
阅读全文
0 0
- 微信小程序外部引入方法
- 微信小程序如何引入外部字体库 Iconfont
- 微信小程序----引入外部字体库iconfont的图标
- .NET中如何引入外部的程序
- IDEA引入外部jar包的方法
- HTML引入外部JS文件的方法
- Android Studio引入外部so的方法
- maven 引入外部jar包的方法
- 微信小程序添加外部字体方法
- Centos命令行执行Java程序(引入外部Jar)
- c++调用外部程序方法
- 调用外部程序的方法
- 调用外部程序的方法
- 调用外部程序的方法
- Android引入外部自定义特殊字体的方法
- Android引入外部自定义特殊字体的方法
- Android引入外部自定义特殊字体的方法
- Android引入外部自定义特殊字体的方法
- TCP长连接和Keepalive详解
- Qualcomm MDM9207集大成者--美格智能SLM750模块
- PHP使用部分函数传入乱码作为变量会报错
- tensorflow学习笔记(八):模型持久化 saver and restore
- 第四篇:JAVA操作Excel
- 微信小程序外部引入方法
- Java HashMap的工作原理
- PAT乙-1005 继续(3n+1)猜想
- Oracle expdp/impdp导出导入命令及数据库备份(转)
- JAVA容器之-SET
- 624. Maximum Distance in Arrays 数组最大距离
- concurrent-01(线程安全单例模式)
- android 高德地图之poi搜索功能的实现
- 使用expdp和impdp时应该注重的事项: