前不久其实是开始学习了大约一周左右的微信小程序开发，但是学习的时间比较零碎，加上事情有些多，所以进度很慢又中断了一段时间。之前一直在看“极客学院-【微信小程序开发课程】”的视频，又在微信小程序开发官方网址里面进行基本的学习（关于小程序的含义、内容、申请及注册等内容），到今天为止，前期的准备工作已经完成了，只剩开发任务未完成。开发任务部分我主要是负责前端，微信小程序涉及的也主要是前端的知识，但因为它的知识结构还是有自己的特征与不同点，所以我还在不断学习和摸索中。
今日主要是在线上继续跟进小程序的学习，并且继续尝试进行基本的首页开发。但是线上看视频学习有点慢，步骤要一步一步的跟上，有些影响开发进度。然后今天的时间有点赶，因为有两个座谈会加上工作室讨论班和其他课程学习，所以花在项目上的时间只有2小时左右。下面是大致的学习内容——
学习地址链接：https://www.bilibili.com/video/av12777282?p=6视图与渲染
https://www.bilibili.com/video/av12777282?p=7微信小程序事件
https://www.bilibili.com/video/av12777282?p=8综合案例：快递查询
https://www.bilibili.com/video/av12777282?p=9微信小程序配置详解
https://www.bilibili.com/video/av12777282?p=10生命周期与app对象的使用
主要学习到的有：
事件——事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如id, dataset, touches。
事件的使用方式——在组件中绑定一个事件处理函数；在相应的Page定义中写上相应的事件处理函数，参数是event；
事件分为冒泡事件和非冒泡事件
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
微信小程序项目配置 ——
使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#000fff",
"navigationBarTitleText": "微信小程序",
"navigationBarTextStyle": "white",
"backgroundColor": "#ffffff"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "pages/assests/imgs/home_normal.png",
"selectedIconPath": "pages/assests/imgs/home_pressed.png",
"color": "#000000",
"selectedColor": "#CED63A"
},
{
"pagePath": "pages/logs/logs",
"text": "第二页",
"iconPath": "pages/assests/imgs/second_normal.png",
"selectedIconPath": "pages/assests/imgs/second_pressed.png",
"color": "#000000",
"selectedColor": "#CED63A"
}
]
},
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
},
"debug": true}
生命周期和APP对象的使用——
//app.jsApp({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync(‘logs‘) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs‘, logs)
},
onShow: function() {
console.log("onShow")
},
onHide: function() {
console.log("onHide")
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口 wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
进入前台: onShow()
进入后台: onHide()
可以设置全局的变量,后面页面要使用的时候可以直接得到app调用取得变量的值。
明天由于白天全天有课，只能晚上进行开发任务。预计用4小时左右时间进行学习并且完善好基本的首页开发。