微信小程序学习笔记3
进行更详细的组件学习,已经可以进行页面布局,首页制作,参照老师的讲解按部就班进行操作。
以下是本段时间总结下来的知识点,用来积累:
小程序界面的渲染:
.wxml文件和js文件—>js对象–>真正的Dom通过渲染—>WebView
数据发生变化:
- setData把msg数据从"Hello Word"变为"Goodbye"
- 产生的js对象对应的节点发生变化
- 对比变化:差异用到Dom树上是成为更新UI的目的(数据驱动) 小
程序的启动流程:
下载–>启动–>app.json–>注册App(并执行App的生命周期)–>加载自定义组件代码–>这是分为三步(
- page.json
- page.wxml
- 注册Page()–>执行Page()生命周期
)
生命周期函数: - onLounch:监听小程序初始化完成(网络请求获取用户信息)
- onShow:界面显示出来
- onHide:界面被隐藏
- onError:小程序发生错误
注册App时:
- 判断进入场景
- 监听生命周期
获取用户信息:
- wx.getUserInfo接口 App()实例只有一个并且全局共享(单例对象:将一些共享的数据放在里面)
- button组件:将open-type改为getUserInfo并绑定bindgetuseinfor事件去获取
- open-data展示用户信息
注册一个页面
Page({
handleGetUserInfo(event){
console.log(event)
}
})
注册时
- 绑定初始化数据
- 生命周期回调
- 事件处理函数
- 监听页面的生命周期函数:(1.onload:页面被加载 2. onReady:初次渲染完成 3. onShow:页面显示出来 4。onHide:页面隐藏起来时 5.onUnload )
- 初始化数据
- 监听.wxml中相关一些事件
- 监听其他事件:(滚动页面、页面滚动到底部、下拉刷新)
Text组件
- selectable:文本是否可选
- space:显示连续空格(1.nbsp一个空格 2.ensp半个中文字符大小的空格 3.emsp一个中文字符大小的空格)
- decode:是否解码文本
open-type取值:
- getPhoneNumber
- getUserInfo获取用户信息
View组件(容器组件,类似Div)
View(是part元素,独占一行)属性:
- hover-class:用户按下组件时,显示的样式
- hover-start-time:按下去多久变点击态
- hover-stay-time:保留多久的时间
- hover-stop-propogation是否阻止节点
image组件(显示图片1.image可以单标签2.默认自己的大小为320x240)
- src:图片资源 本地路径(相对路径/绝对路径)/远程路径
- mode:图片剪裁
- lazy-load:懒加载(运用时再加载)
- bindload:监听用户加载完成
- show-menu-by-longpress:识别小程序码
- binderror:识别监听到的错误
数据响应:绑定必须用setData
指导老师:王凌燕 李辉芳