之前用Jquery Mobile开发了微信公众号,业务逻辑都开发完成,支付和分享功能都还不错,但网页的安全还是不太令人满意。 用户只要复制链接(url)到电脑的浏览器上,查看网页元素,网页HTML和JS代码都暴露了, 辛辛苦苦的设计大白于天下;如果遇到黑客稍加修改,服务器数据就可能被抓取或被破坏,数据安全受到严重威胁。
微信小程序web-view的出现,很好解决上述弊端。把Jquery Mobile开发的网页url赋值到web-view的src属性即可,用户看不到url,也没法复制url, 也看不到页面HTML和JS代码。 而且随着网络速度加快, Jquery Mobile页面在微信小程序的速度表现不逊色于原生小程序。把小程序分享到桌面就与原生APP差不多,免去开发原生APP的重复工作,还适用于Android,苹果,鸿蒙,确实是事半功倍。
(1)小程序web-view设置url
//wxml:
<web-view src="{{url}}" ></web-view>
//js:
this.setData({
url: 'https://xxx.com/mobile/index.html?openid=xxxx'
});
(2)分享功能代码片段:
//jquer-mobile页面 JS调用小程序分享页面:
wx.miniProgram.navigateTo({ url: '../share/share?title=xxx&img=xxx'});
//小程序wxml代码:
<button open-type='share' >分享</button>
(3)支付功能代码片段:
//jquer-mobile页面 JS调用小程序支付页面:
wx.miniProgram.navigateTo({ url: '../pay/pay?timestamp=xxxx&nonceStr=xxx&prepay_id=xxx&paySign='});
//小程序支付页面JS代码:
wx.requestPayment({
'timeStamp': unescape(option.timeStamp),
'nonceStr': unescape(option.nonceStr),
'package': 'prepay_id=' + unescape(option.package),
'signType': 'MD5',
'paySign': unescape(option.paySign),
'success': function (res) {
ths.setData({
vPayStaturs: "微信支付成功!正返回订单..."
})
console.log(res);
ths.returnWeb2('success');
},
'fail': function (res) {
ths.setData({
vPayStaturs: "微信支付失败!" + res.errMsg
})
console.log(res);
},
complete: function (res) {
// complete
console.log(res);
}
});
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64289.shtml