微信小程序 视图层(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获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
js自定义回调函数
Dec 13 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
微信小程序开发探究
Dec 27 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
php格式化时间戳
2016/12/17 PHP
php将html转为图片的实现方法
2017/05/19 PHP
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python群发邮件实例代码
2014/01/03 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
华三通信H3C面试题
2015/05/15 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
结构工程个人自荐信范文
2013/11/30 职场文书
销售找工作求职信
2013/12/20 职场文书
九年级化学教学反思
2014/01/28 职场文书
移交协议书
2014/08/19 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
创业计划书之酒店
2019/08/30 职场文书