微信小程序 视图层(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 相关文章推荐
jquery 问答知识整理
Feb 11 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
Three.js学习之网格
Aug 10 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
微信小程序switch组件使用详解
Jan 31 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
无线电的诞生过程
2021/03/01 无线电
学习php设计模式 php实现适配器模式
2015/12/07 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
python 上下文管理器使用方法小结
2017/10/10 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
大学学习生活感言
2014/01/18 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
数学备课组工作总结
2015/08/12 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS