草庐IT

h5页面跳转微信小程序。

票票. 2023-09-29 原文

一、先说页面表现，页面上有几点需要注意：

        1.标签写的时候，button按钮 一定要包在template标签里面。没有用vue的话，可以直接用<template>去包，如果是vue2用 <script type="text/wxtag-template"></script>去包，vue3用<div v-is="'script'" type="text/wxtag-template"></div>去包

        2.比较烦人的是样式，样式可能不显示或者不生效，需要真机测试一下，我这边写的时候呢，在<template>中用<style>标签包裹后出不来，所以改成行内样式。其次就是样式，页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，写在标签或其父节点上比如我加了 class="wx_open_box" 来写定位。

<div class="wx_open_box">
    <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index?user=123&action=abc">
        <script type="text/wxtag-template">
           <button class="btn" 
              style="width: 3rem;height: 3rem;border: none;background:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent!important;">&nbsp;&nbsp;&nbsp;&nbsp;</button>
        </script>
    </wx-open-launch-weapp>
</div>

页面到这里就OK了，然后就是js部分了。

1、首先就是支持跳转的JSSDK。引入js文件 要注意JSSDK版本需要1.6.0，直接在 index.html 中引用就成：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

 2. config配置（这个配置是H5部分配置的，并非要跳转到的小程序配置），调后端验签接口拿回来配置上就可以，这里要 注意到 验签接口是需要支持跳转小程序这个功能的 ，--- “ 因为我两个接口都通一个能跳一个不行，问了同事说这里是有讲究的”

wx.config({
  debug: true, // 调试的时候打开
  appId: '', // 后端的事情
  timestamp: '', // 后端的事情
  nonceStr: '', // 后端的事情
  signature: '',// 后端的事情
  jsApiList: [] ,// 需要的能力，比如拍照、获取信息等等，跳转小程序不需要
  openTagList:[] // 能够使用的标签，也就是HTML标签，只不过是微信自定义的。
});

 由于跳转小程序需要一个微信自定义的标签 wx-open-launch-weapp，所以上面的配置中的 openTagList 写上

openTagList:['wx-open-launch-weapp']

vue会显示wx-open-launch-weapp 报红，组件未注册。在main.js中加入

Vue.config.ignoredElements = ['wx-open-launch-weapp']

到这里停，一切都通之后页面就可以用了。pc端调试是没反应的，需要真机去试哈 ~

页面跳转xff0cxff0xffvue.jshtml5javascript

有关h5页面跳转微信小程序。的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  4. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  5. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  6. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  7. ruby-on-rails - RoR && "coming soon"页面 - 2

    我正在寻找一种简单的方法来为我在RubyonRails上的项目实现简单的“即将推出”(预启动)页面。用户应该能够留下电子邮件以便在项目启动时收到通知。有没有这样的插件\gem？或者我应该自己做... 最佳答案 LaunchingSoon是一个Rails插件。它还集成了MailChimp或Campaignmonitor. 关于ruby-on-rails-RoR&&"comingsoon"页面，我们在StackOverflow上找到一个类似的问题： https:/

  8. ruby - 如何让 GitHub 页面使用 master 分支？ - 2

    我有一个使用Jekyll托管在GitHub上的静态网站。问题是，我真的不需要master分支，因为存储库唯一包含的是网站。这样我就必须gitcheckoutgh-pages，然后gitmergemaster，然后gitpushorigingh-pages。有什么简单的方法可以摆脱gh-pages分支并直接从master推送？ 最佳答案 Theproblemis,Idon'treallyneedthemasterbranch,astheonlythingtherepositorycontainsisthewebsite.Isthere

  9. ruby - 如何设置 Mechanize 页面编码？ - 2

    我试图通过点击一个链接获得一个带有ISO-8859-1编码的页面，所以代码类似于这样:page_result=page.link_with(:text=>'link_text').click到目前为止，我得到的结果编码错误，所以我看到的字符如下:'T�tulo:'insteadof'Título:'我尝试了几种方法，包括:使用代理在第一个请求中声明编码:@page_search=@agent.get(:url=>'http://www.server.com',:headers=>{'Accept-Charset'=>'ISO-8859-1'})说明页面本身的编码page_result.

  10. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法，在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信：ubuntu20.04安装最新版微信--可以支持微信最新版，但是适配的不是特别好；比如WeChartOCR.exe报错。2.原生微信安装：linux系统下的微信安装(ubuntu20.04)--微信适配的最好，反应最快，但是微信版本只到2.1.1，版本太老，很多功能都没有。3.深度deepin-wine6安装微信：ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好，当前个人使用此种方法1个月，微信版本3.4；没什么大问题，尚可。一、WineHQ7.0安装微信

随机推荐