关于小程序使用mpvue后代码编译后,在里面拓展写代码的

发布于:2019-01-15 17:00     更新于:1970-01-01 08:00
  1. 代码都是用 mpvue的 webpackJsonp 打包的,开始看代码的时候完全是不知道怎么回事,解压后代码可读性巨差。

  2. 首先想加一个点击事件,mpvue使用的是统一的handleProxy函数+属性data-comkey data-eventid 通过分析这两个属性来选取要返回的函数

  3. $root的属性太多了根本没法看

  4. 第一步先找到页面的主js main.js,到最后一行看注册的是哪个名称 如下图


http://inandan.com/uploads/20190115/9e4ae3e2252d17a73c60e5bc73d83c91.png

这个名称是 MhDc 找到本文件中这个属性所在的函数 

http://inandan.com/uploads/20190115/cccaf2bb76fd1718e94bde0a2f018827.png

类似这样的函数,然后 s=e("Qt9A") 继续查找 Qt9A这个属性的函数

http://inandan.com/uploads/20190115/c7cc6150f6b4271c63f0e967eaeff73e.png

这里的话就是第一个o = e("9xF6") 继续查找 9xF6函数 这里函数里面就有本页面函数的定义了

http://inandan.com/uploads/20190115/7946b2e7b7ce35f9b68e9461d58ee747.png

然后这个函数的 data 属性就是小程序page的 data,methods中定义的函数就是 page的函数了,我们这里面添加一个函数

http://inandan.com/uploads/20190115/aea615338dc7cec389f10b91e27900e8.png

这个时候在wxml页面中添加一个测试点击dom

http://inandan.com/uploads/20190115/a50df26578752be1c92620091a484615.png

添加属性 data-isbl="aaaaaaaa" 定义函数名称,到时在handleProxy 根据这个参数判断是执行自己添加的函数还是原有的函数

在vendor.js中找到如下代码

http://inandan.com/uploads/20190115/b7dfe1dc39adfb99e47b5961e1d8d71a.png

这个$handleProxyWithVue 就是点击事件的执行函数 这里面打印了 this.$root就能看到我们添加的函数aaaaaaaa

这个时候检测属性isbl是否存在,如果存在的话就执行这个函数。

到这里添加点击事件基本上已经成功了。在aaaaaaaa函数中调用wx api就可以了。


ps 最好还是不要改这样的代码 看起来太费劲了

by echoyl

阅读 343