小程序入门(一)
(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('跳转成功');
}
})