记录--静态网站 H5 跳小程序,以及踩坑

这篇具有很好参考价值的文章主要介绍了记录--静态网站 H5 跳小程序,以及踩坑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--静态网站 H5 跳小程序,以及踩坑

背景

我司有智慧功成家APP和对应的小程序,现在已经实现APP分享到微信,微信点击分享链接直接进入小程序。

目前有一个问题就是我们APP在网警那边还没有完全审批下来,已经搞了几个月了,还不知道啥时能上线。微信对于这类分享是有限制的,可以分享1000次,后面不给分享了。

我们就得想办法绕过微信分享,查了资料后,发现【H5跳小程序】是一个不错的方案。(微信开发者官方文档-H5跳小程序)但是照着官网做也是遇到不少坑,在此记录下,顺便梳理一下流程。

PS:该方案不仅可以直接在微信打开小程序,还可以直接从其他应用(如飞书)、或者浏览器打开小程序,就是我们需要的效果!

流程

1) 准备环境

  • 开发者账号必须是非个人的认证账号
  • 必须是开发者管理员账号扫码登录微信开发者工具,否则报没有权限的错误(这里我就踩了很多次坑)

2)开发静态网站

  • 需要先开通,云开发 -- 更多 -- 静态网站,需要付费的,选择公司支付即可。

记录--静态网站 H5 跳小程序,以及踩坑

  • 参考(微信开发者官方文档-H5跳小程序)可以完成百分之八十的工作,里面写得很明白了,需要准备啥,替换啥。
  • 如果只是需要在微信里面打开小程序,那只需要代码里面的 isWeixin 部分的逻辑,其他地方不用管,或者删除即可。
  • 这个静态html可以在vscode里面开发,也可以在微信开发者工具里面随便新建一个云开发项目,在里面写html。(我的如下图的 /miniprogram/index.html)

记录--静态网站 H5 跳小程序,以及踩坑

  • 动态设置参数 我们的路由是需要有动态参数的,我们是通过 setAttribute 处理的,如下图 wx-open-launch-weapp 标签的 path 属性,但是id是外界url参数传过来的,于是需要额外处理。
<!-- 1/3 微信环境 -->
<div id="wechat-web-container" class="hidden">
  <wx-open-launch-weapp id="launch-btn" appid="wx5113d940bb040b62"
    path="pages/order/infor/main?id=771378468155056130">
    <script type="text/wxtag-template">
      <style>.action-btn {
        width: 670px;
        height: 88px;
        line-height: 88px;
        background: #FF2E22;
        border-radius: 44px;
        text-align: center;

        font-size: 36px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        border: none;
      }</style>
      <button class="action-btn">去小程序支付</button>
    </script>
  </wx-open-launch-weapp>
</div>
js逻辑部分的isWeixin里面增加如下代码
var launchBtn = document.getElementById('launch-btn')
// 动态设置path
const query = {}
for (const [k, v] of new URL(window.location).searchParams) {
    query[k] = v
}
const path = `pages/order/infor/main?id=${query.id}`
launchBtn.setAttribute('path', path)
  • 部署出去后的域名是:your-env-name-0eysug01066a9e-1302818703.tcloudbaseapp.com ,然后在后面增加id的query参数即可。your-env-name-0eysug01066a9e-1302818703.tcloudbaseapp.com/?id=123456

3)开发云函数 上面第二步只能满足在微信里面打开小程序,如果需要支持其他h5环境也能打开,则需要开发云函数。

记录--静态网站 H5 跳小程序,以及踩坑

  • 新建一个云函数,如 tttttthtml里面的云函数匹配,默认代码是public,改为ttt即可)( 这里我已经新建了 ttt, 所以演示的写的是 xxx。)

记录--静态网站 H5 跳小程序,以及踩坑

记录--静态网站 H5 跳小程序,以及踩坑

  • 新建后,代码是没有这个云函数的,需要在开发者工具中自己创建云函数的文件夹,在 cloudfunctions 里面创建 ttt文件夹,然后把官方文档的 index.js复制进去。
  • 重点注意1,因为里面用到了 wx-server-sdk,所以需要npm init -y + npm i
  • 重点注意2,因为代码里面用到了getUrlScheme,所以需要再生产一个config.json文件,并配置为如下,否则不会返回openlink, 微信开发者-参考问答
{
  "permissions": {
    "openapi": [
      "urlscheme.generate"
    ]
  }
}

记录--静态网站 H5 跳小程序,以及踩坑

  • 最后 index.js 也要做修改,接收 query 的参数

记录--静态网站 H5 跳小程序,以及踩坑

  • 然后需要配置权限,还是参考官方文档。
  • 然后发布云函数,右击 ttt 文件夹,选择 上传并部署,不传node_modules

wx-open-launch-weapp 里面img 要用线上地址

wx-open-launch-weapp 里面img 要用线上地址,不能用本地地址,如下使用本地地址,最终渲染的页面没有这个图片,使用线上地址后正常显示。

<wx-open-launch-weapp appid="wx-fake-123456" path="pages/order/infor/main?id=771378468155056130">
    <script type="text/wxtag-template">
      <img src="./img/1-1.png" alt="1-1" width="149" height="55" class="img-1-1">
    </script>
</wx-open-launch-weapp>
<wx-open-launch-weapp appid="wx123456" path="pages/order/infor/main?id=771378468155056130">
    <script type="text/wxtag-template">
-     <img src="./img/1-1.png" alt="1-1" width="149" height="55" class="img-1-1">
+     <img src="https://fake-site.com/img/1-1.png" alt="1-1" width="149" height="55" class="img-1-1">
    </script>
</wx-open-launch-weapp>

wx-open-launch-weapp 里面定位要放到父节点

另外,需要注意以下几点:

  1. 页面中与布局和定位相关的样式,如position: fixed; top -100;等,尽量不要写在插槽模版的节点中,请声明在标签或其父节点上;
  2. 对于有CSP要求的页面,需要添加白名单frame-src https://*.qq.com webcompt:,才能在页面中正常使用开放标签。

记录--静态网站 H5 跳小程序,以及踩坑

 把原来放在 .img-1-1 的定位样式,放到 .img-wrap 上 代码如下:

<div class="img-wrap">
    <wx-open-launch-weapp appid="wx123456" path="pages/order/infor/main?id=771378468155056130">
        <script type="text/wxtag-template">
         <img src="https://fake-site.com/img/1-1.png" alt="1-1" width="149" height="55" class="img-1-1">
        </script>
    </wx-open-launch-weapp>
</div>    

完结

如果还有不懂的,可以参考 小程序开发——微信外环境静态h5跳转小程序

微信开发者文档-开放标签说明文档

本文转载于:

https://juejin.cn/post/7295805817055395878

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--静态网站 H5 跳小程序,以及踩坑文章来源地址https://www.toymoban.com/news/detail-749296.html

到了这里,关于记录--静态网站 H5 跳小程序,以及踩坑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot中整合ElasticSearch快速入门以及踩坑记录

    若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_本地运行若依前后端分离-CSDN博客 参考上面搭建项目。 Elasticsearch 是java开发的,基于 Lucene 的搜索引擎。它提供了一个分布式多用户能力的全文搜索引擎,基于R

    2024年01月17日
    浏览(54)
  • H5跳转微信小程序-成功案例(VUE)(踩坑无数)

    微信官方文档:H5跳转小程序. 已认证的服务号 绑定JS接口安全域名 IP白名单 将小程序和H5公众号进行关联 需要跳转的小程序页面path和原始ID(gh_xxxxxxxxx) 引入jweixin-1.6.0.js 1、已认证的服务号 H5必须是依附于公众号的,且公众号必须为 服务号 ,不是订阅号。 什么样的公众号

    2024年02月09日
    浏览(52)
  • 微信小程序使用web-view,内嵌跳转h5踩坑记!!

    由于业务需要在微信小程序内,嵌入外网h5到小程序,项目整体在开发,调试完成都没有任何问题,但是,在部署到测试环境之后,跳转h5报如下错误:   通过查阅官方文档,以及各类技术文档,报错的原因是,没有在微信公众平台配置业务域名和合法域名;具体操作步骤 【

    2024年02月08日
    浏览(63)
  • mac-hadoop3.3.6 源码构建以及踩坑记录

    因为hadoop的可执行文件 是在专门的机器上编译的 其中native库 不一定能适用于每个机器 导致在启动hadoop过程中 出现烦人的警告 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform… using builtin-java classes where applicable 如何说 为了解决 警告的话 可以直接使用已经编译

    2024年01月21日
    浏览(38)
  • VirtualBox Ubuntu无法安装增强功能以及无法复制粘贴踩坑记录

    在VirtualBox安装增强功能想要和主机双向复制粘贴,中间查了很多资料,终于是弄好了。记录一下过程,可能对后来人也有帮助,我把我参考的几篇主要的博客都贴上来了,如果觉得我哪里讲得不清楚的,可以去对应的博客去看,讲得更加详细。 报错:未能加载虚拟光盘…到

    2024年02月14日
    浏览(50)
  • 记录使用nginx部署静态资源流程,以及遇到的访问静态资源404问题

    将网站静态资源(HTML,JavaScript,CSS,img等文件)与后台应用分开部署实现 动静分离 ,提高用户访问静态代码的速度,降低对后台应用访问,减轻后台服务器的压力。 这里我选择放在了 html文件夹 下,(也可以放在和html文件夹同级,或其它位置 打开 conf文件夹 打开总配置文

    2024年02月08日
    浏览(64)
  • 小程序AR踩坑记录

    使用微信自带的 VisionKit API提供 AR 能力。官方手册地址: VisionKit 基础 虽然官方提供了 demo 代码,但是埋藏的暗坑还是不少。特此总结一下。 DEMO案例 待添加 逻辑流程 大致流程如下: 用户访问 AR 页面,程序进行初始化,通过 VKSession 获取到摄像头数据,并将图片传到后端进

    2024年02月02日
    浏览(34)
  • 微信外环境静态h5跳转小程序,如何传参?

    公司最近提了一个不常见的需求,就是在微信外环境静态h5跳转小程序并且还要传参,在查阅了大量资料后成功解决。 官网地址  静态网站 H5 跳小程序 1.开通微信云开发和静态网站 点击微信开发者工具中的云开发 .  现在是可以免费体验1个月,开通后进入云开发控制台点击

    2024年01月17日
    浏览(64)
  • 微信小程序跳小程序short-link(#小程序://)

      short-link获取:shortlink.generate | 微信开放文档 navigator组件新引入了一种跳转小程序页面的方法  参考: navigator 添加的新的小程序跳转方式-short-link | 微信开放社区

    2024年02月12日
    浏览(60)
  • ubuntu20.04安装opencv 3.2.0以及cv_bridge踩坑记录

    本次安装是在我的双系统下安装的,不同ubuntu版本或者不同硬件平台情况也许会有所不同,仅供参考。 第一步: 我采用的是github官方代码仓库下载安装的方式,下载的是3.2.0版本(其余版本安装过程类似) opencv官方链接 第二步:安装依赖项 值得一提的是,在此处我遇到过

    2024年02月04日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包