首页 > 编程语言 >记录--静态网站 H5 跳小程序,以及踩坑

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

时间:2023-12-07 18:48:35浏览次数:40  
标签:里面 -- 微信 程序 H5 静态 文档 开发者 ttt

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

背景

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

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

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

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

流程

1) 准备环境

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

2)开发静态网站

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

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

  • 动态设置参数 我们的路由是需要有动态参数的,我们是通过 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)

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

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

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

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

  • 然后需要配置权限,还是参考官方文档。
  • 然后发布云函数,右击 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:,才能在页面中正常使用开放标签。

 把原来放在 .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,静态,文档,开发者,ttt
From: https://www.cnblogs.com/smileZAZ/p/17883658.html

相关文章

  • UML各类型含义
    箭头含义:导语在平时的开发中,难免会遇到画UML图的时候,也就是我们所说的类图,但是UML图中的箭头多种多样,所代表的含义也是各不相同,今天我们就来说说这几种箭头所代表的含义。1泛化概念:泛化表示一个更泛化的元素和一个更具体的元素之间的关系。泛化是用于对继承进行建模的UML元素......
  • UML各类基础知识总结
    1、UML关系泛化(也就是我们传统意义上的继承关系)子类继承父类,关系用extend关键字标识;关联可以说是一种属于关系,图中即说的是PhoneNumber类属于Master类,同时,除了一对一的关系之外,还可以用一对多、多对一、多对多的关联关系,除了单向关联之外,双向关联也是存在的;需要注意的是,在......
  • 12月7每日打卡
    UML9种模式图:用例图(UseCaseDagram):用例图是一种展示系统功能需求的工具,它描述了系统如何与外界交互以实现特定目标。用例图主要由用例和参与者组成,用例是系统的某一项功能或者业务流程,而参与者则是与电脑程序进行交互的角色。用例图能够帮助系统开发人员更好地理解客户需求,快速......
  • uml知识总结
    UML图的作用:UML的目标是以面向对象图的方式来描述任何类型的系统,具有很宽的应用领域。其中最常用的是建立软件系统的模型,但它同样可以用于描述非软件领域的系统,如机械系统、企业机构或业务过程,以及处理复杂数据的信息系统、具有实时要求的工业系统或工业过程等。总之,UML是一个通......
  • P8614 [蓝桥杯 2014 省 A] 波动数列
    这道题的精髓在于DP公式的推理#include<iostream>#include<stdio.h>#include<algorithm>#include<cstring>usingnamespacestd;constintN=1005,mod=100000007;intn,s,a,b;intdp[N*N];intmain(){cin>>n>>s......
  • 支持生成接口文档!Apipost IDEA插件使用体验
    前言Idea是一款功能强大的集成开发环境(IDE),它可以帮助开发人员更加高效地编写、调试和部署软件应用程序,Idea还具有许多插件和扩展,可以根据开发人员的需要进行定制和扩展,从而提高开发效率,今天我们就来介绍一款国产的API调试插件:Apipost-Helper什么是Apipost-Helper?Apipost-He......
  • 数据结构:单链表——定义、插入、删除
    1、查找元素查找第i个元素LNode*GetEleme_i(LinkListL,inti){if(i<1){returnNULL;}LNode*p;p=L;intj=0;while(p!=NULL&&j<i){p=p->next;j++;}returnp;}查找e元素的结点LNode*GetEleme_e(LinkList&L,ElementTypee){LNode*p;p=L;while......
  • 超级好用的IDEA插件推荐
    IDEA是一款功能强大的集成开发环境(IDE),它可以帮助开发人员更加高效地编写、调试和部署软件应用程序。我们在编写完接口代码后需要进行接口调试等操作,一般需要打开额外的调试工具。今天给大家介绍一款IDEA插件:Apipost-Helper-2.0。代码写完直接编辑器内调试、还支持生成接口文档、......
  • UML知识点
    UnifiedModelingLanguage(UML)包含不同类型的类图,用于描述系统中的类、对象和它们之间的关系。以下是几种常见的类图类型及其介绍:类图(ClassDiagrams):类图是描述系统中类及其之间关系的静态结构图。它展示了类的属性、方法、关联、继承、接口等信息。主要元素包括类、接口......
  • 如何为python程序debug
    如何为python程序debug 1调试理论的简单介绍bug的触发过程:需求--设计--代码--fault--error--failure2看懂报错信息3利用print方法调试程序4利用assert方法调试程序assert:后面举一个条件,如果不满足,则运行错误5利用你的idea来调试程序 首先打开IDEA2打开所需......