小程序开发（逻辑层、视图层）

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.routeroute 字段可以获取到当前页面的路径。

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: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，触发事件的组件的一些属性值集合

currentTargetObject，当前组件的一些属性值集合、事件绑定的当前组件。

CustomEvent 自定义事件对象属性列表（继承 BaseEvent）
detailObject，额外的信息

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 中相同的选择器

小程序开发（逻辑层、视图层）相关推荐

微信小程序之wx:if视图层的条件渲染 —— 微信小程序教程系列（10）
使用wx:if进行视图层的条件渲染示例: wxml:使用view  <button bindtap="EventHandle" ...
微信小程序之wx:if视图层的条件渲染
示例: wxml:使用view  <button bindtap="EventHandle">按钮</button& ...
走进小程序【六】微信小程序架构之【视图层】万字详解
文章目录
微信小程序开发--日历/日视图
背景最近项目中需要使用到日历组件,并且需要在日视图上显示当天的日报数据,最终实现的效果图如下所示: 看起来还是有些丑的,不过在此还是把实现的过程记录一下. 1.需求拆分从上图来看,我们的界面主要分 ...
知识库微信小程序开发
11月,CSDN知识库研发负责人尚林凯在厦门进行了微信小程序开发的分享.在1个小时的分享时间里,谈到小程序开发给技术人带来的影响,如何去开发小程序,以及在开发过程中踩过的那些坑. 什么是小程序小程序 ...
微信开发者工具无法选择预览和真机调试_小程序开发第二篇：使用微信小程序开发者工具、wepy框架初始化项目...
1.微信小程序开发者工具使用: 小程序原生开发:直接使用小程序开发者工具打开项目即可小程序框架开发:首选官方提供类vue.js开发框架 wepy.js ,备选 mpVue.我们选择的是 wepy ...
趣味测评对话交互版流量主小程序开发
趣味测评对话交互版流量主小程序开发逻辑: 图文视频简单易做:-张吸引人的图片,配上引人参与的文字,实现视频引流. 通过测试口令引流:视频提供小程序入口和编号,可吸引粉丝进入小程序缠产生收益. 前端: ...
农场种树养成兑换商城小程序开发
农场种树养成兑换商城小程序开发逻辑简介// 用户通过赠送的能量购买小树苗进行种植操作,我们后台可以对树的生长周期和能量收益进行各种设置.获得的能量可以兑换树,树可以用来兑换商城的小礼品.可以邀请好友 ...
wxml报错原因_微信小程序开发教程（八）视图层——.wxml详解
框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...
微信小程序开发---小程序框架---小程序的逻辑层---3
小程序的逻辑层小程序注册逻辑页面注册逻辑小程序注册逻辑 App函数注册全局唯一的小程序只能调用一次接受一个对象作为函数参数,这个对象指定了两个东西(第一个东西是小程序的全局数据,第二个东 ...

小程序开发（逻辑层、视图层）

逻辑层(App Service)

视图层

小程序开发（逻辑层、视图层）相关推荐

最新文章

热门文章