微信小程序

常用标签

<text>:相当于<span>标签，行内元素，不会换行
<view>:相当于<div>标签，块级元素，会换行
<block>:占位符标签，写代码的时候，可以看到这个标签存在，但在页面渲染的时候，小程序会将其移除
<image>:图片标签，且他存在默认的宽高：320*240
<navigator>:超链接标签，类似于a标签
<button>:按钮
<icon>:字体图标
<radio>:单选框，需要搭配父标签radio-group一起使用
<checkbox>:复选框标签，需要搭配父标签checkbox-group一起使用
<scroll-view>：局部滚动

常见事件

点击事件

bind/catch：bind是在冒泡阶段拿到事件，catch是在捕获阶段拿到事件

点击事件：bindtap
长按事件：bindlongpress

返回页面事件

wx.navigateTo：
- 这是最普遍的一种跳转方式，其官方解释为：“保留当前页面，跳转到应用内的某个页面”
- 类似于html中的 window.location.href=" "
- 小程序中左上角有一个返回箭头，可返回上一个页面
- 也可以通过方法 wx.navigateBack 返回原页面
wx.redirectTo：
- 关闭当前页面，跳转到应用内的某个页面。
- 左上角没有返回箭头，不能返回上一个页面
wx.switchTab：
- 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
- wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面
wx.reLaunch：
- 关闭所有页面，打开到应用内的某个页面。
- 跟wx.redirectTo 一样左上角不会出现返回箭头，但两者却不完全相同
- 这里要提到小程序中的 getCurrentPages() 方法。在wx.navigateTo中，每跳转一个新的页面，其原始页面就会被加入堆栈，通过调用wx.navigateBack(OBJECT)可通过获取堆栈中保存的页面返回上一级或多级页面，wx.redirectTo,方法则不会被加入堆栈,但仍可通过wx.navigateBack(OBJECT)方法返回之前堆栈中的页面。wx.reLaunch 方法则会清空当前的堆栈。

弹窗

第一种：弹出提示框，可以选择确定或者取消。

 wx.showModal({
     title: '提示',
     content: '这是一个模态弹窗',
     success: function (res) {
       if (res.confirm) {//这里是点击了确定以后
         console.log('用户点击确定')
       } else {//这里是点击了取消以后
         console.log('用户点击取消')
       }
     }
   })

第二种：不带确定和取消的，直接提示成功

wx.showToast({
     title: '成功',
     icon: 'success',
     duration: 2000//持续的时间
   })

第三种：提示等待中...

wx.showToast({
     title: '加载中...',
     icon: 'loading',
     duration: 2000//持续的时间
   })
// 关闭加载
wx.hideLoading();

第四种：提示文字，没有任何图标效果，但是文字可以写的很多。

wx.showToast({
     title: '这里面可以写很多的文字，比其他的弹窗都要多！',
     icon: 'none',
     duration: 2000//持续的时间
   })

第五种：弹窗提示选择，例如选择ABCD那种

wx.showActionSheet({
     itemList: ['A', 'B', 'C'],
     success: function (res) {
       if (!res.cancel) {
         console.log(res.tapIndex)//这里是点击了那个按钮的下标
       }
     }
   })

第六种：多用于页面提示加载中

// 写在wxml中
<loading hidden="{{hidden}}">
       加载中...
</loading>
hidden有两个值：false和true

生命周期

生命周期中，onshow在onready之前执行
网络请求推荐在onLoad中发送
生命周期执行顺序：onLoad --> onShow --> onReady --> onHide
- onLoad：页面加载时执行，只执行一次；
- onShow：页面展示时执行，执行多次；
- onReady：页面初次渲染时执行，只执行一次；
- onHide：页面从前台进入后台时执行；
- onUnload：页面卸载时执行；
切换页面时触发的生命周期：
- 当首次加载A页面，A触发的生命周期为：onLoad --> onShow --> onReady；
- 从A页面切换到B页面时，A页面触发onHide,B页面触发的生命周期顺序与上面一致；
- 当B页面返回到A页面时，触发onUnload,当不清缓存，再次进入A页面时,只触发onShow。

组件化

使用方法

创建component，写文件
然后是你需要使用的component的页面的json配置usingComponents和"component": true
最后使用
组件设置样式只能用class

组件传递数据

(组件也可以传递样式)

页面传给组件：在组件的properties中接收

//页面：
<one name="hhh"></one>

// one组件的js部分
properties: {
    name:{
      type:String,//【String、Number、Boolean、Object、Array、null(不限制类型)】
      value:"默认数据，没传就展示默认的"
    }
  },

      
// one组价你的wxml部分：
<view>{{name}}</view>

组件传给页面：自定义事件

// one组价的wxml部分：
<view bindtap="clickInCpn">{{name}}</view>


// one组件的js部分
methods: {
    clickInCpn(){
      console.log("组件中被点击");
      this.triggerEvent("clickToPage","数据发送给page");//这个click是你起一个自定义事件的名字
    }
  }

      
//页面：
<one bind:clickToPage="clickInPage"></one>

//页面js
clickInPage(e){
    console.log("page");
    console.log(e.detail);
  },

组件生命周期

最重要的生命周期是，，包含一个组件实例生命流程的最主要时间点
- created【组件被创建】
- attached【组件被添加到组件树中】
- detached【组件从组件树中移除】
组件的的生命周期也可以在lifetimes字段内进行声明(这是推荐的方式，其优先级最高)
在组件里也可以监听页面的生命周期，在pageLifetimes字段内进行声明，可用的包括
- show【组件所在的页面展示】
- hide【组件所在的页面被隐藏】
- resize【组件所在的页面发生变化】

组件监听数据变化

组件也可以监听数据变化，在observers中声明

网络请求

网络请求推荐在onLoad中发送

插槽

使用<slot></slot>预留一个插槽。然后再你设置的组件中间加入你需要的就行。

多个插槽可以设置name。然后再组件js中设置options: { multipleSlots: true }。然后页面使用就是<my-slot solt="设置的name"></my-slot>

页面数据传递

传递给跳转页面

方式一：路径拼接query参数

//跳转前页面
wx.navigateTo({
    url:"/pages/detail/detail?name=jl&age=18",//写死开发中一般这样
})

const name = this.data.name
const age = this.data.age
wx.navigateTo({
    url:"/pages/detail/detail?name=${name}&age=${age}",
})

//跳转后页面
onLoad(options){
    console.log(options)//就是我们传来的数据
}

方式二：eventChannel

传递给返回页面

返回页面使用wx.navigateBack()

方式一：在onUnload中

onUnload(){
    const pages = getCurrentPages()
    const prePage = pages[pages.length - 2],//-1是当前页面，-2是上一个页面
    prePage.setData({
        message:"修改"
    })
}

方式二：eventChannel

常用标签​

常见事件​

点击事件​

返回页面事件​

弹窗​

生命周期​

组件化​

使用方法​

组件传递数据​

组件生命周期​

组件监听数据变化​

网络请求​

插槽​

页面数据传递​

传递给跳转页面​

传递给返回页面​