2025年H5页面转微信小程序(web-view)

H5页面转微信小程序(web-view)效果 先放效果让大家看一下吧 过程很简单 H5 页面图 小程序预览图 准备工作 注册一个小程序 一定得是企业认证账号 个人账号无法使用 web view 具体注册就不演示了 国内的备案域名 你 H5 页面和后台 API 域名 部署 SSL 证书

大家好,我是讯享网,很高兴认识大家。

效果

先放效果让大家看一下吧,过程很简单。

H5页面图
在这里插入图片描述
讯享网

小程序预览图
在这里插入图片描述

准备工作

  1. 注册一个小程序(一定得是企业认证账号,个人账号无法使用web-view),具体注册就不演示了。
    在这里插入图片描述
  2. 国内的备案域名(你H5页面和后台API域名)
  3. 部署SSL证书(web-view必须使用https)

开始制作

  1. 配置服务器域名
    开发管理 —— 开发设置 —— 服务器域名(主要是配置request)
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  2. 配置业务域名
    开发管理 —— 开发设置 —— 业务域名(不配置web-view无法加载H5页面)
    注意:如果这里不配置,页面会提示 “小程序不支持打开非业务域名请重新配置”
    注意:个人认证没有这个配置,个人认证无法使用 web-view
    在这里插入图片描述
  3. 创建小程序
    在开发者设置里,找到AppID,填写进创建小程序内的AppID,然后模板就选择基础模板就可以了。
    在这里插入图片描述

在这里插入图片描述

  1. 修改页面(加入web-view
    打开 page/index/index.wxml 文件,将里面的内容都删除,只填写下面内容。
    web-view 标签里面 填写H5页面地址即可。
<view> <web-view src="https://xxxxx"></web-view> </view> 

讯享网

这样就开发完成了,可以上传审核发布,也可以真机调试了。

小讯
上一篇 2025-02-09 12:20
下一篇 2025-02-28 13:06

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/59317.html