微信小程序数据劫持代理的实现

index.html

index.js

// Vue数据劫持代理

//模拟Vue中data选项
let data = {
    username:'小镭',
    age:3
}

// 模拟组件的实例
let _this={}

// 利用object.defineProperty()
for(let item in data){
    console.log(item,data[item]);
    Object.defineProperty(_this,item,{
        // get作用：用来获取扩展属性值，当获取该属性时调用get方法
        get(){
            console.log('get()');
            return data[item]
        }
    })
}

console.log(_this)

当要获取访问age或username的值时，才会调用get()方法，打印get()

若要修改data中的username的 值，可以直接通过_this.username修改吗？

答案是：不可以

（没有修改成功，username还是“小镭"）

可以通过set方法修改值

for(let item in data){
    console.log(item,data[item]);
    Object.defineProperty(_this,item,{
        // get作用：用来获取扩展属性值，当获取该属性时调用get方法
        get(){
            console.log('get()');
            return data[item]
        },
        //set作用：监视扩展属性的，只要已修改就调用
        set(newValue){
            console.log('set()',newValue);
            // _this.username=newValue;   千万不要在set方法中修改当前扩展属性的值，会出现死循环
            data[item] = newValue;
        }
    })
}

（修改成功！）

到此这篇关于微信小程序数据劫持代理的实现的文章就介绍到这了,更多相关小程序数据劫持代理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序滑块验证实现方法

    微信小程序滑块验证实现方法

    下面给大家介绍下微信小程序滑块验证的效果图及实例代码: 如图: 滑块验证组件 puzzleVerify目录 index.wxml <!-- 滑动验证弹窗 --> <view class="slide_model" wx:if="{{slidebel}}"> <view class="slide_wrapper"> <!-- 拼图图片部分 --> <view class="canvas

  • 微信小程序虚拟列表的应用实例

    微信小程序虚拟列表的应用实例

    目录 前言 什么是虚拟列表? demo效果 准备工作 屏高&盒子高度 优化 总结 前言 股票热门榜单有4000多条,渲染到页面上在盘中时还得实时更新,如果采用接口和分页,当下拉几十页的时候页面会变的越来越卡并且还得实时更新,最后的做法是一开始数据就从ws传递过来,我们只需要传起始下标和结束下标即可,在页面上我们也只生成几个标签.大大减轻了渲染压力. 什么是虚拟列表? 就只指渲染可视区域内的标签,在滚动的时候不断切换起始和结束的下标来更新视图,同时计算偏移. demo效果 准备工作 计算一屏可展示

  • 微信小程序实现猜数字小游戏的实战过程

    微信小程序实现猜数字小游戏的实战过程

    目录 功能介绍 效果图  一.首页效果图(index03)的代码 二.开始游戏页面(index)代码 三.游戏规则页面(index01)代码 四.关于其他页面(index02)代码 总结 功能介绍 用户输入1-100之间的数字,根据结果提示用户猜的大小,如果用户猜对可以重新开始(还可以设置猜的次数) 效果图 点击开始游戏界面   游戏规则界面 关于其他界面  我的首页(效果图)使用的是index03 开始游戏使用的是index 游戏规则使用的是index01 关于其他使用的是index02 (创

  • 微信小程序如何实现数据共享与方法共享详解

    微信小程序如何实现数据共享与方法共享详解

    目录 全局数据共享 Mobox npm安装及其注意事项 小程序对 npm 的支持与限制 npm 依赖包的安装与使用 Mobox 组件方法共享 behaviors 1. 什么是 behaviors 2. behaviors 的工作方式 3. 创建 behavior 4. 导入并使用 behavior 5. behavior 中所有可用的节点 6. 同名字段的覆盖和组合规则 总结 全局数据共享 Mobox 原生小程序开发中我们可以通过 mobx-miniprogram 配合 mobx-minipro

  • 微信小程序自定义菜单导航实现楼梯效果

    微信小程序自定义菜单导航实现楼梯效果

    设计初衷 在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant UI框架也为我们实现了这一效果. 微信小程序该如何实现?? 效果展示 当菜单导航滚动到页面顶部时,菜单吸顶 当点击菜单按钮时,切换到对应区域(过渡到该区域,有动画效果) 当内容区滚动到某类区域时,对应区域的菜单按钮高亮 设计思路 1.吸顶效果的实现 获取菜单导航距离页面顶部距离wx.createSel

  • 微信小程序简洁登录页面的实现(附源码)

    微信小程序简洁登录页面的实现(附源码)

    目录 1.上图 2.用户不存在 3.上代码 1.上图 2.用户不存在 3.上代码 3.1login.wxml <view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}"> <!-- v2父容器 子view使用绝对布局 --> <view class="v2"> <view class="dltext"

  • 微信小程序数据劫持代理的实现

    微信小程序数据劫持代理的实现

    index.html index.js // Vue数据劫持代理 //模拟Vue中data选项 let data = { username:'小镭', age:3 } // 模拟组件的实例 let _this={} // 利用object.defineProperty() for(let item in data){ console.log(item,data[item]); Object.defineProperty(_this,item,{ // get作用:用来获取扩展属性值,当获取该属性

  • windows上利用charles抓取微信小程序数据包,手机APP数据包(HTTP与HTTPS数据包)

    windows上利用charles抓取微信小程序数据包,手机APP数据包(HTTP与HTTPS数据包)

    1.下载charles包.安装 Charles Proxy抓包工具 v4.1 破解文件 win64 附破解方法 2.关闭电脑防火墙 打开控制面板,选择Windows防火墙,关了(不关很可能没法抓包,在这栽过坑) 2.连接手机 2.1 用数据线把手机连上电脑 2.2 查电脑ip,命令行输入 ipconfig 2.3 修改手机网络代理 手机网络改为代理,ip为电脑ip,端口8888(charles默认端口,若被其他程序占用可修改,原则是保持电脑和手机一致) 3.安装SSL证书 (大多数app或小程序

  • 微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染 实现效果图: 微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下. //list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: '' }, loadList: function () { var that = this; that.setData({ hiddenLoading:

  • 微信小程序数据存储与取值详解

    微信小程序数据存储与取值详解

    在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值. 比如: 在A页面input输入框,输入电话号码,点击添加.需要在B页面电话区域中,显示刚刚输入的电话号码. 因为这是两个页面,就需要先存储,再取值.微信小程序提供了数据存储的API,wx.setStorage(OBJECT) 可以将数据存储在本地缓存中指定的 key 中,如果重复会覆盖掉原来该 key 对应的内容. 思路是,在A页面,使用bindinput获取input输入的值,赋值给一个变量(自定义),点击添加按钮

  • 微信小程序 数据访问实例详解

    微信小程序 数据访问实例详解

    先简单说一下,小程序的结构 如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的 数据访问,如果懂点ajax,都不是问题,没啥好讲的 微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问

  • 微信小程序 数据缓存实现方法详解

    微信小程序可以通过wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)对本地缓存进行设置.获取和清理.本地缓存最大为10MB. wx.setStorage()---------异步设置缓存 微信官方给出的属性 OBJECT参数说明: 参数 类型 必填 说明 key String 是 本地缓存中的指定的 key data Object/String

  • 微信小程序数据统计和错误统计的实现方法

    微信小程序数据统计和错误统计的实现方法

    某些情况下我们需要对小程序某些用户的行为进行数据进行统计,比如统计某个页面的UV, PV等,统计某个功能的使用情况等.好让产品对于产品的整个功能有所了解. 在网页里,我们很多人都用过谷歌统计,小程序里也有一些第三方数据统计的库, 比如腾讯的MTA等等. 但是,第三方的数据统计库要么功能太简单,满足不了需求,要么就是要收费.(留下了贫穷的泪水.) 等等,又不是你出钱,怕啥? 贵一点就贵一点呀. 嗯,说的没错.但是,公司团队内部想实现一套完整的自己的数据统计系统以满足自己的需求.所以,还是没有用第三

  • 微信小程序 数据遍历的实现

    微信小程序 数据遍历的实现

    制作数据遍历的步骤 在index.js中加入数据. 在index.wxml中读取数据. wx:for-item可以指定数组当前元素的变量名 wx:for-index可以指定数组当前下标的变量名 这两个项也可以不指定,默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item. 类似block wx:if,也可以将wx:for用在标签上,以渲染一个包含多节点的结构块.例如: <block wx:for="{{[1, 2, 3]}}"> <view&g

  • MAC系统利用charles抓取微信小程序和手机APP数据包(http和https数据包)

    MAC系统利用charles抓取微信小程序和手机APP数据包(http和https数据包)

    本文中使用的是mac上的抓包工具charles进行抓包,手机是华为荣耀8 下载并安装Charles for Mac Charles for Mac(HTTP信息抓包工具) V4.2.5 苹果电脑版 要想抓取到微信小程序的数据首先要解决的第一个问题件就是如何通过charles抓取手机上的数据具体配置过程如下: MAC上的Charles设置 第一步,charles上通过proxy->proxy setting进入代理设置,入口如下图所示 点击后进入如下所示界面 记住此处的port,默认为8888,也

  • 微信小程序开发实用技巧之数据传递和存储

    结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正. 1.短生命周期数据存储 以小程序启动到彻底关闭为周期的的数据建议存储在app.js文件夹中,引用app.js: const app =getApp(); 假设Value是在小程序本次生命周期中经常使用到的一个数据,比如说请求API的Token,动态的令牌等.那么就可以把这个值赋值到全局变量中去.实际上,并不是只有app.js中的globalData是全局变量,可以自己定义

随机推荐