资讯专栏INFORMATION COLUMN

微信内h5页面打开小程序

flybywind / 748人阅读

相关配置

  1. 微信js文件版本大于等于1.6.0
    https://res.wx.qq.com/open/js/jweixin-1.6.0.js
  2. 微信授权配置

    window.wx.config({
     ...otherConfig,
     openTagList: ["wx-open-launch-weapp"]
    })
  3. 调用示例

    const style = {
      position: "absolute",
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    };
    
    function OpenWeapp({ originId, pagePath }) {
      return (
     
       
     
      );
    }
    
    // 使用方式
    
    点击跳转小程序

为什么给div添加position: relative呢?

由于wx-open-launch-weapp设置样式比较困难,故放弃设置样式,将wx-open-launch-weapp作为一个透明的占位元素,撑满父元素,也能达到预期的功能

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117888.html

相关文章

  • 浅析微信支付:微信支付简单介绍(程序、公众号、App、H5

    摘要:本文是浅析微信支付系列文章的第二篇,主要讲解一下普通商户接入的支付方式以及其中的不同之处。浅析微信支付前篇大纲微信支付是集成在微信客户端的支付功能,用户可以通过手机完成快速的支付流程。目前微信支付支持手机系统有苹果安卓和。 本文是【浅析微信支付】系列文章的第二篇,主要讲解一下普通商户接入的支付方式以及其中的不同之处。 上篇文章讲了本系列的大纲,没有看过的朋友们可以看一下。 浅析微信支...

    shadowbook 评论0 收藏0
  • H5实例教学--信内嵌视频2(素材来自腾讯孙尚香末日机甲皮肤宣传H5

    摘要:说明在以下开始您的自定义代码行后的新行上添加您的自定义代码。单击此元件实例时,此代码将执行。开始您的自定义代码此示例代码在输出面板中显示已单击鼠标。 结合之前的两篇解析 微信内嵌视频1(案例浅析)https://segmentfault.com/a/11...从AnimateCC到CreateJS入门https://segmentfault.com/a/11... 这次是一篇creat...

    spademan 评论0 收藏0
  • H5实例教学--信内嵌视频2(素材来自腾讯孙尚香末日机甲皮肤宣传H5

    摘要:说明在以下开始您的自定义代码行后的新行上添加您的自定义代码。单击此元件实例时,此代码将执行。开始您的自定义代码此示例代码在输出面板中显示已单击鼠标。 结合之前的两篇解析 微信内嵌视频1(案例浅析)https://segmentfault.com/a/11...从AnimateCC到CreateJS入门https://segmentfault.com/a/11... 这次是一篇creat...

    hyuan 评论0 收藏0
  • H5实例教学--信内嵌视频1(案例浅析)

    摘要:但好在中,新增了属性,可以使视频内联播放。以上为该案例主要需要解决的问题。补充资料视频播放优化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上为案例二维码 首个H5案例解析 从头开始分析 在 iOS 上,APP 都是使用的系统自带的浏览器进行页面渲染,video 播放视频的效果是统一的,只需要考虑不同的 iOS ...

    quietin 评论0 收藏0

发表评论

0条评论

flybywind

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<