微信小程序嵌入Jquery Mobile网页

      之前用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

张贴在3