微信小程序学习笔记1

数据、事件绑定

data中的数据再页面中使用{{}}绑定，属性绑定也要用{{}}
绑定事件使用bind绑定，tap表示点击事件bingtap
事件函数绑定不加{{}}，事件函数也不加（）
data数据不能直接更新，需要使用this.setdata更新

例：

this.setData({
	count: this.data.count + 1

})

表单事件绑定，事件函数中使用e.detail.value拿表单数据
事件绑定时，通过data-自定义属性向事件函数传参，拿事件传参要用e.currentTarget 不要用 target ，因为target事件触发的目标，可能是子标签

例：data-name ={{需要传递的动态值}}
事件的两种绑定方式 bind会冒泡 carch 不会冒泡
常用事件：
touchstart：手指触摸动作开始

touchmove：手指触摸后移动

touchcancel：手指触摸被打断如来电提醒，弹窗

touchend：手指触摸动作结束

tap：手指触摸后马上离开（单击）

longpress：手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

submit：提交事件

input：输入框事件

scroll：滚动事件

循环

循环wx:for 循环数组，会自动生成变量item和index
wx:for 循环要添加 wx:key属性 wx:key值是字符串形式
wx:for-item 和 wx:for-index可重置index和item变量名（相当于wx:for 下的 item = “自定义值”）
判断wx:if 相当于vue中的条件渲染值要加{{}}

tabBar跳转

tabBar跳转在小程序框架全局配置中根据可选项进行配置(是全局的在app.json中配置) ，配置项的键和值都是字符串形式
跳转路径必须在pages中先定义（存在此页面）。
配置的跳转页面至少两个最多五个

例：【示例为必选项】

"tabBar":{
    "color":"#8A8A8A",
    "selectedColor":"#D4327A",
    "backgroundColor":"#fff",
    "position": "top",
    "list":[
      {
        "pagePath":"pages/index/index",
        "text": "首页"
      },
      {
        "pagePath":"pages/shouye/shouye",
        "text": "斗鱼",
      }
    ]
  },

路由跳转、传值

声明式跳转：

路由跳转在wxml页面添加 navigator 标签 url属性为跳转路径
还需添加open-type属性
opeb-type值：
navigateTo【只能跳转非tab页】
switchtab【只能跳转到tab页】
redirect【关闭当前页面，跳转非tab页面】
reLaunch【关闭所有页，跳转任意页面】

不写url属性 open-type值为 navigateBack 【返回上一页】

不写url属性设置target="miniProgram" open-type="exit"【退出小程序】

编程式导航跳转：

点击之后调用一个函数 route ，在 route 函数中调用 wx.navigateTo 等声明式导航的open-type的值进行跳转。

可跳转值：
navigateTo【只能跳转非tab页】 (可以传参)
switchtab【只能跳转到tab页】(不可传参)
redirect【关闭当前页面，跳转非tab页面】 (可以传参)
reLaunch【关闭所有页，跳转任意页面】 (可以传参)

例：wx.nacigateTo({url:'跳转路径'})

传参方式：

键值对拼接传值：在url路径后 ? 分割 name=张三&age=18。
在【onLod】生命周期函数中使用options参数接收
对象传值：添加一个跳转成功的回调【success】中有一个回调函数 res=>
中有一个 res.eventChannel 字段调一个emit自定义事件。

例:

success:res=>{
   res.eventChannel.emit("自定义事件"，{参数})
}

接收：在【onLod】生命周期函数中找到eventChannel对象
const eventChannel=this.getOpenerEventChannel()
拿：通过on监听 eventChannel.on("自定义事件名"，data=>{ log (data)})

录音

在【onLoad】中获取全局唯一的录音管理器（全局的使用this打点调）
例：this.manager = wx.getRecorderManager()

在对应的方法中使用全局录音管理器【this.manager】调用需要的API

在【onload】中监听录音结束拿到录音结束的文件
例：this.manager.onStop(res=>{ log( res ) } ) 【打印后找到对应的录音文件路径】

把res push到数组中并在setData中更新赋值

循环展示录音数据

使用自定义属性data-传值把拿到的录音路径传递过来
在播放函数中使用【e.currentTarget】接收

播放：创建全局的音频播放对象【this.aiduo = wx.createInnerAudioContext()】

设置【this.audio.src= 接收路径 ，this.audio.play (自动播放)】即可完成播放

触底加载

触底加载实现，只需要在触底事件的处理函数中重新请求一遍数据，并push到旧数据之后
在this.setData中更新数据，并给页码+1即可

添加 onShareAppMessage:function(){} 函数即可开启【分享给朋友】
添加onShareTimeline:funtion(){} 函数，开启分享到朋友圈
在 onReady 初始化函数中调用 wx.showShareMenu({ menus:["shareAppMessage","shareTimeline"]}) 参数分别为分享给朋友和分享到朋友圈
添加按钮属性为 open-type="share" 即可开启分享

请求

发送请求：调用【wx.request】 API，问号后的参数放在data字段中
使用success接收回调要用箭头函数。

例：

wx.request({
		url: "请求地址"
		data: { 携带参数 }
		success：（res）=>{
		   console.log( 读数据 )
            this.setData({
               list: res.data.list 
            });
	}
});

下拉刷新

首先在json文件中添加 enablePullDownRefresh:true 字段，打开可下拉功能

然后在onpullDownRefresh函数中请求数据并使用unshift添加到数据前面，

请求完成后立即结束下拉：wx.stopPullDownRefresh()

本地储存

在success中调用【wx.setStorage】APi 根据文档进行配置。
参数 key、data

data中数组的值要改成同步的【Array：wx.getstorageSync('键')】

例：

data（）{
	
	Array：wx.getstorageSync('键')  ||  []
}

wx.setStorage({
   key:"键"
   data："z值"
})

数据上传、展示

数据上传，点击后调用一个函数函数内调用【wx.chooseMedia】API根据文档进行配置

通过 success：res=>{} 拿到结果在setdata中通过【res.tenpFiles】给定义好的数组赋值

展示：判断数据类型【item.fileType==image】通过【item.tempFilPath】字段展示图片
例： <image wx:if="{{item.fileType=='image'}}" src={{item.tempFilPath}}>