小程序教学2

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

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

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

样式导入

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

行内样式

<view style=“color: {{index===1? ‘red’ : ‘’}}”

小程序支持的选择器类型

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

插件表达式：{{ }}

类似vue插件写法，可以在{{}}中做各种简单的运算 +,?:,>,<

参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

小程序事件机制

绑定事件格式：bind+事件类型=“事件名” 注意小程序没有事件传参
传参要用自定义属性来传递
例如：
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
   })
   

如何阻止事件冒泡

默认用bind+事件名绑定的都是会冒泡的
通常用catch+事件名绑定的会阻止冒泡的

小程序的内置组件

内置组件(也可以称标签)：一般有view,text,button,switch,swiper
使用组件可以参考文档

小程序的生命周期

小程序的生命周期分为两种，整体应用的生命周期和页面的生命周期

1.整体应用的生命周期：

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

2.页面的生命周期

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

小程序的路由

标签内部写法

格式：<navigator url="要跳转的路径" open-type="跳转方式"></navigator>

js中的写法

  wx.navigateTo({
       url: '/pages/jd_market/jd_market',
     })

路由的跳转方式

open-type值的类型有：

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