componentDidMount() {
this.getWxConfig()
} getWxConfig () {
// 请求后台接口拿到 data信息
wx.config({
debug: false,
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: ['checkJsApi', 'chooseImage', 'previewImage'],
// openTagList配置可使用的开放标签,
openTagList: ['wx-open-launch-weapp']
})
}

同一个url只需要配置一次

// render里面
<wx-open-launch-weapp
id="launch-btn"
username={username} // 小程序的用户名
path={path} // 小程序的页面路径
style={{position: 'absolute', background: 'transparent', width: '100%', height: '100%', top: 0, left: 0}}>
<script type="text/wxtag-template">
  <button style={{width: '70px', height: '60px', display: 'block', border: 'none', background: 'transparent'}}> </button>
</script>
</wx-open-launch-weapp>

这里的样式使用绝对定位的方式,将wx-open-launch-weapp标签定位到想要跳转的元素上,这里width和height要写上,script里面的button的宽和高要使用px单位,这里的标签样式都得使用style行内样式

react 微信h5跳转小程序的更多相关文章

  1. 微信h5跳转小程序wx-open-launch-weapp开放标签不显示(已解决)

    前言: 前几天成功对接了跳转第三方小程序的功能,今天有个页面有需要对接.但是奇怪的是用的和上次一模一样的配置,但就是死活不显示wx-open-launch-weapp这个开放标签的按钮,看不到任何效果 ...

  2. 今天记录一下h5跳转小程序,可以通过短信推广小程序

    今天记录一下h5跳转小程序最简单的方法,首先准备条件,是一个已经上线的小程序 根据URL Schame进行跳转,在微信公众平台登录自己的小程序,然后生成RL Schame,如下图 其次按照步骤进行小程 ...

  3. 微信公众号H5跳转小程序

    其实就是用 官方的组件wx-open-launch-weapp <div style="position:relative;"> <img class=" ...

  4. PHP微信公共号H5页面跳转小程序。

    1.H5跳转小程序. function myfun(){ var openid = "<?=$_SESSION['openid']?>"; wx.miniProgram ...

  5. h5页面跳转小程序

    2020年以前, 只能通过 web-view内嵌h5跳转小程序,现在  可以直接跳了!!!!!!  官方文档:https://developers.weixin.qq.com/doc/offiacco ...

  6. 微信公众号支付|微信H5支付|微信扫码支付|小程序支付|APP微信支付解决方案总结

    最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付.APP微信支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存. 先说注意 ...

  7. 微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结

    前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...

  8. 微信小程序跳转小程序

    <navigator target="miniProgram" open-type="navigate" app-id="{{BappId}}& ...

  9. APP跳转小程序,小程序跳转APP

    关注公共号,搜索 "APP跳转小程序,小程序跳转APP",查看原文 前置条件: 开发环境:windows 开发框架:uni-app , H5+,nativeJS,mpvue 编辑器 ...

  10. 微信正式开放内测“小程序”,不开发APP的日子真的来了?

    关注,QQ群,微信应用号社区 511389428 微信正式开放内测“小程序”,不开发APP的日子真的来了? 明星公司 缪定纯 • 2016-09-22 09:05 讨论了很久的微信应用号终于来了,不过 ...

随机推荐

  1. onActivityResult 解耦 不需要一层一层的写

    public abstract class AbsShareMessageTemplates implements IShareMessageTemplates { public final stat ...

  2. STM32F0 LL库IIC第二地址配置错误

    最近在做F0项目要用到多个IIC地址,使用Cube生成的LL库,第二地址进不了中断 F0版本:1.11.0 STM32CubeX生成的LL库代码为: 1 static void MX_I2C1_Ini ...

  3. List<Object>转为对象

    List<Object> list = new ArrayList<>(); List<BMSQ> bmsqList = (List<BMSQ>)(Li ...

  4. 不安全的权限 0644,建议使用 0600 虚拟机无法分配内存 virtual memory exhausted: Cannot allocate memory

    我都不知道我写了啥,自己都很混乱 aoteman@aoteman-virtual-machine:/tmp$ sudo -s #进入root用户模式 [sudo] aoteman 的密码: 12对不起 ...

  5. vs2019下 c++中 dll 的新建和引用步骤

    在工作目录下新建文件夹 DllImportTest  ,作为解决方案所在目录 新建项目动态链接库(DLL)项目 DllDemo 位置  指定到 上面新建文件夹 DllImportTest 所在的路径, ...

  6. python中的链表推导式

    python中的链表推导式 博客分类: Python Python  num=[1,2,3] myvec=[[x,x*2] for x in num] #嵌套一个链表,格式为一个数和他的平方 prin ...

  7. vvv,具名插槽

    <!DOCTYPE html> <html> <head> <script src="a.js"></script> & ...

  8. 设置VScode中console.log快捷键

    "Print to console": { "prefix": "log", "body": [ "conso ...

  9. 牛客 二叉树中和为某一值的路径 【时间19ms】【内存9560k】

    https://www.nowcoder.com/practice/b736e784e3e34731af99065031301bca 构造函数:new ArrayList(al)把al的所有值复制到 ...

  10. C++实现顺序表相关操作

    //顺序表#include<iostream>#include<cstdlib>//C中stdlib.h动态分配内存using namespace std;#define OK ...