小程序入门，一

（1）

小程序没有DOM对象，一切基于组件化

小程序的四个重要的文件

a. *.js

b. *.wxml ---> view结构 ----> html

c. *.wxss ---> view样式 -----> css

d. *. json ----> view 数据 -----> json文件

（2）储备知识

a. 理解事件机制

b. 理解组件化

c. 理解数据绑定

d. Flex布局

e. 移动端适配方案

Iphon6： 1rpx = 1物理像素 = 0.5px

微信官方提供的换算方式：

1. 以iPhone6的物理像素个数为标准: 750;

2. 1rpx = 目标设备宽度 / 750 * px;

3. 注意此时底层已经做了viewport适配的处理，即实现了理想视口。

（3）数据绑定 & 事件

//数据绑定

（1）

Page({

/**

* 页面的初始数据

*/

data: {

msg: '开启小程序之旅'

},

})

this.setData({

msg: '我是修改之后的数据'

})

//生命周期

Page({

/**

* 页面的初始数据

*/

data: {

msg: '开启小程序之旅'

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

（2）事件

(1) 冒泡事件

(a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

(b) 冒泡事件列表：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

(2) 非冒泡事件

(a) 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。

(b) 非冒泡事件：表单事件和自定义事件通常是非冒泡事件

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

bind绑定：事件绑定不会阻止冒泡事件向上冒泡

catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡

（3）用户授权，获取用户的信息

wx.getUserInfo({ //微信小程序提供的API

//withCredentials: true,

success: (res) => {

console.log(res);

let user = res.userInfo;

this.setData({

user

})

}

})

（4）bind绑定：事件绑定不会阻止冒泡事件向上冒泡

catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡

（5）跳转页面

wx.navigateTo({ //可以回退

url: '/pages/list/list',

success(){

console.log('跳转成功');

}

})

wx.redirectTo({ //不能回退

url: '/pages/list/list',

success(){

console.log('跳转成功');

}

})