Applet view Layer (XX.XML) and Logical layer (xx.js)

The entire system is divided into two view layers (views) and a logical layer (APP Service)

The framework allows the data to be kept in sync with the view very simply. As the data changes, only the logical layer to modify the data, the view layer will be updated accordingly.

In this simple example:

<!-- This is our View --><view> Hello {{name}}! </view><button bindtap="changeName"> Click me! </button>

 //this was our App service. Our data. var hellodata = {name:  ' WeChat '}// Register a page.page ({data:hellodata, changename: function ( e) {//sent data change to view  This.setdata ({name:  ' MINA '})})        

• The developer binds the logical layer data to the name view layer through the framework name , so it is displayed when the page is opened.Hello WeChat!
• When the button is clicked, the view layer sends changeName events to the logical layer, the logical layer to find the corresponding event handler function
• The logical layer performs setData the action, changing the name from a WeChat MINA to, because the data and the view layer are already bound, and the view layer automatically changes to Hello MINA! .

The view layer is Xx.xml

The logical layer is xx.js

Reading will first look at the logical layer initial data to populate the view layer, the view layer triggers events in the logical layer, and the logical layer returns and changes the content of the view layer.

Logic Layer (APP Service)

The logical layer of the Small program development Framework is written by JavaScript.

The logical layer processes the data and sends it to the view layer, accepting event feedback from the view layer. On the basis of JavaScript, we have made some modifications to facilitate the development of small programs.

• Add apps and Page methods to register your programs and pages.
• Provide rich API, such as sweep, pay and other unique capabilities.
• Each page has a separate scope and provides modularity capabilities.
• Because the framework is not running in a browser, JavaScript is not available in the web, such as Document,window.
• All the code written by the developer will eventually be packaged as a JavaScript and run at the start of the applet until the applet is destroyed. Similar to Serviceworker, so the logic layer is also called App Service.

Initializing data

The initialization data is rendered as the first render of the page. Data is passed from the logical layer to the render layer in JSON form, so its values must be in a format that can be converted to JSON: strings, Numbers, Booleans, objects, arrays.

The render layer can bind the data through Wxml.

Example code:

<view>{{text}}</view><view>{{array[0].msg}}</view>

Page({  data: {    ‘init data‘,    array: [{msg: ‘1‘}, {msg: ‘2‘}]  }})

Page.prototype.setData ()

setDatafunction is used to send data from the logical layer to the view layer, while changing the corresponding this.data value.

Attention:

1. The direct modification of the This.data is invalid, cannot change the state of the page, and results in inconsistent data.
2. The data cannot be set more than 1024kB at a time, please try to avoid setting too much data at one time.

SetData () parameter format

Accepts an object that, in the form of key,value, changes the value of the key in the This.data to value.

Where key can be very flexible, given in the form of a data path, such as, and array[2].message a.b.c.d does not need to be predefined in This.data.

Example code:

<!--index.wxml--><View>{{text}}</View><buttonbindtap="Changetext" > Change normal data</Button><View>{{array[0].text}}</View><buttonbindtap= "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.jspage ({data: {text:' Init data ', array: [{text:' Init data '}, object: {text:' Init data '}, Changetext:function) {This.data.text = ' changed data '/bad, it can doesThis.setdata ({text:function ( {//you can use the this-to modify a danamic data path this.setda Ta ({ ' Array[0].text ': function (this.setdata ({ ' Object.text ':  Changed data '}); }, Addnewfield: function (this.setdata ({ ' Newfield.text ':  New Data '}}})              

View Layer

The view layer of the framework is written by Wxml and WXSS and is presented by the component.

The data from the logical layer is reflected into a view, and events from the view layer are sent to the logical layer.

Wxml (Weixin Markup language) is used to describe the structure of a page.

WXSS (Weixin style Sheet) is used to describe the style of the page.

Component (Component) is the basic constituent unit of a view.

What is an event

• An event is how the view layer communicates to the logical layer.
• Events can feed the user's behavior back to the logical layer for processing.
• Events can be bound to components, and when a trigger event is reached, the corresponding event handler in the logical layer is executed.
• Event objects can carry additional information, such as ID, DataSet, touches.

How events are used

• Binds an event handler function in the component.

For example bindtap , when the user clicks on the component, the corresponding event handler will be found in the page corresponding to the screen.

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

• Write the corresponding event handler in the corresponding page definition, and the argument is event.

Page({  function(event) {    console.log(event)  }})

Basic components

The framework provides developers with a range of basic components that developers can quickly develop by combining these basic components.

What is a component:

• A component is the basic constituent unit of a view layer.
• The component comes with some features and style styles.

• A component is usually 开始标签 included 结束标签 and 属性 used to decorate the component 内容 within two tags.

  <tagname property="value">  Content goes here ...</tagename>

  Note: All components and properties are lowercase, concatenated with hyphens -

Applet view Layer (XX.XML) and Logical layer (xx.js)