小程序的使用

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

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

小程序的设计稿通常是按照iphone6 宽度为750的尺寸设计的

.logo {width:80rpx,height:80rpx}

2. 样式导入

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

3. 行内样式

  <view style="color: {{index===1? 'red' : ''}}"</view>

二、小程序插值表达式写法

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

1. 生命周期:(英文 lifecycle)

2. 小程序生命周期

   1. 整体应用的生命周期

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

   2. 页面的生命周期

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