小程序布局与普通Web开发差异
- 小程序的设计稿通常是按照iPhone6 宽度一般韦750 的尺寸设计的
- 小程序代码是真的h5代码吗？小程序当然不是H5，它也不用html写，使用WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
小程序样式导入
- 使用@import语句可以导入外联样式表，只支持相对路径
例如：@import "/public/css/style.wxss";
- 行内样式
<view style="color: {{index===1? 'red' : ''}}"</view>
小程序支持的选择器类型
小程序插值表达式写法
- 插件表达式
<view class="{{index == 0 ? 'getFocus' : 'lostFocus'}}">常用</view>
- 小程序事件机制
绑定事件格式：bind+事件名 例如：<button bindtap="要触发的方法">
传参问题：小程序主要通过自定义属性来传参
wxml:
<button bindtap="del" data-idx="{{index}}">X</button>
js:
//用e.currentTarget.dataset来接收视图传递过来的自定义属性值
del(e) {
let {idx}=e.currentTarget.dataset;
console.log(idx)
}
视图同步的问题：可以通过this.setData()来同步视图
this.setData({
list:this.data.list
})
- 冒泡与阻止冒泡写法差异
复习一下事件流：事件冒泡和事件捕获
事件冒泡：由具体的事件产生的元素向上事件传递，直到最外层的元素
阻止冒泡：e.stopPropaGation()
事件捕获：传递方式与事件冒泡相反（即由最外层到最内层具体的元素的）
微信小程序如何事件事件冒泡：
注意：
1.默认用bind+事件名绑定的都是会冒泡的
2.通常用catch+事件名绑定的会阻止冒泡的
- 小程序常用内置组件
组件：内置组件和自定义组件
内置组件(也称标签)：
view,text,button,switch,swiper
小程序生命周期
onLaunch() {
console.log('onLaunch监听小程序初始化');
}
onShow() {
console.log('onShow监听小程序显示');
}
onHide() {
console.log('onLaunch监听小程序隐藏');
}
小程序生命周期
- 整体应用的生命周期
App({
//程序启动时的只加载一次
onLaunch() {},
//切换到前台运行
onShow() {},
//切换后台运行
onHide() {},
//监听和收集代码错误信息
onError() {},
....
})
- 页面的生命周期
Page({
//页面加载时只执行一次
onLoad() {},
//监听页面初次渲染完成,此果就可以和页面进行各种交互，只加载一次
onReady() {},
//只要页面显示时就会触发
onShow() {},
//只要页面离开地就会触发
onHide() {},
//到达页面底端触发
onReachBottom() {},
//监听下拉刷新，注意要开启enablePullDownRefresh为true
onPullDownRefresh() {},
//监听页面滚动
onPageScroll() {}
})
小程序的路由
- 路由管理
在小程序中所有页面的路由全部由框架进行管理，框架以栈的形式维护了当前的所有页面。 - 路由跳转方式
在小程序中路由跳转方式有两种（组件跳转，api跳转） - navigateTo, redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的onLoad中获取
- 页面只有在出栈后才会被卸载也就是执行onUnload, tab页面只有在程序卸 载的时候才会卸载
标签模式的路由
格式：
标签路由类似于vue中的
open-type值的类型有：
1.navigate 默认值，即只能打开非tabBar页面，有回退按钮
相当于this.$router.push('路径')
2.switchTab 只能跳转到tabBar页面
3.reLaunch 即能跳转到tabBar页面，也能跳转到非tabBar页面
4.redirect 只能跳转到非tabBar页面，但没有回退按钮 相当于vue中this.$router.replace('路径 ')
JS模式的路由
JS模式路由类似于Vue中的编程式导航 例如：this.$router.push()
wx.navigateTo({
url: '/pages/jd_market/jd_market',
})
wx.switchTab({
url: `/pages/shopping/shopping`,
})
wx.reLaunch({
url: 'url',
})