微信小程序 视图层(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 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
event对象的方法 兼容多浏览器
Jun 27 Javascript
Extjs学习笔记之七 布局
Jan 08 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
利用promise及参数解构封装ajax请求的方法
Mar 24 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 版本]
2007/03/20 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python网络编程之读取网站根目录实例
2014/09/30 Python
Python如何快速实现分布式任务
2017/07/06 Python
python 2.7.14安装图文教程
2018/04/08 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
深入了解Python在HDA中的应用
2019/09/05 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
大学生家政服务项目创业计划书
2014/01/30 职场文书
争做文明公民倡议书
2014/08/29 职场文书
计划生育责任书
2015/05/09 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server