望正接收器用微信啥小程序

Posted 2023-04-30

背景
既然小程序的组件已经有Observer功能，那为什么还要手写watch功能呢？

Observer只能在Component中使用，没法在Page中使用。若是想在Page中监控某一数据的变化，Observer做不到。
Observer属于小程序的新功能，只能在高版本微信使用，低版本微信无法使用。公司的小程序就因为使用了Observer功能，导致很多低版本微信用户无法使用这个小程序。
实现
新建一个watch.js文件，代码如下

function watch(key, callback)
// 先执行一次watch
callback.call(this, this.data[key])
let that = this
let tmpData = this.data[key]
Object.defineProperty(this.data, key,
set: function(value)
tmpData = value
// 值变化了再执行一次
callback.call(that, value)
,
get: function()
return tmpData

)

export default watch
原理很简单，就是使用Object.defineProperty来定义要侦听的数据对象，当该值变化时，会执行其中的set方法，我们在set方法中执行侦听器回调就可以了。注：因为组件初始化的时候不会执行set方法，所以需要额外在开始的时候执行一次回调。

这个方法可以在Component的attached、ready函数中或者page的onShow、onLoad函数中使用。

Component中使用watch功能示例如下，Page中用法类似

import watch from '../../utils/watch.js'
Component(
properties:
showPercent:
type: Boolean,
value: true
,
percents: Array
,
attached: function()
watch.call(this, 'percents', function (val)
if (val && val.length >0)
this.setData(
showPercent: true
)
else
this.setData(
showPercent: false
)

)

)
为了保证watch函数中的this指向，必须使用watch.call(this, ...arguments)的方式调用watch方法。这其中，第一个参数，this，固定写法；第二个参，数要watch的参数名；第三个参数，数值改变后执行的函数。

结语
实现了该watch方法，就可以解决开头说的两个问题了

在Page中使用侦听器
兼容低版本微信用户
下一篇《微信小程序实现数据侦听器watch，包含子属性的watch》有方案更高级、使用更简单、且支持子属性watch的实现方法。 参考技术A 望正接收器用微信什么小程序这个是用微信对于一个收付款提示语音的一个小程序，可以进入微信--我--支付--收付款--二维码收款--点击右上角三点图标--开启收款到账语音提醒.

微信小程序中如何将接收的数据分为两个数组？

request后将所接收的数据存入一个数组，之后如何将这个数组平分分为两个数组呢？

参考技术A request后将所接收的数据存 参考技术B 1.wxml:

<view class='inputbox'>

日期<text class="tips2" wx:for="date">item.customer_date</text>

</view>

customer_date 为我们需要接收的数据的字段名

wx:for="date" 中的date 是我给需要接收的数据取的数组名字，接收的数据可以为多个

2.wxss:

.inputbox

background: #FFFFFF;

height:65rpx;

font-size:35rpx;

line-height:65rpx;



3.js

var endDate=" "; //这里设置endDate为空，

Page（

data:,

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options)

this.getdata(); //调用getdata 函数

,

getdata: function () //定义getdata 函数

var that = this; // 这个地方非常重要，重置data里数据时候setData方法的this应为以及函数的this, 如果在下方的sucess直接写this就变成了wx.request()的this了

wx.request(

url: 'http://localhost/api/booking/getdata',//请求地址 这个根据实际情况写

data: //发送给后台的数据

,

header: //请求头

"Content-Type": "application/x-www-form-urlencoded"

,

method: "GET",

success: function (res) // 请求成功

console.log(res.data);//res.data相当于ajax里面的data,为后台返回的数据

that.setData(//如果在sucess直接写this就变成了wx.request()的this了.必须为getdata函数的this,不然无法重置调用函数

date: res.data.data //

)

,

fail: function (err) console.log(err.data); ,//请求失败

complete: function () //请求完成后执行的函数

)

,

）