1、小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
2、页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键
逻辑层(App Service)
1、小程序开发框架的逻辑层由 JavaScript 编写。
2、逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
3、由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。
4、开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。
注册程序:
App() —— App() 必须在 app.js 中注册,且不能注册多个。
App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。
注册页面:
Page
Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
1、生命周期函数:
onLoad: 页面加载
一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。
onShow: 页面显示
每次打开页面都会调用一次。
onReady: 页面初次渲染完成
一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏
当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。
2、页面相关事件处理函数:*
onPullDownRefresh: 下拉刷新
需要在app.json的window选项中或页面配置中开启enablePullDownRefresh
。
当处理完数据刷新后,wx.stopPullDownRefresh
可以停止当前页面的下拉刷新。
onReachBottom: 上拉触底
可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance
。
在触发距离内滑动期间,本事件只会被触发一次。
onPageScroll: 页面滚动
onShareAppMessage: 用户转发
Page.prototype.route
route 字段可以获取到当前页面的路径。
Page.prototype.setData()
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
注意:
1、直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
2、单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
3、请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题。
模块化:
可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports
(推荐使用)或者 exports
才能对外暴露接口。
视图层
框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。
将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
WXML
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
数据绑定:
WXML 中的动态数据均来自对应 Page
的 data
。
三元运算:
<view hidden="{{flag ? true : false}}"> Hidden </view>
列表渲染:
wx:for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
wx:for 也可以嵌套,下边是一个九九乘法表:
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
block wx:for
类似 block wx:if,也可以将 wx:for 用在标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 中的输入内容,
条件渲染:
wx:if
在框架中,使用 wx:if="{{condition}}"
来判断是否需要渲染该代码块:
也可以用 wx:elif
和 wx:else
来添加一个 else 块:
block wx:if
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
wx:if
vs hidden
:
如果需要频繁切换的情景下,用 hidden
更好,
如果在运行时条件不大可能改变则 wx:if
较好。
模板(template):
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
事件:
1、事件是视图层到逻辑层的通讯方式。/2、事件可以将用户的行为反馈到逻辑层进行处理。/3、事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。/4、事件对象可以携带额外信息,如 id, dataset, touches。
1、使用方式
如bindtap
,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
在相应的Page定义中写上相应的事件处理函数,参数是event。
Page({
tapName: function(event) {
console.log(event)
}
})
2、事件分类
事件分为冒泡事件和非冒泡事件:
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
3、事件绑定和冒泡
事件绑定的写法同组件的属性,以 key、value 的形式。
key
以bind
或catch
开头,然后跟上事件的类型,如bindtap
、catchtouchstart
。
bind
事件绑定不会阻止冒泡事件向上冒泡,catch
事件绑定可以阻止冒泡事件向上冒泡。
自基础库版本 1.5.0 起,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap
、catch:touchstart
。
value
是一个字符串,需要在对应的 Page
中定义同名的函数。不然当触发事件的时候会报错。
4、事件的捕获阶段
需要在捕获阶段监听事件时,可以采用capture-bind
、capture-catch
关键字,后者将中断捕获阶段和取消冒泡阶段。
在下面的代码中,点击 inner view 会先后调用handleTap2
、handleTap4
、handleTap3
、handleTap1
。
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
如果将上面代码中的第一个capture-bind
改为capture-catch
,将只触发handleTap2。
5、事件对象
如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。
BaseEvent基础事件对象属性列表
type
String,事件类型
timeStamp
Integer,事件生成时的时间戳
target
Object,触发事件的组件的一些属性值集合
currentTarget
Object,当前组件的一些属性值集合、事件绑定的当前组件。
CustomEvent 自定义事件对象属性列表(继承 BaseEvent)
detail
Object, 额外的信息
TouchEvent 触摸事件对象属性列表(继承 BaseEvent):
touches
Array,触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches
Array,触摸事件,当前变化的触摸点信息的数组
6、dataset
书写方式: 以data-
开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type
,最终在 event.currentTarget.dataset
中会将连字符转成驼峰elementType。
引用:
WXML 提供两种文件引用方式import
和include
。
import
import
可以在该文件中使用目标文件定义的template
import
有作用域的概念,即只会 import
目标文件中定义的 template
,而不会 import
目标文件 import
的 template
。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
<!-- A.wxml -->
<template name="A">
<text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>
include
include
可以将目标文件除了 <template/> <wxs/>
外的整个代码引入,相当于是拷贝到 include
位置,如:
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
1、尺寸单位
rpx(responsive pixel)
: 可以根据屏幕宽度进行自适应。
1rpx = 0.5px = 1物理像素
。
2、样式导入–外联样式表
使用@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束。
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
2、样式导入–内联样式表
框架组件上支持使用 style
、class
属性来控制组件的样式。
style
:静态的样式统一写到 class
中。style
接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style
中,以免影响渲染速度。
<view style="color:{{color}};" />
class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
<view class="normal_view" />
3、全局样式与局部样式
定义在 app.wxss
中的样式为全局样式,作用于每一个页面。
在 page
的 wxss
文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss
中相同的选择器