场景描述:当在小程序中打开h5页面时,希望小程序的转发出去的标题,图片,跳转link可以通过h5通信实现自定义。

实现方式:通过h5给小程序通信,发送标题,图片,跳转link等信息,让小程序设置分享。

  1. h5发送给小程序通信代码
    引用微信js1.3.2以上才支持,<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    判断h5是在小程序环境中打开代码:

      //判断是否是小程序环境
    function doMiniProgram(callback) {
    try {
    //小程序环境设置分享
    var ua = window.navigator.userAgent.toLowerCase();
    //判断是否是微信环境
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    //微信环境
    wx.miniProgram.getEnv(function (res) {
    if (res.miniprogram) {
    callback();
    }
    })
    }
    }
    catch (ex) {
    console.log(ex);
    }
    }

    给小程序发送数据设置小程序分享:

    //设置小程序分享
    function setMiniProgramShare(shareTitle, imageUrl, shareUrl) {
    try {
    doMiniProgram(function () {
    // 小程序环境下逻辑
    wx.miniProgram.postMessage({ data: { title: shareTitle, path: shareUrl, imageUrl: imageUrl } })
    });
    }
    catch (ex) {
    console.log(ex);
    }
    }
  2. 小程序接收&处理逻辑
    h5页面: <web-view src="{{url}}" bindmessage="message"/>
    js逻辑:
    Page({
    data: {shareData:{}},
    onShareAppMessage(options) {
    return this.shareData
    },
    message (e) {
    var that = this
    console.log(e)
    that.shareData = e.detail.data[0]
    }
    })

小程序中嵌套的h5页面设置分享转发的更多相关文章

  1. 高大上的微信小程序中渲染html内容—技术分享

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxP ...

  2. 小程序中页面兼容h5标签的解析

    有时候当小程序向后台拿数据是一篇html标签的文章时,把它放进小程序会发现很多标签就不兼容,如果要一个个改又很麻烦,有没有方法可以很快地兼容html标签呢? 有个工具可以做到:wxParse 下载了它 ...

  3. 小程序中使用、H5、uniapp下使用阿里巴巴iconfront图标或者新增图标

    第一步:登录iconfont的账号,创建项目. 第二步:选择自己需要的图标,并添加入库(就是那个购物车的图标). 第三步:将选好的图片添加到项目.(点击上图中右上角的购物车图标). 第四步:下载资源到 ...

  4. 一招解决微信小程序中的H5缓存问题

    一招解决微信小程序中的H5缓存问题1.问题描述开发过程中,为了更新代码方便,往往会在小程序中嵌入H5页面.但问题来了,小程序原生代码更新版本后,简单的从微信中删除或者代码强刷就可以解决缓存问题,但小程 ...

  5. 小程序中的web-view与h5网页之间的交互

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html web-view 基础库 1.6.4 开始支 ...

  6. 微信小程序中使用 <web-view> 内嵌 H5 时,登录问题的处理方法

    在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...

  7. 小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号

    小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号 https://blog.csdn.net/hotqin888/article/details/84111389 小程序中打开网页和pdf h ...

  8. H5本地存储技术和微信小程序中的本地存储

    1.H5的本地存储 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. WePY 在手机充值小程序中的应用与实践

    wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序. 以及一些来自网上的 wepyjs 的相关资源: demo源 ...

随机推荐

  1. linux运行级

    Linux有0到6个级别,分别对应/etc/rcN.d,N对应7个级别 各运行级详解 0.关机 1.单用户模式,类似于Windows安全模式 2.多用户模式 3.完整的多用户模式.标准运行级 4.不用 ...

  2. Struts框架笔记03_OGNL表达式与值栈

    目录 1. OGNL 1.1 OGNL概述 1.1 什么是OGNL 1.1.2 OGNL的优势 1.1.2 OGNL使用的要素 1.2 OGNL的Java环境入门[了解] 1.2.1 访问对象的方法 ...

  3. There is no getter for property named 'PRODUCT_ID' in 'class java.lang.String'

    背景:心血来潮之际,准备搭建以下多月未曾碰触过的Mybatis框架,体验一番原生之美.殊不知能力有限,错误百出.特抒此文以纪念此坑.问题:想在sql管理中来统一处理一些简单的判断,但是添加判断之后参数 ...

  4. 【转】基于TMS320C6455的千兆以太网设计

    基于TI公司最新DSP芯片TMS320C6455.设计并实现了以太网通信软硬件接口.采用TMS320C6455片内以太网接口模块EMAC/MDIO,结合片外AR8031 PHY芯片,在嵌入式操作系统D ...

  5. 生成1~n的排列(模板),生成可重集的排列(对应紫书P184, P185)

    生成1~n的排列: #include<iostream> using namespace std; void print_permutation(int n, int *A, int cu ...

  6. Windows连接Linux服务器远程开发解决方案

    解决方案 vscode+Linux服务器 解决连接问题 vscode商店下载remote-ssh工具,然后进行配置. 这个网上依旧有很多详细的教程了,这里就不过多赘述. 配置免密登录 这一部分是我要重 ...

  7. Kotlin构造方法详解与初始化过程分析

    在上一次https://www.cnblogs.com/webor2006/p/11192025.html已经初识了Kolin的面向对象,先来回顾一下: 介绍了primary 构造方法,其特点回忆一下 ...

  8. 《你们都是魔鬼吗》实验十二 团队作业八:Alpha冲刺

    <你们都是魔鬼吗>第八次团队作业:Alpha冲刺 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 你们都是魔鬼吗 作业学习目标 软件测 ...

  9. Linux命令基础3-cd命令

    cd 到带空格的文件夹 [root@cctg-sjc16-grafana ccatgbld]# cd 'my test' [root@cctg-sjc16-grafana my test]# cd . ...

  10. bzoj1784: [Usaco2010 Jan]island

    现在居然出现一道题只有\(pascal\)题解没有\(C++\)题解的情况,小蒟蒻要打破它. 思维题:分类讨论 回归正题,此题十分考验思维,首先我们要考虑如何把不会走的地方给填上,使最后只用求一遍这个 ...