小程序布局与普通web开发差异

小程序布局尽量使用 rpx & flex 布局

一、小程序布局与普通web开发差异

（蓝湖）:（https://lanhuapp.com/） 测量css样式工具

1. 小程序实现响应式单位:rpx

小程序的设计稿通常是按照iphone6宽度为750的尺寸设计的
.log{width:80rpx,height:80rpx}

2. 样式引入

@import"要引入外部的样式文件"
意义:大型项目开发中，为了方便样式复用
例如:@import " / publicl css/style.wxss";
选择语言

3. 行内样式

a) 三目运算符也可以使用 - 如果报错可以不管 stye="{{ index == 1? 'red':'' }}"

4. 小程序支持的选择类型
   

二、小程序差值表达式

1. 插件表达式 {{}}

类似vue插件写法，可以在{{}}中做各种简单的运算+,? : ,>,<
参考官方文档:https: //developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

2. 小程序事件机制

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 小程序生命周期

1. 生命周期：（英文 lifecycle）
2. 小程序生命周期
   1. 整体应用的生命周期

   javascript
   app({
   onLaunch(){},//程序启动时只加载一次
   onShow(){},// 切换到前台
   onHide(){},//切换到后台
   onError(){},//监听和收集代码错误信息
   ...
   })
   

   2. 页面的生命周期

   Page({
   onLoad() {},//页面加载时只执行一次
   onReady(){},//监听页面初次渲染完成,此时就可以和页面进行各种交互，只加载一次
   onshow() {},//只要页面显示时就会触发
   onHide() {},//只要页面离开时就会触发
   onReachBottom() {},//到达页面底端触发
   onPullDownRefresh( ) {},//监听下拉刷新，注意要开启enablePullDownRefresh为:true
   onPageScrpll(){},//滚动时就会触发
   })
   

2.6小程序路由

1. 何为路由(英文：router) 可以通过路由集中管理咱们的路径，当用户输入的路径匹配到路由中的路径时，就会打开对应的资源

<a href="https://www.baidu.com/?id = 1">
回顾vue路由模式:
hash模式:特点:地址栏中以#开始的参数 #a，兼容性好一些
history模式:地址栏中以/分隔的  a/和去/b. . . 需要服务端的支持

2. 小程序的路由:

   1. 标签模式的路由

      1. navigate 默认值，即只能打开非tabBar页面
      2. switchTab只能跳转到tabBar页面
      3. reLaunch即能跳转到tabBar页面，也能跳转到非tabBar页面
      4. redirect只能跳转到非tabBar页面，但没有回退按钮相当于vue中this.$router.replace( '路径')
   

   2. JS模式的路由

Js模式路由类似于vue中的编程式导航例如: this.$router.push( )
    wx. navigateTo({ url: '/pages/jd_market/jd_market ' ,})