uniapp使用webview将页面转换成图片支持h5、app、小程序

这篇具有很好参考价值的文章主要介绍了uniapp使用webview将页面转换成图片支持h5、app、小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp使用webview将页面转换成图片支持h5、app、小程序

在uniapp项目中新建主页和webview页面
uniapp页面生成图片,uniapp,uni-app,小程序

index.vue代码

<template>
	<view>
		<!-- 微信小程序要设置src为网络路径 -->
		<web-view src="/hybrid/html/webview.html"></web-view>
	</view>
</template>

webview代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>网络网页</title>
    <style type="text/css">
      .btn {
        display: block;
        margin: 20px auto;
        padding: 5px;
        background-color: #007aff;
        border: 0;
        color: #ffffff;
        height: 40px;
        width: 200px;
      }

    </style>
  </head>
  <body>
	  <div id="app">
			<div id="btn-list" style="display: flex;flex-dis;justify-content: center;flex-direction:column">
				<input style="padding:10px;height: 25px;" placeholder="测试" />
			  <button class="btn" type="button" data-action="navigateTo">按钮</button>
			</div>
		</div>
  <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<script>
		html2canvas(document.querySelector("#btn-list")).then(canvas => {
			console.log(canvas)
			const dataUrl = canvas.toDataURL()
			  console.log(dataUrl)
								  document.body.appendChild(canvas)
		});
    </script>
  </body>
</html>


实现效果
uniapp页面生成图片,uniapp,uni-app,小程序
uniapp页面生成图片,uniapp,uni-app,小程序
uniapp页面生成图片,uniapp,uni-app,小程序文章来源地址https://www.toymoban.com/news/detail-754219.html

到了这里,关于uniapp使用webview将页面转换成图片支持h5、app、小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp WebView与H5页面通信

    1、参数拼在url里 在h5页面里用window对象获取拼接的url   2、H5环境中 用window.postMessage传递数据    用window.addEventListener(\\\"message\\\", receiveMessage, false);   3、APP环境与微信小程序中 可以通过 uni.postMessage 在 HTML 中向应用发送消息 H5端 uni.postMessage参数格式,传递的消息信息必须在 d

    2024年02月11日
    浏览(37)
  • 关于uniapp的app和uniapp的H5互相通讯实现H5调取app扫码再传入H5(app内嵌H5,webView)

    一.h5传值给app 1,在h5项目的mian.js中引入 //此处需要注意的是如果项目本身要打包成app,记得使用条件编译,否则在app运行时本次引入会报错 2.h5页面给app传值部分 3.app页面接收 html js由于我做的是扫码 二.扫码过后app向h5传值并跳转 1.app发起传值 在“一“的app接收h5传值部分我

    2024年02月02日
    浏览(39)
  • uniapp app的webview与h5交互操作

    app里的webview与h5交互操作,需要在h5页面加点代码,然后才能执行app里的方法 官方地址 在nvue页面里才能实现与h5的交互,设置webview的高度

    2024年02月11日
    浏览(46)
  • uniapp webview交互以及h5传参到app

    app端,onPostMessage在nvue页面下接受参数,message在vue页面下接受参数 链接后拼接传参,只在一开始能传 方法传参 H5端,我这是用vue2写的 在index.html页面加上这个 在首页接受参数 往APP传参 接受APP的方法传参,变量跟data里面的变量绑定

    2024年02月16日
    浏览(52)
  • uniapp 开发 APP 使用 web-view 引入H5 app与 h5 页面通信

    uniapp 可以同时兼容 APP 和 H5,但有时候有些功能在 APP 中实现不了而在 H5 中可以实现,就可以采用 web-view 的方式在 APP 模式下显示 H5 页面。但是 APP 和 H5 储存的参数是不能共享的,例如token,就涉及到 APP 与 H5 之间的参数传递。 H5 向 APP 传参:引入 webview.js ,调用 uni.postMes

    2024年02月13日
    浏览(48)
  • uniapp webview h5和app交互通信传参

    app端,onPostMessage在nvue页面下接受参数,message在vue页面下接受参数 链接后拼接传参,只在一开始能传 方法传参 H5端,我这是用vue2写的 在index.html页面加上这个 在首页接受参数 往APP传参 接受APP的方法传参,变量跟data里面的变量绑定

    2024年02月15日
    浏览(93)
  • uniapp - 实现可拖动悬浮按钮功能,支持手指拖曳放到页面任意位置(详细示例源码及注释,复制粘贴快速植入)全端兼容H5/app/小程序!

    百度搜的代码都太难用了而且有bug。。。 本文详细讲解在uniapp中实现一个可拖动的悬浮按钮,并且兼容在 H5/app/小程序中完美运行, 你可以直接复制源码,复制到你的项目中,附带 全局组件注册 的方法(要不每个页面都需要引一次), 如下图所示,你自己修改样式就行了,

    2023年04月08日
    浏览(57)
  • app中内嵌一个WebView,然后在WebView中加载该H5页面来达到打开小程序

    在 Android 应用中内嵌一个 WebView 来打开 H5 页面,从而打开小程序,可以通过以下步骤实现: 添加依赖库 首先,在项目的 build.gradle 文件中添加如下依赖库: 在布局文件中添加 WebView 在布局文件中添加一个 WebView 组件,并在 Activity 中获取该组件: 加载 H5 页面 使用 WebView 组件

    2024年02月14日
    浏览(43)
  • uniapp - [ H5 网页 / App ] 高性能 tabbar 底部菜单凸起效果,原生系统自定义底部菜单不卡顿、切换页面不闪烁、自动缓存页面(底部菜单中间自定义一个图片并悬浮起来)

    网上有很多自定义 tabbar 底部菜单的教程,但终归是组件形式,避免不了切换页面卡顿、闪屏闪烁、各平台不兼容等一系列问题。 本文 基于 uniapp 系统原生 tabbar 底部菜单,植入一个向上凸起的 “图片” 菜单,并支持点击触发事件, 您可以直接复制代码,换个中间凸起的菜

    2024年02月21日
    浏览(55)
  • 开发uniapp过程中对app、微信小程序与h5的webview调试

        因为在开发中使用到了webview,因为出现一些问题,所以需要对webview进行跟踪调试,但因为app,h5与微信小程序不一样,所以需要单独说一下。     一、H5     这个比较简单,因为都是在chrome,用F12就可以  二、对微信小程序       因为普通的uniapp页面上都能通过F12可以

    2024年02月11日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包