小程序提供了两个引入外部模板的方法: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"
1. 开发小程序时,每个页面一定要在app.json文件中注册,页面文件夹和其包含的四个文件的名字要保持一致。
2. 小程序发起的都是HTTPS网络请求,在开发调试的过程中可以不校验协议和TLS版本,但在实际上线后必须进行HTTPS协议通信。
3. 小程序可以进行组件化开发以及数据绑定,所有对于DOM的 *** 作都是基于数据驱动的,并没有直接进行DOM *** 作的做法,换言之,小程序内没有document对象,原生js和jQuery里的DOM *** 作思维要舍弃掉。
4. 小程序的网络请求wx.request()是不自带Cookies的,这和浏览器上的网络请求不同,因此基于Cookies实现的会话管理不适用于小程序。
5. 小程序的脚本文件中,内置对象是page,而非传统浏览器里的window,因此所有基于window对象来写的库(例如jQuery)都不适用于小程序。
6. 小程序提供模板功能,模板拥有自己的作用域,它只能使用从data属性传入的数据。
7. 每一个页面文件夹下的.json文件是用来写配置项的,如果该页面无需添加相关配置,.json文件也要写上一对大括号(“{ }”),否则会报错。
8. 在同一个tab里的页面可以跳转,并且允许携带参数。不同tab的页面之间无法跳转,使用wx.navigateTo()接口会报错。同时,tab之间的跳转可以用wx.switchTab()实现,但是路径后不能带参数。
9. 脚本文件里data的数据,在更新的时候要通过this.setData()方法来更新,而不能直接用“=”来做。
10. 在组件标签里,可以通过“data-属性值”的方式绑定我们需要的数据,然后在事件内置event对象里进行获取。
11. 小程序里也存在事件的冒泡,具体的冒泡事件可以参考官方文档,如果希望事件向上冒泡,则使用bind来绑定事件,若希望阻止事件冒泡,就使用catch来进行事件绑定。
12. 小程序支持文件引用,有import和include两种方式,import有作用域,也就是引入的目标文件里import的模板不会被引入;而include等于是将目标文件除 以外的整个代码进行引入。
13. wx.login()和wx.getUserInfo()是两个独立的接口,前者可以实现用户登录,这个过程是悄无声息的,不需要用户授权,登录后可以拿到用户的openid和session_key;而wx.getUserInfo()可以拿到用户的具体信息,这个过程需要获得用户的授权,开发时也必须考虑用户拒绝授权的场景。
14. 目前小程序可以分享给微信好友和微信群,但小程序默认是没有这个功能的,只有在Page里定义了onShareAppMessage事件处理函数,点击小程序右上角才可以看到分享按钮。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)