微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍


Posted in Javascript onOctober 13, 2016

微信小程序可以理解为云OS的概念,微信生态本身就是一个OS。加上微信公众平台和微信开发平台本身已经是非常成熟的架构,能够完美媲美App的功能,同时在交互体验方面也能够做到极致,大有取代App之势。苹果App Store模式的意义在于为第三方软件的提供者提供了方便而又高效的一个软件销售平台。用户购买应用所支付的费用由苹果与应用开发商3:7分成。如果微信小程序商城也采用类似的分佣模式,那8亿多的用户将是一个非常大的无形资产,成为腾讯继游戏、会员、广告后的另一个掘金源。

微信小程序允许人们无需进行下载安装就使用App。用户可以在微信上扫描二维码来打开程序。微信小程序可以应用在安卓和iOS等不同系统上,也可以在不同的平台上分享,因为它本身就类似一个网站页面。

微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍

小程序视图层(xx.xml)和逻辑层(xx.js)

整个系统分为两块视图层(View)和逻辑层(App Service)

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。

通过这个简单的例子来看:

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// This is our App Service.
// This is our data.
var helloData = {
 name: 'WeChat'
}

// Register a Page.
Page({
 data: helloData,
 changeName: function(e) {
  // sent data change to view
  this.setData({
   name: 'MINA'
  })
 }
})
  1. 开发者通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定,所以在页面一打开的时候会显示 Hello WeChat!
  2. 当点击按钮的时候,视图层会发送 changeName 的事件给逻辑层,逻辑层找到对应的事件处理函数
  3. 逻辑层执行了 setData 的操作,将 name 从 WeChat 变为 MINA,因为该数据和视图层已经绑定了,从而视图层会自动改变为 Hello MINA! 。

视图层为 xx.xml

逻辑层为 xx.js

读取时会先看逻辑层初始数据来填充视图层,视图层触发逻辑层中的事件,逻辑层返回并改变视图层的内容。

 逻辑层(App Service)

小程序开发框架的逻辑层是由JavaScript编写。

逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。 在 JavaScript 的基础上,我们做了一些修改,以方便地开发小程序。

  1. 增加 App 和 Page 方法,进行程序和页面的注册。
  2. 提供丰富的 API,如扫一扫,支付等微信特有能力。
  3. 每个页面有独立的作用域,并提供模块化能力。
  4. 由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。
  5. 开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。

初始化数据

初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组。

渲染层可以通过 WXML 对数据进行绑定。

示例代码:

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
 data: {
  text: 'init data',
  array: [{msg: '1'}, {msg: '2'}]
 }
})

Page.prototype.setData()

setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。

注意:

1.直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。
2.单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据

setData() 参数格式

接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。

其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。

示例代码:

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
 data: {
  text: 'init data',
  array: [{text: 'init data'}],
  object: {
   text: 'init data'
  }
 },
 changeText: function() {
  // this.data.text = 'changed data' // bad, it can not work
  this.setData({
   text: 'changed data'
  })
 },
 changeItemInArray: function() {
  // you can use this way to modify a danamic data path
  this.setData({
   'array[0].text':'changed data'
  })
 },
 changeItemInObject: function(){
  this.setData({
   'object.text': 'changed data'
  });
 },
 addNewField: function() {
  this.setData({
   'newField.text': 'new data'
  })
 }
})

视图层

框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。

将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构。

WXSS(WeiXin Style Sheet)用于描述页面的样式。

组件(Component)是视图的基本组成单元。

什么是事件

  1. 事件是视图层到逻辑层的通讯方式。
  2. 事件可以将用户的行为反馈到逻辑层进行处理。
  3. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  4. 事件对象可以携带额外信息,如id, dataset, touches。

事件的使用方式

在组件中绑定一个事件处理函数。

如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
在相应的Page定义中写上相应的事件处理函数,参数是event。
Page({
 tapName: function(event) {
  console.log(event)
 }
})

基础组件

框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。

什么是组件:

  1. 组件是视图层的基本组成单元。
  2. 组件自带一些功能与微信风格的样式。
  3. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。
<tagname property="value">
 Content goes here ...
</tagename>

注意:所有组件与属性都是小写,以连字符-连接

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
jsTree使用记录实例
Dec 01 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 #Javascript
js中class的点击事件没有效果的解决方法
Oct 13 #Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 #Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 #Javascript
js拼接html字符串的注意事项
Oct 13 #Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 #Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 #Javascript
You might like
php for 循环语句使用方法详细说明
2010/05/09 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
用JS实现的一个include函数
2007/07/21 Javascript
javascript比较文档位置
2008/04/08 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
python实现文件的备份流程详解
2019/06/18 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Python库安装速度过慢解决方案
2020/07/14 Python
运动会通讯稿150字
2014/02/15 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
维稳承诺书
2015/01/20 职场文书
会计出纳岗位职责
2015/03/31 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers