微信小程序嵌套h5页面+发布微信小程序（超级简单）

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

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

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

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

第二步：在创建的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放置到【微信小程序配置】中

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

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

编译过程中，如果报错：

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

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

第六步：提交审核
程序开发完成，无误后，可以直接点击上方图片中的提交审核，等待审核通过就好了。

微信小程序嵌套h5页面+发布微信小程序（超级简单）相关推荐

微信小程序嵌套h5页面怎么实现小程序支付
微信小程序嵌套h5页面怎么实现小程序支付小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付目前的流程,外链发送订单请求拿到预支付 ...
小程序嵌套h5页面_微信小程序内嵌h5页面
概况使用标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...
小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5
简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...
微信小程序嵌套h5页面，h5页面返回小程序，小程序和h5的页面和交互方法，h5点击分享小程序页面
相信大家在做小程序的时候有些需求会需要嵌套h5页面正常的h5页面嵌套很简单就是一个web-view然后放入h5链接就可以了 <web-view src="http://www.goo ...
小程序接入h5页面_微信小程序跳转外部链接（h5页面）以及数据交互
最近项目有个需求,在微信小程序中跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面. 1.跳转外部链接(官方文档) 1)入口 //跳转到入口 wx.navigateTo({url: '.. ...
微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...
小程序接入h5页面_原生小程序接入H5页面，请求后台接口，获取数据
项目开发中赶上三端接入h5的需求,因此本身动手作h5页面,可是在作的过程当中也赶上了许多的问题javascript 小程序端不支持在本地引入,因此须要将h5发布服务器,以请求接口的形式进行访问html ...
小程序实现h5页面的微信支付
项目需求: 由于小程序的热度高涨,公司为了引流,又想降低研发成本,所以将原先的H5项目嵌套在现在的小程序中. 之前的h5项目虽然实现了微信支付,但是嵌套之后小程序无法直接使用之前的h5支付功能.为了达 ...
小程序接入h5页面_微信小程序开发接入colorUI
本文接前天的小程序开发第一篇文章,上篇文章完成了微信官方提供的小程序初始模板代码的构建,今天这篇文章主要讲解小程序使用colorUI框架,并构建一个简单的页面. 前注: 1.本文代码基于第一篇文章的基 ...

微信小程序嵌套h5页面+发布微信小程序（超级简单）

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

微信小程序嵌套h5页面+发布微信小程序（超级简单）相关推荐

最新文章

热门文章