搜索到
32
篇与
JavaScript
的结果
-
![微信小程序监听data数据：watch.js(模仿vue)]()
微信小程序监听data数据：watch.js(模仿vue) guihub 创建watch.js /** * 设置监听器 */ export function setWatcher(page) { let data = page.data; let watch = page.watch; Object.keys(watch).forEach(v => { let key = v.split('.'); // 将watch中的属性以'.'切分成数组 let nowData = data; // 将data赋值给nowData for (let i = 0; i < key.length - 1; i++) { // 遍历key数组的元素，除了最后一个！ nowData = nowData[key[i]]; // 将nowData指向它的key属性对象 } let lastKey = key[key.length - 1]; // 假设key==='my.name',此时nowData===data['my']===data.my,lastKey==='name' let watchFun = watch[v].handler || watch[v]; // 兼容带handler和不带handler的两种写法 let deep = watch[v].deep; // 若未设置deep,则为undefine observe(nowData, lastKey, watchFun, deep, page); // 监听nowData对象的lastKey }) } /** * 监听属性 并执行监听函数 */ function observe(obj, key, watchFun, deep, page) { var val = obj[key]; // 判断deep是true 且 val不能为空 且 typeof val==='object'（数组内数值变化也需要深度监听） if (deep && val != null && typeof val === 'object') { Object.keys(val).forEach(childKey => { // 遍历val对象下的每一个key observe(val, childKey, watchFun, deep, page); // 递归调用监听函数 }) } let that = this; Object.defineProperty(obj, key, { configurable: true, enumerable: true, set: function(value) { watchFun.call(page, value, val); // value是新值，val是旧值 val = value; if (deep) { // 若是深度监听,重新监听该对象，以便监听其属性。 observe(obj, key, watchFun, deep, page); } }, get: function() { return val; } }) } module.exports = { setWatcher: setWatcher } 引用 克隆到本地后，将watch.js复制到项目的util下，在需要监听的页面按需引入即可 //index.js const watch = require("../../utils/watch.js"); Page({ data:{ flag:true }, onLoad(){ watch.setWatcher(this); // 设置监听器，建议在onLoad下调用 this.setData({flag:false}) }, watch:{ flag:function(newVal,oldVal){ console.log(newVal,oldVal); } } }) * 当然，你也可以全局引入一次，但由于小程序的限制，我们还是不得不在每一个页面调用getApp().setWatcher(this); ```js //app.js const watch = require("./utils/watch.js"); App({ setWatcher(page){ watch.setWatcher(page); } }) //index.js Page({ onLoad() { getApp().setWatcher(this); }, }) -
![微信小程序wx.request POST请求，请求参数需要form-data形式]()
-
![微信小程序RSA加密]()
微信小程序RSA加密 GITHUB传送门 wxmp-rsa 1、简介 前端rsa加解密工具。 基于jsencrypt修改扩展功能。 兼容小程序环境，压缩后60kb左右的大小，节省小程序空间。 支持超长文本加解密。 支持中文字符的加解密。 2、安装 npm i wxmp-rsa -S 3、使用方式 （小程序使用之前需先使用开发者工具构建npm） // 导入包 import WxmpRsa from 'wxmp-rsa' // 实例化rsa const rsa = new WxmpRsa() // 定义待加密的字符串 const str = '{"name":"neo"}' // 定义公钥 const publicKey = ` -----BEGIN PUBLIC KEY----- MIGeMA0GCSqGSIb3DQEBAQUAA4GMADCBiAKBgFnWSUwsmGawhMJ30z6y5li2jcf1 m7rPMZcwZOS3To8bk3OBaMGhVEc1F8GtJBbc1rn/HCLNL9zrCy21EefJON8tRFcY HnpseZSzh+349lIhS+MFw9x4JUddwSPDyxwha929cKzMuVoftu3CJ+kqDBVvxLk7 iDBzUMqW3Kgehk2TAgMBAAE= -----END PUBLIC KEY----- ` // 设置公钥 rsa.setPublicKey(publicKey) // 加密 const cryptStr = rsa.encryptLong(str) console.log('加密后的结果：', cryptStr) // 定义私钥 const privateKey = ` -----BEGIN RSA PRIVATE KEY----- MIICWgIBAAKBgFnWSUwsmGawhMJ30z6y5li2jcf1m7rPMZcwZOS3To8bk3OBaMGh VEc1F8GtJBbc1rn/HCLNL9zrCy21EefJON8tRFcYHnpseZSzh+349lIhS+MFw9x4 JUddwSPDyxwha929cKzMuVoftu3CJ+kqDBVvxLk7iDBzUMqW3Kgehk2TAgMBAAEC gYBRChPeyk/EOrHX912xLpLKLguh+LY9g1B50ScChzUvtTGDPZaxLQYoogVHKhfn I9nzuOS5pBzsDX9tAO0hCQzqfHgqRjn+vEgm1Ui+f0E3BVRnhobcJKZpZqlvCBR5 Gu2+zlrY4SeGq3AuQSr/A5FiB5k0RgsvNycDTjqyg7TXGQJBAJoZ8Yr0zakxT1I8 lVqsFbeNPtt8FNG2UgIlIs9RL7aXhw+Y3sWtk/kbaOXafSofu0NcQYx4Km3M3kiP lcNfTJ8CQQCVPcaRpu+mprRgHS6s76Z668NaFsjX04CUUa0kCrey+Nf/SJJ3BkRH M7GllZWuI/RSXs/F5N38p5bfkn7QZqaNAkBy3dHJZW8DpgjdYOFnhAxwFK39BwGx zHhWtv26kWbCcTKwsp+jtB4vunm3k+RmiN6aeGM35L6jt+kdJ0JYLmo7AkBJpRZb wZj5D8Jqu3vQ8uGgPr9DsYKinkgQ6M0bv/4uXwWXf+Rmv7zpteSv5UTbjfp+uzKk YO/6QWj+InhZto3xAkAOA0i702dLHm5elLWvht7UEYIDEW1+rYGdbthmJBvT9sZh VKL954Y9hDzBWepjYsBiJnmIkgeladPnU5025/G/ -----END RSA PRIVATE KEY----- ` // 设置私钥 rsa.setPrivateKey(privateKey) // 解密 const originalStr = rsa.decryptLong(cryptStr) console.log('解密后的原始数据：', originalStr) 其他api参考jsencrypt插件 4、注意事项 填空方式默认pkcs1，目前暂不支持其它填空方式。 5、更新提示 之前偶现的加密异常的问题已于v2.0.0+版本中修复。 之前偶现的解密后部分中文乱码的问题已于v2.1.0+版本中修复。 6、测试对比 推荐两个第三方rsa工具，仅供参考。 在线生成rsa公私钥：http://travistidwell.com/jsencrypt/demo/ （推荐1024长度的密钥） 在线rsa加解密：http://www.toolzl.com/tools/testrsa.html （117超长加密，128超长解密） 7、添加到微信小程序 // 导入包 import WxmpRsa from 'wxmp-rsa' // 实例化rsa const rsa = new WxmpRsa() // 定义公钥 const publicKey = '************************' // 设置公钥 rsa.setPublicKey(publicKey) // 加密 export function jsencrypt(str) { return rsa.encryptLong(str) } module.exports = { jsencrypt } 调用 const encrypt = require("../../../utils/encrypt") phone = encrypt.jsencrypt(phone) -
![javascript RSA公钥加密]()
-
![解决vue页面注入js修改input值]()
解决vue页面注入js修改input值 会碰到这个问题一般是想×别人的网页导致的，一般来说想控制别人写的网页(或者维护一份别人的网页代码)碰到需要用JS给input或者select之类的组件赋值的时候一般会直接这样写： var targertEle = document.getElementsByTagName('textarea')[1]; targertEle.value = 'test'; 赋值后点击有时候会报错有时候不会，一般报错的情况基本上属于这份代码用了某些前端框架，例如Vue之类的，Vue的input弄个双向绑定啥的，此时我们用原生的JS企图去控制输入框的值就会出现无效的情况(明明input上有数字或者字符但是点击按钮就是说你没填内容)。因为此时只是修改了value属性，没有触发input或change事件，导致输入没有最终确定。input和change事件默认情况下(作者设计的时候)，只有当接收到键盘的按键(随便哪个键盘的按键消息)，就会触发input和change事件,进而把输入框中的value赋值给预设的相关变量，到这一步才算走完整个设置value的过程。所以如果想给这类加料的输入框或者选择框用原生JS赋值，设置vlaue属性过后就必须手动触发一下input或change事件。下面是例子： var targertEle = document.getElementsByTagName('textarea')[1]; targertEle.value = 'test'; event.initEvent("input", true, true); event.eventType = 'message'; targertEle.dispatchEvent(event); 如果是select选择框把"input"改成"change"即可
