小程序布局尽量使用 rpx & flex 布局
一、小程序布局与普通web开发差异
(蓝湖):(https://lanhuapp.com/) 测量css样式工具
- 小程序实现响应式单位:rpx
小程序的设计稿通常是按照iphone6宽度为750的尺寸设计的
.log{width:80rpx,height:80rpx}
- 样式引入
@import"要引入外部的样式文件"
意义:大型项目开发中,为了方便样式复用
例如:@import " / publicl css/style.wxss";
选择语言
- 行内样式
a) 三目运算符也可以使用 - 如果报错可以不管 stye="{{ index == 1? 'red':'' }}"
- 小程序支持的选择类型
二、小程序差值表达式
- 插件表达式 {{}}
类似vue插件写法,可以在{{}}中做各种简单的运算+,? : ,>,<
参考官方文档:https: //developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
- 小程序事件机制
bind == @ tap== click bindtap === vue(onclick)
绑定事件格式: bind+事件名惇例如:<button bindtap="要触发的方法">
传参问题:小程序主要通过自定义属性来传参
<button bindtap="del" data-idx="{{index}} ">x</button>
wxml:
<button bindtap="del" data-idx="i{index}} ">x</button>
js :
//事件绑定方法del(e) {
let {idx}=e.currentTarget.dataset;
console.log ( idx )
}
视图同步的问题:可以通过this.setData( )来同步视图
this.setData ({
setData:设置数据
list:this.data.list
list:原有数据
this.data.list:修改过的数据
})
2.3 冒泡与阻止事件冒泡写法差异
复习一下事件流:事件冒泡和事件捕获
事件冒泡:由具体的时间产生的元素向上事件传递,直到最外层的元素
阻止冒泡:e.stopPropagation()
事件捕获:传递方式与事件冒泡相反(即由最外层到最内层具体的元素的)
微信小程序如何事件冒泡:
注意:
1. 默认用bind+事件名绑定的都是会冒泡的
2. 通常用catch+事件名绑定的会阻止冒泡的
2.4 内置组件
组件:内置组件和自定义组件
内置组件(也称作标签) :
view,text,button,switch.swiper
2.5 小程序生命周期
- 生命周期:(英文 lifecycle)
- 小程序生命周期
- 整体应用的生命周期
javascript app({ onLaunch(){},//程序启动时只加载一次 onShow(){},// 切换到前台 onHide(){},//切换到后台 onError(){},//监听和收集代码错误信息 ... })
- 页面的生命周期
Page({ onLoad() {},//页面加载时只执行一次 onReady(){},//监听页面初次渲染完成,此时就可以和页面进行各种交互,只加载一次 onshow() {},//只要页面显示时就会触发 onHide() {},//只要页面离开时就会触发 onReachBottom() {},//到达页面底端触发 onPullDownRefresh( ) {},//监听下拉刷新,注意要开启enablePullDownRefresh为:true onPageScrpll(){},//滚动时就会触发 })
2.6小程序路由
- 何为路由(英文:router) 可以通过路由集中管理咱们的路径,当用户输入的路径匹配到路由中的路径时,就会打开对应的资源
<a href="https://www.baidu.com/?id = 1">
回顾vue路由模式:
hash模式:特点:地址栏中以#开始的参数 #a,兼容性好一些
history模式:地址栏中以/分隔的 a/和去/b. . . 需要服务端的支持
-
小程序的路由:
- 标签模式的路由
1. navigate 默认值,即只能打开非tabBar页面 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 ' ,})