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

 

        }

 

});