一、小程序布局与普通web开发差异
- 小程序实现响应式单位:rpx
小程序的设计稿通常是按照iphone6 宽度为750的尺寸设计的
.logo {width:80rpx,height:80rpx}
- 样式导入
@import "要引入的外部样式文件"
意义:大型项目开发中,为了方便样式复用
例如:@import "/public/css/style.wxss";
- 行内样式
<view style="color: {{index===1? 'red' : ''}}"</view>
- 小程序支持的选择器类型
![image-20210407093638717](media/image-20210407093638717.png)
二、小程序插值表达式写法
2.1 插件表达式:{{ }}
类似vue插件写法,可以在{{}}中做各种简单的运算 +,?:,>,<
参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
2.2 小程序事件机制
绑定事件格式: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
})
2.3 冒泡与阻止冒泡写法差异
复习一下事件流:事件冒泡和事件捕获
事件冒泡:由具体的事件产生的元素向上事件传递,直到最外层的元素
阻止冒泡:e.stopPropaGation()
事件捕获:传递方式与事件冒泡相反(即由最外层到最内层具体的元素的)
微信小程序如何事件事件冒泡:
注意:
1.默认用bind+事件名绑定的都是会冒泡的
2.通常用catch+事件名绑定的会阻止冒泡的
2.4 内置组件
组件:内置组件和自定义组件
内置组件(也称标签):
view,text,button,switch,swiper
https://img.alicdn.com/imgextra/i4/2206686532409/O1CN013zpnrU1TfMn6Vuz9u_!!2206686532409-0-lubanimage.jpg
2.5 小程序生命周期
-
生命周期:(英文 lifecycle)
-
小程序生命周期
-
整体应用的生命周期
App({ //程序启动时的只加载一次 onLaunch() {}, //切换到前台运行 onShow() {}, //切换后台运行 onHide() {}, //监听和收集代码错误信息 onError() {}, .... })
-
页面的生命周期
Page({ //页面加载时只执行一次 onLoad() {}, //监听页面初次渲染完成,此果就可以和页面进行各种交互,只加载一次 onReady() {}, //只要页面显示时就会触发 onShow() {}, //只要页面离开地就会触发 onHide() {}, //到达页面底端触发 onReachBottom() {}, //监听下拉刷新,注意要开启enablePullDownRefresh为true onPullDownRefresh() {}, //监听页面滚动 onPageScroll() {} })
-
2.6 小程序的路由
-
何为路由(英文:router)可以通过路由集中管理咱们的路径,当用户输入的路径匹配到路由中的路径时,就会打开对应的资源
<a href="http://www.baidu.com/?id=1"> 回顾vue路由模式: hash模式:特点: 地址栏中以#开始的参数 #a,兼容性好一些 history模式: 地址栏中以/分隔的 a/和去/b 需要服务端的支持
-
小程序的路由:
- 标签模式的路由
格式:<navigator url="要跳转的路径" open-type="跳转方式"></navigator> 标签路由类似于vue中的<router-link to="要跳转的路径"> 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', })