手把手教你:微信小程序内嵌网页或H5页面
对小程序开发一点都不了解的小白鼠,经过昨天下午半天的研究,终于实现小程序内嵌H5页面功能,下面把经验和代码分享给大家,请多多指教!
微信小程序内嵌网页或H5页面,总结起来就是在小程序页面中添加一行如下代码
<web-view src="https://www.**888.com"></web-view>
其中https://www.**888.com就是所嵌入的H5页面。
源码和具体的使用细则,可以到下载源码及使用说明 。
下面进入正题:
一、注意事项
1.1注册小程序账号必须为企业的。因为个人类型与海外类型的小程序暂不支持使用web-view组件。
1.2嵌入的H5页面,必须放在自己的服务器中。自己的服务器外网可以访问且已配置HTTPS访问。
二、具体步骤
2.1小程序开发环境准备(注册企业小程序账号,下载小程序开发环境,开发HelloWorld小程序)
注册企业小程序账号
请参考微信小程序官网https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18111420
不会操作的,可以在文章最下方下载注册企业小程序账号步骤,详细截图及各步骤中的注意事项,这里就不累赘说明了。
下载小程序开发环境和开发HelloWorld小程序
请参考微信小程序官网https://developers.weixin.qq.com/miniprogram/dev/#安装开发工具
2.2小程序中嵌入H5页面(H5页面对应的服务器配置https访问,小程序中配置服务器域名和业务域名,新建嵌入H5小程序项目)
H5页面对应的服务器配置https访问
请参考我另外一篇博客,地址https://blog.csdn.net/jlq_diligence/article/details/84107729
如果在移动手机中访问嵌入H5页面时,提示“该证书并非来自可信的授权中心”,说明证书有问题或者配置证书不对,可以在博客中留言,我看到时,给你回复。
小程序中配置服务器域名和业务域名
登录小程序账号后,进入“设置-》开发设置”界面,在页面中部,有个“服务器域名”和“业务域名”,这2个都是挨着的,如何配置具体如下:
设置https://mini.***.com后的截图为:
注意:域名使用一级域名,例如www.***.com,不要配置demo.***.com二级域名,不然验证不过。
配置成功后的截图如下:
新建嵌入H5小程序项目
选择“小程序项目”后,出现如下界面:
登录 https://mp.weixin.qq.com ,我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。
设置后为:
确定后,弹出如下界面:
代码如下:
<!--index.wxml-->
<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view><web-view src="https://www.**888.com"></web-view>
</view>
添加H5页面后,编译-》预览,再打开微信,扫预览二维码,就大功告成了。
自己整理的文档目录结构如下,如果有需要,可以从最下方的链接进行下载:
源码和具体的使用细则,可以到下载源码及使用说明 。
手把手教你:微信小程序内嵌网页或H5页面相关推荐
- 微信小程序嵌套iframe_微信小程序内嵌网页web-view
web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 客户端 6.7.2 版本开始,navigationStyle: custom 对 ...
- 微信小程序内嵌H5网页
微信小程序内嵌网页 1.登录微信公众平台,选择对应的小程序进入(个人类型的小程序暂不支持使用) 2.在小程序后台左侧菜单选择"开发"–"开发管理"–" ...
- 手把手教搭建微信小程序教程
小白式手把手教搭建微信小程序教程 宝塔软件商店下载如下:php7.3 Nginx 1.20.2 MySQL 8.0.24 phpMyAdmin 5.0 搭建准备1:一台服务器(压缩包里附购买教程) ...
- 微信小程序内嵌webview实现微信登录
一.调研场景 1, 微信小程序内嵌webview实现微信登录 二.技术实现 1. web-view标签实现链接内嵌 小程序里嵌套web-view页面 (1)src属性:webview 指向网页的链接. ...
- 小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5
简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...
- 微信小程序调试webview_微信小程序内嵌webview相关知识点整理
前言 随着微信小程序的广泛应用,越来越多的商家选择将营销阵营选择迁移到了小程序中,但受其小程序体积限制的影响,不能够完全满足商户的要求,应运而生的web-view组件很好的解决的这一问题.一方面内嵌w ...
- 微信小程序内嵌H5页面实现微信支付
背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了.说干就干,在小程序中设置好基本信息后,一预览 ...
- 微信小程序跳转公众号h5页面
小程序提供了web- view组件进行用来内嵌网页 根据限制说明准备域名即可,开发阶断可以使用http的域名,在开发者工具中勾选不验证https证书即可,发布上线时必须使用https的域名. 同时需要 ...
- 小程序嵌套h5页面_微信小程序内嵌h5页面
概况 使用 标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...
- 微信小程序内嵌h5页面或者跳转至外部链接,及在webview页面添加元素
方法很简单,只需要在wxml里写上 <web-view src="http://www.baidu.com"> //在webview里面添加元素要使用cover-vie ...
最新文章
- SQL中的Null值
- 韦东山虚拟机中arm-Linux-gcc的安装方法
- LeetCode:85. 最大矩形
- Scala \和%运算小案例
- 初学Java你有这些疑惑吗?本文给你几个建议
- 贪心算法讲解(集合覆盖问题,旅行商问题求解)
- springmvc(17)异步消息简介(部分)
- 回答一个微信好友的创业问题
- 安装百分之80卡住_关注丨男子翻越高铁站台丢命,家属向铁路部门索赔80万!法院这样判...
- VC++6.0的大bug(运行成功,调试出错,溢出)的解决方案
- 24. Element namespaceURI 属性
- 面试中爱问的大数量的问题总结
- 李宏毅机器学习笔记day1
- 安川焊接机器人做圆弧运动编程_安川MOTOMAN工业机器人编程与操作(6)
- 围观了字节跳动张一鸣近 10 年的微博,有人整理了这 231 条干货关键词:延迟满足感,自控,理性,反省,创新,学习。...
- html5 自动格式化,VSCode插件JS-CSS-HTML Formatter自动格式化代码
- 如何在Ubuntu上安装并使用Docker
- ST公司三轴加速度计LIS3DH应用
- 从下载镜像到装系统(MSDN 和软碟通)
- 高光谱数据预处理之移动窗口平均平滑算法