玩法介绍当前位置:帝豪2娱乐 > 玩法介绍 > >

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

  

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

  

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

  

  

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

  

  

  

  

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

  

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

  

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

  

  

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

  
  
     Hello {{name}}!     // 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.   
  3. 当点击按钮的时候,视图层会发送 changeName 的事件给逻辑层,逻辑层找到对应的事件处理函数
  4.   
  5. 逻辑层执行了 setData 的操作,将 name 从 WeChat 变为 MINA,因为该数据和视图层已经绑定了,从而视图层会自动改变为 Hello MINA! 。
  6.   
  

视图层为 xx.xml  

  

逻辑层为 xx.js  

  

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

  

  

逻辑层(App 帝豪娱乐平台 Service)  

  

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

  

  

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

  

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

      
      

  10.   
  

初始化数据  
  

  

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

  

  

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

  

  

示例代码:  

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

Page.prototype.setData()  
  

  

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

  

  

注意:  

  

1.直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。

  
  2.单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据  

  

setData() 参数格式 (责任编辑:admin)

上一篇:JavaScript基础语法、dom操作树及document对象

下一篇:没有了

推荐内容