2020-02-29

微信小程序学习笔记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. 监听页面的生命周期函数:(1.onload:页面被加载 2. onReady:初次渲染完成 3. onShow:页面显示出来 4。onHide:页面隐藏起来时 5.onUnload )
  2. 初始化数据
  3. 监听.wxml中相关一些事件
  4. 监听其他事件:(滚动页面、页面滚动到底部、下拉刷新)

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

指导老师:王凌燕 李辉芳

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值