将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!

这篇具有很好参考价值的文章主要介绍了将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用到的技术为uniappweb-view
首先,我们先来了解一下web-view是什么:
简单的一句话来讲:web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。
web-view的各类属性值:

第一步:使用HBuilder创建一个uniapp项目,没有安装HBuilder可以在官网下载一下。
官网地址:https://www.dcloud.io/hbuilderx.html
新建一个uniapp项目:

  1. 点击文件——>新建——>项目
  2. 在弹出的窗口中选择uni-app
  3. 配置项目名称,及项目所有存放的路径,根据需求选择模板
  4. 配置完成后,点击下方的创建即可

第二步:在创建的uniapp项目中,找到index.vue文件,写一个的标签,其中,属性src需要配置上要访问的h5的链接地址。

<template>
	<view class="content">
		<web-view src="http://要访问的ip地址/lsyzt/lsydy/new_Hpage.html"></web-view>
	</view>
</template>


第三步:配置小程序的appid
登录微信公众平台,登录小程序账号,在【设置】下的【基本配置】中找到账号信息,复制AppID。

在程序目录中,找到manifest.json文件,将appid放置到【微信小程序配置】中

第四步:配置完成后,点击运行,运行到小程序模拟器

选择微信开发者工具,配置好路径。

编译过程中,如果报错:

需要在微信开发者工具中开启一下服务端口:
配置完成后,界面会在开发者工具中展示出来:
第五步:发布微信小程序
在开发者工具中,点击上传按钮,配置版本号等相关项目备注,点击右下方的上传即可

上传完成后,可以在微信公众平台中展示:
【管理】-【版本管理】

第六步:提交审核
程序开发完成,无误后,可以直接点击上方图片中的提交审核,等待审核通过就好了。文章来源地址https://www.toymoban.com/news/detail-493848.html

到了这里,关于将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序webview(H5页面)调用微信小程序支付

    1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现; 2.微信小程序(webview访问H5页面)必须使用微信小程序支付; 如何实现以及实现方式以及支付后页面返回功能: 商品详情(h5页面)--商品确认页(h5页面)--收银台(h5页面)(点击调

    2024年02月11日
    浏览(63)
  • 微信H5页面实现微信小程序支付

    背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了。说干就干,在小程序中设置好基本信息后,一预览居然成功了,一切看来是那么顺利,可到了系统的支付环节

    2024年02月14日
    浏览(53)
  • 微信小程序如何跳转H5页面

    1、登录微信公众后台,进入【开发-开发管理-业务域名】,点击修改。 2、首先请下载校验文件,并将文件放置在域名根目录下。 我是把文件放在nginx主机的data目录下,然后通过增加nginx.config配置,重启nginx后可以通过域名直接访问该校验文件;  nginx.config配置如下:  如何

    2024年02月11日
    浏览(62)
  • H5页面跳转微信小程序

    微信浏览器中实现跳转 使用微信官方接口 wx-open-launch-weapp (该方法只开放给已认证的服务号或者小程序云开发的静态网站托管绑定的域名下的网页) 案例代码 相关文档 目录 | 微信开放文档 微信开发者平台文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.htm

    2023年04月17日
    浏览(77)
  • 微信小程序扫码打开H5页面

    要在微信小程序中扫描二维码打开H5页面,你需要使用微信小程序的API接口wx.scanCode()。以下是示例代码: 1 . 在小程序页面中添加一个按钮,并绑定点击事件: 在小程序页面的js文件中编写scanCode()方法: 在小程序中添加一个webview页面用于展示H5页面,代码如下: JS代码 以上

    2024年02月11日
    浏览(58)
  • 微信小程序内嵌H5页面实现微信支付

    背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了。说干就干,在小程序中设置好基本信息后,一预览居然成功了,一切看来是那么顺利,可到了系统的支付环节

    2024年02月11日
    浏览(61)
  • 微信小程序、微信公众号、H5页面之间的跳转

    一、微信小程序与公众号 可关联已有的小程序或快速创建小程序,已关联的小程序可被使用在自定义菜单和模板消息等场景中。 公众号可关联同主体的 10 个微信小程序及不同主体的 3 个小程序,同一个小程序可关联最多 50 个公众号。 二、微信小程序与H5页面 1、微信小程序

    2024年02月06日
    浏览(48)
  • H5 在微信浏览器唤起微信小程序页面

    微信 URL Scheme 微信短链 URL Link 优点 通过服务端接口或在小程序管理后台 生成后即可用 缺点 有效期有限制,最长 30 天。 1 对 1 有调用上限:每天生成 URL Scheme 和 URL Link 总数量上限为50w 链接形式 URL Scheme - weixin://dl/business/?t=xxxxxx URL Link - https://wxaurl.cn/*TICKET* 或 https://wxmpurl

    2024年02月12日
    浏览(69)
  • 如何在【微信小程序 】中的 webview 查看H5页面的console.log和调试H5页面?

    大家好我是 黑臂麒麟 ; 下面是开发微信小程序嵌入H5调试技巧: 问题: 在微信小程序页面中,web-view内嵌了另一个页面url,从小程序跳转到该H5页面的时候,无法看到该H5页面的控制台信息。那就没有办法了么?不,凭着锲而不舍的精神,在网络的海洋遨游许久。我查找到解

    2024年02月17日
    浏览(48)
  • 微信小程序与内嵌h5页面之间的参数传递

    小程序是采用vue+taroui技术栈 h5页面 所在文件:h5.vue 小程序页面:wx.vue,这里我用的是taro获取当前页面栈,大家可以用wx 这里的this.routerParams==={params:1} 小程序页面:wx.vue,首先向内嵌h5的webview所在页面跳转并携带所传参数。 webview页面—/pages/processLink/index。index.vue,由该页面

    2024年02月15日
    浏览(82)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包