微信小程序嵌入Jquery Mobile网页

最新推荐文章于 2024-08-06 13:43:08 发布

阳光银子

最新推荐文章于 2024-08-06 13:43:08 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序 jquery webview javascript html

本文链接：https://blog.youkuaiyun.com/wen_g_y/article/details/122022123

本文介绍了如何将使用Jquery Mobile开发的网页嵌入微信小程序的web-view中，以提高网页的安全性。通过这种方式，用户无法直接查看URL和HTML/JS代码，降低了数据泄露的风险。同时，随着网络速度提升，Jquery Mobile页面在小程序内的运行效果良好，实现接近原生小程序的体验，减少了开发原生APP的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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