微信小程序 视图层(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 相关文章推荐
判断用户是否在线的代码
Mar 05 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 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中GET变量的使用
2006/10/09 PHP
php str_replace的替换漏洞
2008/03/15 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Python中序列的修改、散列与切片详解
2017/08/27 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python实现电子产品商店
2019/02/26 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
python__name__原理及用法详解
2019/11/02 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
建筑横幅标语
2014/10/09 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python