1、小程序特点
- 没有 DOM
- 组件化开发: 具备特定功能效果的代码集合
- 体积小,单个压缩包体积不能大于 2M,否则无法上线
- 小程序的四个重要的文件
a) *.js
b) *.wxml —> view 结构 ----> html
c) *.wxss —> view 样式 -----> css
d) *. json ----> view 数据 -----> json 文件 - 小程序适配方案: rpx (responsive pixel 响应式像素单位)
a) 小程序适配单位: rpx
b) 规定任何屏幕下宽度为 750rpx
c) 小程序会根据屏幕的宽度不同自动计算 rpx 值的大小
d) Iphone6 下: 1rpx = 1 物理像素 = 0.5px
2、小程序配置
- 全局配置: app.json,作用: 用于为整个应用进行选项设置
- 页面配置: 页面名称.json 作用:作用: 用于为指定的页面进行配置
- sitemap 配置: sitemap.json 作用:作用:用于被微信搜索爬取页面
2.1、 App
- 全局 app.js 中执行 App(),App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
- 生成当前应用的实例对象
- getApp()获取全局应用实例
2.2、Page
- 页面.js 中执行 Page()
- 生成当前页面的实例
- 通过 getCurrentPages 获取页面实例
3、数据绑定
3.1、初始化数据
页面.js 的 data 选项中
Page({
data:{
msg:"msg:"初始化数据""
}
})
3.2、使用数据
- 模板结构中使用双大括号 {{message}}
- 注意事项: 小程序中为单项数据流 model —> view
<view>{{msg}}</view>
3.3、 修改数据
this代表当前页面的实例对象
- this.setData({message: ‘修改之后的数据’}, callback),修改数据的行为始终是同步的
- 特点:
a) 同步修改: this.data 值被同步修改
b) 异步更新: 异步将 setData 函数用于将数据从逻辑层发送到视图层(异步)
3.4、数据绑定对比
- 小程序
- data中初始化数据
- 修改数据: this.setData()
- 修改数据的行为始终是同步的
- 数据流:
- 单项: Model —> View
- Vue
- data中初始化数据
- 修改数据: this.key = value
- 数据流:
- Vue是单项数据流: Model —> View
- Vue中实现了双向数据绑定: v-model
- React
- state中初始化状态数据
- 修改数据: this.setState()
- 自身钩子函数中(componentDidMount)异步的
- 非自身的钩子函数中(定时器的回调)同步的
- 数据流:
- 单项: Model —> View
4、 事件
4.1、事件分类
- 冒泡事件
a) 定义:冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。 - 非冒泡事件
a) 定义:当一个组件上的事件被触发后,该事件不会向父节点传递。
b) 非冒泡事件:表单事件和自定义事件通常是非冒泡事件
事件流的三个阶段
- 捕获: 从外向内
- 执行目标阶段
- 冒泡: 从内向外
4.2、绑定事件
- bind 绑定:事件绑定不会阻止冒泡事件向上冒泡
触发子元素的绑定事件,父元素相同事件也会触发 - catch 绑定: 事件绑定阻止冒泡事件向上冒泡
触发子元素的绑定事件,父元素相同事件不会触发
5、生命周期
- onLoad(Object query)
a) 页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开 - onShow()
a) 页面显示/切入前台时触发
b) 会执行多次 - onReady()
a) 页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,
可以和视图层进行交互。 - onHide()
a) 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面,小
程序切入后台等。 - onUnload()
a) 页面卸载时触发。如 wx.redirectTo 或 wx.navigateBack 到其他页面时。
6、获取用户信息
//wxml
<view>
<button bindgetuserinfo="handleUerinfo" open-type="getUserInfo">授权信息</button>
</view>
//js
handleUerinfo(res){
console.log(res);
}
handleUerinfo(res){
console.log(res);
if(res.detail.userInfo){//是否获取到了用户信息
this.setData({
userInfo:res.detail.userInfo;//更新数据
})
}
}
上面用于首次登录,如果下次登录还是需要授权,于是用 wx.getUserInfo(Object object)
onLoad: function (options) {
wx.getUserInfo({
success:(res)=>{
console.log(res);
this.setData({userInfo:res.userInfo})
},
fail:(err)=>{console.log(err)}
})
}
- 用户未授权(首次登陆)
- button open-type=‘getUserInfo’
- 用户已经授权(再次登陆)
- wx.getUserInfo
7、条件渲染
- wx:if=’条件’
<view wx:if="{{condition}}"> True </view>
- wx:elif=’条件’
- wx:else
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
length>5只显示1;length<=5且>2只显示2;length<=5且<=2只显示3
wx:if VS hidden
- hidden 用法:
- wx:if 等同于 v-if, 条件为 false 的时候不加载,条件切换的时候决定元素销毁或者
重新加载渲染 - hidden 等同于 v-show, 始终加载元素, 条件切换的时候决定元素的显示和隐藏