• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序内嵌网页或H5页面(zf)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

对小程序开发一点都不了解的小白鼠,经过昨天下午半天的研究,终于实现小程序内嵌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页面后,编译-》预览,再打开微信,扫预览二维码,就大功告成了。

自己整理的文档目录结构如下,如果有需要,可以从最下方的链接进行下载:

 

源码和具体的使用细则,可以到下载源码及使用说明 。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
python(4)小程序-异步加载发布时间:2022-07-18
下一篇:
超好用超短的小程序请求封装发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap