微信小程序使用web-view实例

最新推荐文章于 2024-04-23 16:26:26 发布
最新推荐文章于 2024-04-23 16:26:26 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 小程序 前端 文章标签： 小程序 webview javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39771919/article/details/110524251
版权

微信小程序使用web-view实例

1、建立新页面用来承载想要打开的网站

(备注：这里是以打开百度页面为例的小demo.)

在这里插入图片描述

  <web-view src="https:www.baidu.com"></web-view>

2、在index.wxml 建立按钮

在这里插入图片描述

<button  bindtap="toBaidu"> 百度一下 </button>

在index.js 中写点击事件去到指定页面

在这里插入图片描述

toBaidu: function(){
    wx.navigateTo({
      url: '/pages/test/baidu/baidu'
    })
  },

4、效果

在这里插入图片描述
在这里插入图片描述
完成

原来~如此
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
支付宝小程序中嵌入H5页面并且实现通信
m0_59708977的博客
03-17 8462
场景：在小程序开发中（无论是支付宝、微信、Uniapp等）经常会遇到在小程序中使用或者跳转一些自己的公司开发过的，或三方地址，在小程序中的开发文档中大家可以看到，知识有一些基本的内部跳转方式，但通过仅有的跳转方式无法满足我们的跳转外部页面的需求，这个时候我们就可以使使用webView <view class="page"> <web-view src="https://render.alipay.com/p/s/web-view/index" onMessage="onmessag
后端菜鸡开发钉钉小程序使用web-view传token到Vue遇到的坑
milo_milo的博客
03-16 1370
起始因为公司要做一个小程序到钉钉上，需要传输文件，无奈钉钉小程序的文档上面只告诉我怎么打开发送图片，我要传的是excel。 找了半天找不到打开文件夹的方法，就只有个上传文件的方法。。（懂的都懂） 只能使用web-view来解决了（开始踩雷） 遇到的问题： 1.官方案例的传值： <web-view id="web-view-1" src="https://open.dingtalk.com/mobile" onMessage="test"></web-view> 这里就是所在钉钉小
uniapp 微信小程序webview 踩坑
Raccon_的博客
08-31 4738
微信小程序的存在许多功能上的限制和约束，有些情况不得不去使用webview进行开发实现需求，比如原生无法满足（例如某团队维护SDK 只提供了WEB端jsSDK，且不维护小程序SDK）H5可以同时适用多端（适用范围更广）H5可以弥补小程序部分欠缺微信生态有部分限制（包大小，设计规范等）由于最近做的需求小程序不支持播放带有透明通道的视频，所以转到了webview这里总结下完整的开发流程和现有的各种解决方案: 开发阶段需要将不校验合法域名勾选上。
uniapp实现支付宝小程序中嵌入H5并且实现相互通信
Chona
03-07 3088
uni-app实现支付宝小程序中嵌入h5并实现通讯
微信小程序webview和小程序通讯
最新发布
q759859479的博客
04-23 2076
1.1需要再小程序嵌入vr页面，同时在vr页面添加操作按钮与小程序进行通信交互1.3 开发工具：uniapp开发小程序1.3原型图点击体验官带看跳转小程序的体验官带看页面点击立即咨询唤起小程序弹窗打电话web-view | uni-app官网 (dcloud.net.cn)
小程序和h5通信
zhangqling的博客
07-25 5931
随着HTML5兴起，其独特的新特性，完全能够满足app开发需求，并且，相比于原生更容易入门，缩短开发周期，现在很少有纯原生的APP。
微信小程序提示wx.createCanvasContext方法已废弃的解决方案
热门推荐
TA远方
05-16 1万+
在微信开发工具上，打开小程序项目后，可能有遇到这么一个问题 使用wx.createCanvasContext 会提示此方法，基础库版本 2.9.0 起已废弃，请使用 Canvas 替换 💡 如何解决? 方法1，改成使用旧的基础库可能有性能问题，此项忽略; 方法2，手动查找替换代码，会发现要改动的地方可多了，此项忽略 方法3，手动改动次数最小，不知道有没有 有的，下面笔者TA远方提供以下源代码，请仔细看 'use strict'; export default class CanvasCont
微信小程序-web-View使用以及跟小程序的通信传值
qq_35971976的博客
12-15 5154
简单来说 就是小程序嵌套H5页面。
微信小程序webview实现长按点击识别二维码功能示例
10-17
主要介绍了微信小程序webview实现长按点击识别二维码功能,结合实例形式分析了webview二维码识别相关操作技巧,需要的朋友可以参考下
微信小程序之数据缓存的实例详解
12-29
微信小程序之数据缓存的实例详解 前言： 在H5之前，缓存一般都是用cookie，但是cookie的存储空间太小。于是，H5增加了新的缓存机制，即localstorage 和 sessionstorage，具体的介绍就不在多说。在微信小程序中，数据...
微信小程序实例-智能家具.zip
02-06
微信小程序实例-智能家具，下载下来之后，即可使用，可根据个人的需求，进行一些修改，即可用于课程设计，毕业设计，项目实战等。 这是一个微信小程序通过MQTT控制硬件(ESP8266)的Demo，教你通过微信小程序控制自己...
微信小程序动态添加view组件的实例代码
01-20
在微信小程序中怎么实现下面这么需求。 其中，里程数代表上一行到这一行地方的距离（这个不重要）；要实现的就是点击增加途径地，就多一行，删除途径地，就少一行。 分析：添加的和删除的是同样的结构，只是数量不...
微信小程序如何使用web-view
Gyh9421的博客
07-03 4231
当然在开发阶段，如果想联调自己本地的话，将项目本地代码运行，把地址放在src属性里，微信开发者工具中点击右上角详情——本地设置中将不校验合法域名勾选就可以，不作用于线上正式服。有时我们的业务需求是小程序内部跳转到其他h5项目的页面，这是我们就会用到web-view标签，这个标签可以帮助我们完成h5页面的渲染。然后登录微信公众平台——开发管理——开发设置里面找到业务域名，扫码之后将你h5项目完整域名放上去，此时需要你下载一个校验文件，放在服务器根目录，点击保存，就可以了。
微信小程序使用webview注意事项：
wbb1126的博客
07-26 380
诸位道友下次再会！
webview性能优化—webview预创建
有图有真相
05-15 1717
webview性能优化
【微信小程序】webview使用、限制、扩展说明
RogerQianpeng的博客
02-01 6723
如果想知道渠道来源，比如业务场景是从多个渠道通过Url Scheme跳入web-view，想知道各个渠道的流量，也可以在生成时设置不同的channel字段，然后在此处读取再落库。Url Scheme跳转进入时，进入的并非小程序首页，左上角会出现首页按钮，可以隐藏。以及你自己的后端服务，即可获得用户的openid、unionid。1、关联公众号的非文章页【公众号带“关注”按钮的首页（下图）】在h5中，也可以调用一些wx提供的接口，比如常见的跳回带参。用生成的带参数的Url Scheme跳入也可以读取到参数。
微信小程序使用web-view，内嵌外网h5踩坑记！！
weixin_61877032的博客
10-13 3919
微信小程序使用web-view业务域名配置问题总结
微信小程序 webview网页使用微信方法-jssdk及常见问题
weixin_45072479的博客
07-11 3420
在微信小程序的webview网页中，想要使用微信方法，需要使用微信的jssdk。
微信小程序登录授权功能（webview）
weixin_44889720的博客
06-05 2207
（1）.获取code值：使用wx.login()方法：该方法只有在webview框架中才能使用，wx.login({ //调用login获取code},})（2）.获取encryptedData、iv值：使用wx.getUserInfo()方法：该方法只有在webview框架中使用})
微信小程序 使用 web-view实例上的函数和window函数
05-24
在微信小程序中，可以通过 `web-view` 标签加载一个 web 页面，并且可以在该页面中调用一些函数。同时，也可以在小程序中通过 `wx` 对象调用一些 `web-view` 实例上的函数。 以下是一些示例代码： 1. 在 `web-view` 页面中调用 `window` 上的函数 在 web 页面中，可以使用 `window` 对象定义一个自定义函数，例如： ```js function customFunc() { console.log('custom function called'); } ``` 然后在页面中的某个事件或函数中调用该函数，例如： ```js document.getElementById('btn').addEventListener('click', function() { window.customFunc(); }); ``` 在小程序中，则可以通过 `wx.createWebViewContext` 方法获取 `web-view` 实例的上下文对象，然后使用 `postMessage` 方法向页面发送消息，从而调用该函数，例如： ```js const webViewContext = wx.createWebViewContext('web-view'); webViewContext.postMessage({type: 'callCustomFunc'}); ``` 在 web 页面中，则需要监听 `message` 事件，当收到消息时调用相应的函数，例如： ```js window.addEventListener('message', function(event) { if (event.data.type === 'callCustomFunc') { customFunc(); } }); ``` 2. 在小程序中调用 `web-view` 实例上的函数 在小程序中，可以通过 `wx.createWebViewContext` 方法获取 `web-view` 实例的上下文对象，然后直接调用该对象上的函数，例如： ```js const webViewContext = wx.createWebViewContext('web-view'); webViewContext.postMessage({type: 'callWebViewFunc'}); ``` 在 web 页面中，则需要监听 `message` 事件，当收到消息时调用相应的函数，例如： ```js window.addEventListener('message', function(event) { if (event.data.type === 'callWebViewFunc') { // 调用 web-view 实例上的函数 console.log('web-view function called'); } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值