微信小程序2

1.页面路由

1-1data

 data是页面第一次渲染使用的的初始数据,wxml中使用时{{数据名}}

data: {

  },

1-2onLoad

 只会调用一次,

onLoad: function (options) {
//options是打开当前页面路径中的参数
  },

1-3onReady

 页面初次完成渲染时触发,只会调用一次

onReady: function () {

  },

1-4onShow

 页面显示/切入前台时触发

onShow: function () {

  },

1-5onHide

 页面隐藏/切入后台时触发，如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等

onHide: function () {

  },

1-6onUnload

 页面卸载时触发,如wx.redirectTo或wx.navigateBack到其它页面时

onUnload: function () {

  },

1-7onPullDownRefresh

 监听用户下来刷星事件
 需要在全局app.json中的window选项中开启enablePullDownRefresh
 wx.stopPullDownRefresh可以停止当前页面的下拉刷新

onPullDownRefresh: function () {

  },

1-8onReachBottom

 监听用户上拉触底事件
 需要在全局app.json中的window选项中开启onReachBottomDistance
 在触发距离内滑动期间，本事件只会被触发一次

onReachBottom: function () {

  },

1-9onShareAppMessage

 监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容
 注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
 参数：
  from:转发事件来源(button页面按钮,menu右上角转发菜单)
  target:如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为
      undefined
  webViewUrl:页面中包含web-view组件时，返回当前web-view的url
 该函数要返回一个对象,用于自定义收藏内容：
  title:自定义标题
  imageUrl:自定义图片路径,默认页面截图
  path:转发路径,必须以/开头的完整路径

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

1-10onPageScroll

 监听用户滑动页面事件
 需要的时候再定义,减少对渲染层-逻辑层通信的影响
 

onPageScroll: function () {

  },

1-11onResize

 小程序屏幕旋转时触发

onResize: function () {

  },

1-12onTabItemTap

 点击tab时触发

onTabItemTap: function (item) {
	item.index //被点击tabItem的序号,从0开始
	item.pagePath//被点击tabItem的页面路径
	item.text//被点击tabItem的按钮文字
  },

1-13onAddToFavorites

 监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容

Page({
  onAddToFavorites(res) {
  	//页面中包含web-view组件时，返回当前web-view的urlres.webviewUrl)
  	console.log(res.webviewUrl)
    return {
      title: '自定义标题',//自定义标题,默认页面标题或账号名称
      imageUrl: 'http://demo.png',//自定义图片,默认为页面截图
      query: 'name=xxx&age=xxx',//自定义query字段,默认当前页面的query
    }
  }
})

2.自定义组件

2-1创建自定义组件

 一个自定义组件由 json wxml wxss js 4个文件组成
 需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）

{
  "component": true
}

 自定义组件的js文件

Component({
  options:{
      multipleSlots:true  //在组件定义时的选项中启用多slot支持 
  },
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

2-2使用自定义组件

 在使用的页面的json文件中引用声明

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

 在wxml中调用

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name></component-tag-name>
</view>

 注意：自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错
    自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式

2-3父传子

<!--父 级 的 wxml文件-->
<view>
    <my-component myvalue="父亲的值"></my-component>
</view>

//自定义组件的js文件
Component({
	properties: {
		//接收参数
        myvalue:{
            type:'string',
            value:"默认值",
        }
    },
})

<!--自定义组件 的 wxml文件-->
<view>
    我是组件---
    {{myvalue}}
</view>

2-4组件内修改值

<!--父 级 的 wxml文件-->
<view>
    <my-component myvalue="父亲的值"></my-component>
</view>

<!--自定义组件 的 wxml文件-->
<view>
    我是组件---
    {{myvalue}}
    <button type="primary" bindtap="clickFn">点我修改值</button>
</view>

//自定义组件的js文件
Component({
	properties: {
		//接收参数
        myvalue:{
            type:'string',
            value:"默认值",
            //监听值的函数
            observer:(newValue,oldValue)=>{
                console.log(newValue,oldValue)
            }
        }
    },
    methods: {
        clickFn(){
            this.setData({
                myvalue:"修改的值"
            })
        },
    }
})

2-5 监听值

 observer是用于监听值的函数,两个参数,新值与旧值

//自定义组件的js文件
Component({
	properties: {
		//接收参数
        myvalue:{
            type:'string',
            value:"默认值",
            //监听值的函数
            observer:(newValue,oldValue)=>{
                console.log(newValue,oldValue)
            }
        }
    },
    methods: {
        clickFn(){
            this.setData({
                myvalue:"修改的值"
            })
        },
        changeValue(){
            this.triggerEvent("myevent","参数")
        }
    }
})

2-6 子传父

<!--自定义组件 的 wxml文件-->
<view>
    我是组件---
    {{myvalue}}
    <button type="primary" bindtap="clickFn">点我修改值</button>
    <button 
        style="margin-top:10px"
        type="primary" 
        bindtap="changeValue"
    >点击修改父级的值</button>
</view>

//自定义组件的js文件
Component({
	properties: {
		//接收参数
        myvalue:{
            type:'string',
            value:"默认值",
            //监听值的函数
            observer:(newValue,oldValue)=>{
                console.log(newValue,oldValue)
            }
        }
    },
    methods: {
        clickFn(){
            this.setData({
                myvalue:"修改的值"
            })
        },
        changeValue(){
            this.triggerEvent("myevent","参数")
        }
    }
})

<!--父 级 的 js文件-->
Page({
	myevent(e){
    	console.log(e.detail)//-->参数
  	},
})

<!--父 级 的 wxml文件-->
<view>
    <my-component
        myvalue="父亲的值"
        bind:myevent="myevent"
    ></my-component>
    
</view>

2-7插槽

 匿名插槽和具名插槽

<!--父级的wxml-->
<view>
    <my-component myvalue="父亲的值" bind:myevent="myevent">
        <!-- 匿名插槽 -->
        <view>我是匿名插槽</view>
        <!-- 具名插槽 -->
        <view slot="mySlot">我是具名插槽</view>
	</my-component>
</view>

<!--自定义组件的wxml-->
<view>
    我是组件---
    {{myvalue}}
    <button
        type="primary"
        bindtap="clickFn"
    >点我修改值</button>

    <!-- 匿名大量使用会产生冲突 -->
    <slot></slot>

    <!-- 具名插槽的调用 -->
    <slot name="mySlot"></slot>

    <button 
        style="margin-top:10px"
        type="primary" 
        bindtap="changeValue"
    >点击修改父级的值</button>
</view>

//自定义组件 的js文件
Component({
    options:{
        multipleSlots:true  //在组件定义时的选项中启用多slot支持 
    }
})

3.网络

3-1发起请求

3-1-1wx.request()

 发起 HTTPS 网络请求
 参数：
  url:String,开发者服务器接口地址,必填
  data:请求的参数
  method:http请求方法,默认GET
  head:设置请求的 header，header 中不能设置 Referer
     content-type 默认为 application/json
  success/fail:接口调用成功/失败的回调函数

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

3-2WebSocket

3-2-1wx.connectSocket

 创建一个 WebSocket 连接
 参数：
  url:开发者服务器 wss 接口地址,必填
  header:HTTP Header，Header 中不能设置 Referer
  success/fail:接口调用成功/失败的回调函数
  timeout:超时时间，单位为毫秒
  

wx.connectSocket({
  url: 'wss://example.qq.com',
  header:{
    'content-type': 'application/json'
  },
  protocols: ['protocol1']
})

3-2-2wx.onSocketOpen()

 监听 WebSocket 连接打开事件
 参数：header：连接成功的 HTTP 响应 Header

wx.onSocketOpen((result) => {
        console.log("连接成功")
})

3-2-3wx.sendSocketMessage()

 通过 WebSocket 连接给服务器发送用户信息,需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送
 参数：
  data:需要发送的内容
  success/fail:接口调用成功/失败的回调函数
  complete:接口调用结束的回调函数（调用成功、失败都会执行）

let socketOpen = false
wx.connectSocket({
  url: 'test.php'
})
wx.onSocketOpen(function(res) {
  socketOpen = true
})
if (socketOpen) {
	wx.sendSocketMessage({
      data:''
    })
}

3-2-4wx.onSocketMessage()

 监听服务器返回的信息

wx.onSocketMessage((result) => {
	//result是服务器返回的数据
})

3-2-5wx.closeSocket()

 关闭 WebSocket 连接

wx.connectSocket({
  url: 'test.php'
})
//注意这里有时序问题，
//如果 wx.connectSocket 还没回调 wx.onSocketOpen，而先调用 wx.closeSocket，那么就做不到关闭 WebSocket 的目的。
//必须在 WebSocket 打开期间调用 wx.closeSocket 才能关闭。
wx.onSocketOpen(function() {
  wx.closeSocket()
})

3-2-6wx.onSocketClose()

 监听 WebSocket 连接关闭事件
 参数:
  code:一个数字值表示关闭连接的状态号，表示连接被关闭的原因
  reason:一个可读的字符串，表示连接被关闭的原因

wx.connectSocket({
  url: 'test.php'
})
wx.onSocketOpen(function() {
  wx.closeSocket()
})
wx.onSocketClose(function(res) {
  console.log('WebSocket 已关闭！')
})

3-2-7wx.onSocketError()

 监听 WebSocket 错误事件

wx.onSocketError(err=>{
	//错误信息
	console.log(err)
})

4.数据缓存

4-1wx.setStorage()

 将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容
 除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用
 参数:
  key:本地缓存中指定的 key,必填
  data:需要存储的内容,只支持原生类型,Date,及能够通过JSON.stringify序列化的对象
  success/fail:接口调用成功/失败的回调函数
  complete:接口调用结束的回调函数（调用成功、失败都会执行）

wx.setStorage({
  key:"key",
  data:"value"
})

4-2wx.setStorageSync()

 wx.setStorage 的同步版本

wx.setStorageSync('key', 'value')

4-3wx.getStorage()

 从本地缓存中异步获取指定 key 的内容
 参数:
  key:本地缓存中指定的key
  success/fail:接口调用成功/失败的回调函数
  complete:接口调用结束的回调函数（调用成功、失败都会执行）

wx.getStorage({
  key: 'key',
  success (res) {
  	//key对应的内容
    console.log(res.data)
  }
})

4-4wx.getStorageSync()

 wx.getStorage 的同步版本

wx.getStorageSync('key')

4-5wx.removeStorage()

 从本地缓存中移除指定 key
 参数：
  key:本地缓存中指定的 key
  success/fail:接口调用成功/失败的回调函数
  complete:接口调用结束的回调函数（调用成功、失败都会执行）

wx.removeStorage({
  key: 'key',
  success (res) {
    console.log(res)
  }
})

4-6wx.removeStorageSync()

 wx.removeStorage 的同步版本

wx.removeStorageSync('key')

4-7wx.getStorageInfo()

 异步获取当前storage的相关信息
 参数：
  success/fail:接口调用成功/失败的回调函数
  complete:接口调用结束的回调函数（调用成功、失败都会执行）

wx.getStorageInfo({
  success (res) {
    console.log(res.keys)//当前 storage 中所有的 key
    console.log(res.currentSize)//当前占用的空间大小, 单位 KB
    console.log(res.limitSize)//限制的空间大小，单位 KB
  }
})

4-8wx.getStorageInfoSync()

 wx.getStorageInfo 的同步版本

	const res = wx.getStorageInfoSync()
  	console.log(res.keys)//当前 storage 中所有的 key
    console.log(res.currentSize)//当前占用的空间大小, 单位 KB
    console.log(res.limitSize)//限制的空间大小，单位 KB

4-9wx.clearStorage()

 清理本地数据缓存
 参数：
  success/fail:接口调用成功/失败的回调函数
  complete:接口调用结束的回调函数（调用成功、失败都会执行）

wx.clearStorage()

4-10wx.clearStorageSync()

 wx.clearStorage 的同步版本

wx.clearStorageSync()

5.开放接口

5-1登录

5-1-1wx.login

 调用接口获取登录凭证(code)
 通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等
 参数：
  timeout:超时时间,单位ms
  success/fail:接口调用成功/失败的回调函数
   code:用户信息会作为success的参数传入
  complete:接口调用结束的回调函数（调用成功、失败都会执行）

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://test.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})