首页 > 编程语言> 文章详细

webview在小程序中使用

2022-01-26 16:58:15 阅读：230 来源： 互联网

标签：使用程序 html 跳转 webview pages 页面

一、什么是webview

Webview 是一个基于webkit的引擎，可以解析DOM 元素，展示html页面的控件，它和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。

二、webview主要用于什么地方？或者说什么需求下会使用到webview?

个人理解，电脑上展示html页面，通过浏览器打开页面即可浏览，而手机系统层面，如果没有webview支持，是无法展示html页面，所以webview的作用即用于手机系统来展示html界面的。

所以它主要在需要在手机系统上加载html文件时被需要。

三、使用webview好处

而webview是通过加载html文件来进行页面的展示，当需要更新页面布局的或者业务逻辑变更时，如果是原生的APP就需要修改前端内容，升级打包，重新发布才可以使用最新的。

通过webview方式的页面则只需要修改html代码或者js文件（如果是从服务器端获取，只要新的文件部署完成），用户重新刷新就可以使用更新后的，无需通过下载安装的方式完成升级。

四、点击小程序的banner，跳转到别人的H5页面

步骤：先登录小程序开发平台，将页面需要跳转的域名写上去，注意了，域名不是指服务器的域名，而是服务器下面的业务域名

1、如果你不需要通过点击小程序里面的按钮或者某个view，那么你可以直接在小程序里面直接调用下面的代码即可

<web-view src="https://hi.xxx.com/Tickets/html/getScanCode.html"></web-view>

2、如果你需要点击小程序里面的按钮或者某个view才能调转到不同的h5页面那么你需要在pages里面新增一个页面里面写

<web-view src="{{path}}"></web-view>

在数据初始化化的时候先给一个默认值https://hi.xxx.com/Tickets/html/getScanCode.html

在点击的时候把需要跳转的某个页面的路径写成参数传过来，在onload里面拿出来赋值就可以解决跳转到不同页面的问题啦。

pages/index/index.wxml

<view class="container">

<button bindtap='dianji' data-webview="https://mp.weixin.qq.com/">dianji</button>

</view>

pages/index/index.js

Page({

dianji:function(e){

var webview=e.target.dataset.webview

 
wx.navigateTo({

url: '/pages/webview/webview?webview='+webview,

})

}

})

pages/webview/webview.js

onLoad: function (options) {

console.log(options)

var webview=options.webview;

this.setData({

path: webview

})

}

五、从H5页面跳转到小程序

<button class="btn">跳转到小程序页面</button>

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

h5页面的按钮点击跳转到小程序给按钮加点击事件事件中写以下代码即可

$('.btn).click(function(){wx.miniProgram.navigateTo({url: '/path/share/share'})//这里填要调到哪个小程序页面路径})

在微信公众平台需要配置一下业务域名,看一下教程吧 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

官方文档

标签：使用,程序,html,跳转,webview,pages,页面
来源： https://blog.csdn.net/seimeii/article/details/122703724

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9