h5跳转小程序问题

H5如何跳转小程序

微信官方文档

在维护公司项目时，使用测试环境，一直无法从公众号H5跳转小程序，而正式环境可以正常跳转，很是头疼，

开始百度，第一个公众号标签wx-open-launch-weapp 跳转微信小程序介绍,然而我完全符合它的要求,尝试手动调用api进入小程序,无用！裂开

然后，从小程序入手,比对正式环境公众号和测试环境公众号有什么配置不一样，最后发现有一个地方，小程序的

image-20240321170716217

由于正式h5域名和接口域名一致，所以一直没有发现这个问题，在添加了测试h5域名后，可以正常跳转小程序了

由于开始h5的域名是http的，加了证书后,图片是http的又无法访问到图片了

H5

          <wx-open-launch-weapp id="launch-btn" :path="小程序页面地址" username="小程序原始id">
              <script v-is="'script'" type="text/wxtag-template">
                <div style="width:1000px;height:1000px;opcity:0;color: white;">进入小程序</div>
              </script>
            </wx-open-launch-weapp>

小程序

小程序需要关联你的公众号

小程序域名白名单需要配置H5域名(只能是https)

公众号

在公众号菜单页面配置h5

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6e72dac3e21c3b97&redirect_uri="H5url"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

上方 H5url 是指你的H5地址（如果你想在H5中跳转你的小程序一定要使用https）