小程序深入理解1

//app.js
app({
	onLaunch: function(){

	}
})

//app.json
{
	"pages":[
		"pages/index/index"
	],
	"windows" : {
		"backgroundTextStyle" : "light"
	}
}

 

//app.wxss
.container {
	height: 100%
}

<!--index.wxml-->
<view class="container">
	<view bindtap="bindViewTap">
		<text>{{msg}}</text>
	</view>
</view>

//index.js
Page({
	data:{
		msg:'hello'
	},
	bindViewTap:function(){
		this.setData({
			msg:'hello world'
		})
	}
})

MINA框架：

封装微信客户端：文件系统（获取手机照片），网络通信（请求服务端数据），任务管理（打开扫一扫）等，对上层提供一整套javascript API。如下图：

目录结构：

demo1

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

 

// This is our App Service.
// This is our data.
const helloData = {
  name: 'WeChat'
}

// Register a Page.
Page({
  data: helloData,
  changeName(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

1.逻辑层数据的name和视图层数据的name绑定；
2.点击按钮，视图层会发送changeName的事件，到逻辑层；
3.逻辑层进行setData操作，data中的name属性改变。因为数据和视图层已经绑定，从而视图层会自动改变为：Hello MINA