如何使用微信小程序开发？

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

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

相当于rem

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

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

2.样式导入

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

3.行内样式

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c02p0ts2-1617889861473)(C:\Users\liubin\Pictures\微信截图_20210408213805.png)]

5.全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

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

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 冒泡与阻止冒泡写法差异

注意：
	1.默认用bind+事件名绑定的都是会冒泡的
	2.通常用catch+事件名绑定的会阻止冒泡的

2.4小程序生命周期

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

2. 小程序生命周期

   1. 整体应用的生命周期

App({
 //程序启动时的只加载一次
	onLaunch() {},
	//切换到前台运行,就是小程序在手机界面时触发
	onShow() {},
  //切换后台运行，就是小程序不在手机界面时触发
	onHide() {},
	//监听和收集代码错误信息
	onError() {},
	....
})

2.页面的生命周期

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

小程序整体的生命周期会在页面级之前触发

2.6 小程序的路由

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

<a href="http://www.baidu.com/?id=1">

回顾vue路由模式：
	 hash模式：特点： 地址栏中以#开始的参数  #a,兼容性好一些
	 history模式： 地址栏中以/分隔的  a/和去/b  需要服务端的支持

2.小程序的路由：

1. 标签模式的路由

格式：<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('路径 ')

2.JS模式的路由

JS模式路由类似于Vue中的编程式导航 例如：this.$router.push()

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

    wx.reLaunch({
      url: 'url',
    })