程序员经验分享-hwhale

微信二次分享

2023-11-19

微信二次分享

效果演示

如何运行项目

// 克隆代码到本地
git clone https://github.com/Jameswain/WeiXinSDK.git    
// 安装依赖
npm i
// 运行项目
npm run dev

img

通过charles配置代理，配置如下：

img

img

img

img

charles配置如下，你可以直接导入到你charles的Map remote，记住把IP地址换成你的IP地址。

<?xml version='1.0' encoding='UTF-8' ?>
<?charles serialisation-version='2.0' ?>
<map>
  <toolEnabled>true</toolEnabled>
  <mappings>
    <mapMapping>
      <sourceLocation>
        <protocol>http</protocol>
        <host>m.ximalaya.com</host>
        <port>80</port>
        <path>/49265909/album/11501536/</path>
      </sourceLocation>
      <destLocation>
        <protocol>http</protocol>
        <host>192.168.1.103</host>
        <port>8080</port>
        <path>/</path>
      </destLocation>
      <preserveHostHeader>false</preserveHostHeader>
      <enabled>true</enabled>
    </mapMapping>
    <mapMapping>
      <sourceLocation>
        <protocol>http</protocol>
        <host>m.ximalaya.com</host>
        <port>80</port>
        <path>/49265909/album/11501536/static/lib/jweixin-1.4.0.js</path>
      </sourceLocation>
      <destLocation>
        <protocol>http</protocol>
        <host>192.168.1.103</host>
        <port>8080</port>
        <path>/static/lib/jweixin-1.4.0.js</path>
      </destLocation>
      <preserveHostHeader>false</preserveHostHeader>
      <enabled>true</enabled>
    </mapMapping>
    <mapMapping>
      <sourceLocation>
        <protocol>http</protocol>
        <host>m.ximalaya.com</host>
        <port>80</port>
        <path>/app.js</path>
      </sourceLocation>
      <destLocation>
        <protocol>http</protocol>
        <host>192.168.1.103</host>
        <port>8080</port>
        <path>/app.js</path>
      </destLocation>
      <preserveHostHeader>false</preserveHostHeader>
      <enabled>true</enabled>
    </mapMapping>
  </mappings>
</map>

配置好代理以后，在微信里打开 m.ximalaya.com/49265909/album/11501536/ 这个网址，看到以下效果，表示代理配置成功，然后你就可以进行二次分享的测试了。

img

接下来通过详细的步骤介绍如何接入微信二次分享操作。

官方接入文档：https://mp.weixin.qq.com/wiki...

1、配置JS接口安全域名

1、做二次分享首先需要申请一个微信服务号。

2、登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

img

img

img

注意：这里的JS接口安全域名就是你需要进行二次分享页面的域名。

img

注意：配置JS接口安全域名时，首先需要MP_verify_576FDJKHHJK29XXTpb.txt 文件放置在域名根目录下；然后才能保存成功，如果配置的域名下没有MP_verify_576FDJKHHJK29XXTpb.txt 文件是无法保存成功的。

2、引入js文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/...

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js... （支持https）。

以上是官方的原文提供的js文件地址，我们一般都会把jweixin-1.4.0.js文件下载下来放在我们域名的静态文件中进行引入。

img

https://h5.jameswain.com/static/lib/jweixin-1.4.0.js // 发布到线上的地址

在index.html页面中加入以下代码：

img

3、访问服务端接口获取配置信息

​ 这里需要通过服务端提供的获取配置信息接口，获取权限验证的相关配置，例如我获取配置信息的接口是：http://m.ximalaya.com/x-third... 返回结果如下：

{
    "appId": "wx3a4b4454f28a932b",
    "timestamp": 1541226502,
    "nonceStr": "705a85bb-1e66-4a54-85a8-ebef769faee6",
    "signature": "3b4e00872606b69438c168c13fad772327b1d1b3"
}

编写配置微信分享公共代码

// src/common/wxsdk.js
import axios from 'axios'
/**
 * 获取微信分享配置接口地址
 * 换项目的时候，直接拷贝该文件，修改这个接口地址即可直接使用微信分享
 */
const GET_SHARE_CONFIG_URL = '/x-thirdparty-web/weixinJssdk/config?signatureUrl=http%3A%2F%2Fm.ximalaya.com%2F49265909%2Falbum%2F11501536%2F&thirdpartyId=17&_=1541230577945';

let wxconfig = null;
/**
 * 初始化微信分享配置
 */
async function initWeiXinConfig() {
  try {
    const { data } = await axios.get(GET_SHARE_CONFIG_URL);
    wxconfig = data;
    wx.config({
      debug: true,                                // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: wxconfig.appId,                              // 必填，公众号的唯一标识
      timestamp: wxconfig.timestamp,                      // 必填，生成签名的时间戳
      nonceStr: wxconfig.nonceStr,                        // 必填，生成签名的随机串
      signature: wxconfig.signature,                      // 必填，签名
      jsApiList: [                                        // 必填，需要使用的JS接口列表
        'checkJsApi',               // 判断当前客户端是否支持指定JS接口
        'onMenuShareTimeline',      // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
        'onMenuShareAppMessage',    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
        'onMenuShareQQ',            // 获取“分享到QQ”按钮点击状态及自定义分享内容接口
        'onMenuShareWeibo',         // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
        'onMenuShareQZone',         // 获取“分享到QZone”按钮点击状态及自定义分享内容接口
        'hideMenuItems',            // 批量隐藏功能按钮接口
        'showMenuItems',            // 批量显示功能按钮接口
        'hideAllNonBaseMenuItem',   // 隐藏所有非基础按钮接口
        'showAllNonBaseMenuItem',   // 显示所有功能按钮接口
        'translateVoice',           // 识别音频并返回识别结果接口
        'startRecord',              // 开始录音接口
        'stopRecord',               // 停止录音接口
        'onVoiceRecordEnd',
        'playVoice',                // 播放语音接口
        'onVoicePlayEnd',
        'pauseVoice',               // 暂停播放接口
        'stopVoice',                // 停止播放接口
        'uploadVoice',              // 上传语音接口
        'downloadVoice',            // 下载语音接口
        'chooseImage',              // 拍照或从手机相册中选图接口
        'previewImage',             // 预览图片接口
        'uploadImage',              // 上传图片接口
        'downloadImage',            // 下载图片接口
        'getNetworkType',           // 获取网络状态接口
        'openLocation',             // 使用微信内置地图查看位置接口
        'getLocation',              // 获取地理位置接口
        'hideOptionMenu',           // 隐藏右上角菜单接口
        'showOptionMenu',           // 显示右上角菜单接口
        'closeWindow',              // 关闭当前网页窗口接口
        'scanQRCode',               // 调起微信扫一扫接口
        'chooseWXPay',              // 发起一个微信支付请求
        'openProductSpecificView',  // 跳转微信商品页接口
        'addCard',                  // 批量添加卡券接口
        'chooseCard',               // 调起适用于门店的卡券列表并获取用户选择列表
        'openCard'                  // 查看微信卡包中的卡券接口
      ]
    });
  } catch (e) {
    console.error(e);
  }
};

export default {
  /**
   * 设置微信分享
   * @param opts
   */
  share(opts) {
    if (wx) {
      if (!wxconfig) {
        initWeiXinConfig();
      }
      //  默认配置
      const defaultOpts = {
        title: '互联网之子',
        desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
        link: window.location.href,
        imgUrl: 'http:// demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
        trigger: function (res) {
          //  不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          console.log('用户点击分享到朋友圈', res);
        },
        success: function (res) {
          console.log('已分享');
        },
        cancel: function (res) {
          console.log('已取消');
        },
        fail: function (res) {
          console.log(JSON.stringify(res));
        }
      }
      wx.ready(function () {
        //  分享到朋友圈
        wx.onMenuShareTimeline({...defaultOpts, ...opts, ...{title: opts.desc, desc: opts.title}});
        //  分享给朋友
        wx.onMenuShareAppMessage({...defaultOpts, ...opts});
        //  分享到QQ
        wx.onMenuShareQQ({...defaultOpts, ...opts});
        //  分享到腾讯微博
        wx.onMenuShareWeibo({...defaultOpts, ...opts})
        //  分享到QZone
        wx.onMenuShareQZone({...defaultOpts, ...opts});
      });
      wx.error(function (res) {
        console.log('error=>', res);
      });
    } else {
      console.log('当前不是微信环境');
    }
  }
}

4、在入口文件中进行分享配置

​  在Vue的入口文件中进行微信二次分享的配置，分享文案可以根据你的业务进行调整。
注意：二次分享必须要把代码部署到你配置的JS接口安全域名下才能看到效果。

// src/main.js
import wxsdk from './common/wxsdk'

// 配置微信分享
wxsdk.share({
  title: '互联网之子',
  desc: '长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
  imgUrl: 'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C25%2C550%2C363%3Bc0%3Dbaike80%2C5%2C5%2C80%2C26/sign=afce76f80055b31988b6d8357e99ae14/267f9e2f070828381f3de6edb299a9014c08f112.jpg',
  trigger: function (res) {
    //  不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
    console.log('用户点击分享到朋友圈', res);
  },
  success: function (res) {
    console.log('已分享');
  },
  cancel: function (res) {
    console.log('已取消');
  },
  fail: function (res) {
    console.log(JSON.stringify(res));
  }
});

此时微信二次分享就已经大功告成了。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

人工智能

git

json

微信二次分享 的相关文章

  • 自动将所有 GitHub 存储库镜像到 gitlab

    对于 GitLab 必须手动为每个存储库设置拉 推镜像 我想知道那里有any way可以自动将所有 Github 存储库同步到 GitLab 这样 当您在 GitHub 中创建新的存储库时 GitLab 中的存储库将自动创建 并充当拉取镜像

  • 如何使用Gson仅从Json反序列化某些特定字段？

    我有以下 JSON 字符串 channel bvmt initValues data value instrumentIds TN0007250012 TN0007500010 instruments mnemonic ADWYA marc

  • IE9 JSON 数据“您要打开还是保存此文件”

    开始使用 IE9 测试我的 jQuery 应用程序 看来我在这里可能遇到麻烦了 我注意到 当我将 JSON 数据返回到 Javascript 方法时 我总是收到此提示 您想打开或保存此文件吗 并为我提供了 3 个按钮 打开 保存和取消 当然

  • 如何在 Swift 中使用未知密钥解码 JSON 响应？

    我想将数据拆分为https blockchain info ticker https blockchain info ticker这样每一行都是它自己的String在一个数组中 我正在制作一个获取所选货币价格的应用程序 因此 如果有人想要澳

  • Git：发送电子邮件而不提交

    我有一个项目 我做了更改 并想使用 git send email 功能将它们发送给另一个用户 我发现它可以通过发送补丁来工作 由git format patch每次提交 是否可以只发送diff的 我不想先提交 然后发送补丁 是否有gitfo

  • Swift 3 中的 JSON 解析

    有没有人能够找到一种在 Swift 3 中解析 JSON 文件的方法 我已经能够返回数据 但在将数据分解为特定字段时我没有成功 我会发布示例代码 但我已经尝试了很多不同的方法但没有成功 并且没有保存任何代码 我想要解析的基本格式是这样的 提

  • Composer 用于下载私有 GitHub 存储库

    我无法使用 Composer 下载 github 私人存储库 php composer phar update 我收到以下错误 The https api github com repos company private1 https ap

  • 格里特：！ [远程拒绝] HEAD -> refs/publish/master （没有新的更改）

    我做了一些更改 提交了它们并将分支推送到 Gerrit git push gerrit 现在我的更改没有出现在 Gerrit 中 我认为这是因为我手动推送更改而不是使用git 审查 https github com openstack in

  • 用于检查 Apache Camel XML 中字符串的 JSONPath 表达式

    假设我有一个简单的 json 文件 如下所示 log host blah severity INFO system 1 我正在使用 Apache Camel 它是 Spring XML 来处理和路由 json 文件 我的路由代码看起来像这样

  • .gitconfig 别名函数调用

    我在 gitconfig 中定义了以下别名 alias teamcity tc tc是我在我的中定义的一个shell函数 bashrc文件 由于某种原因 我收到以下错误 aafghani 03 git workday amirafghani

  • 默认情况下 git merge -Xignore-space-change

    我该如何设置该选项ignore space change对于所有合并使用git config 我也许可以使用别名merge 但因为我希望该设置应用于git stash pop git stash apply git pull and git

  • 在 swift 中将简单字符串转换为 JSON 字符串

    我知道有一个同标题的问题here https stackoverflow com questions 30825755 convert string to json string in swift 但在那个问题中 他试图将字典转换为 JSO

  • Postgres JSON 数据类型 Rails 查询

    我正在使用 Postgres 的 json 数据类型 但想要使用嵌套在 json 中的数据进行查询 排序 我想在 json 数据类型上使用 where 进行订购或查询 例如 我想查询关注者数量 gt 500 的用户 或者我想按关注者或关注数

  • 如何将工作树与提交进行比较？

    我在用着 git diff mycommit 用于比较我的工作树mycommit 但它似乎忽略当前索引中不存在的文件 您可以按如下方式重现它 git init echo A gt A txt git add git commit m A g

  • 使用 Python 将对象列表转为 JSON

    我在转换时遇到问题Object实例到 JSON ob Object list name scaping myObj base url u number page for ob in list name json string json du

  • git 日志历史记录图，每次提交一行，彩色，带有日期

    我需要的格式如下 git log decorate graph oneline date order 但我也需要它 包含日期 短 具有相同的颜色 I tried git log decorate graph oneline date ord

  • 使用python将json和文件发送到flask

    我遇到这个问题 我试图在单个函数中向 Flask API 发送 接收一些文件和 JSON 在我的客户端 发件人 上我有 my json to be sent datas var1 var1 var2 var2 my file to be s

  • git 提交错误：检测到大文件

    您好 我正在为 ios 8 1 开发一个应用程序 xcode 我已经使用 googleMaps 框架来实现自动完成功能 当我尝试在 Git 中推送我的项目时 我收到大文件检测错误 后来尝试使用 git lfs 并跟踪 git 检测到的文件

  • 包含 contains 的 json 格式查询

    我在 ansible 中有以下 json 输出 active transaction null cores 4 hostname alpha auth wb01 active transaction null cores 4 hostnam

  • 如何返回 json 结果并将 unicode 字符转义为 \u1234

    我正在实现一个返回 json 结果的方法 例如 public JsonResult MethodName Guid key var result ApiHelper GetData key Data is stored in db as v

随机推荐

  • 欢迎进入嵌入式羊圈博客导航一站式搜索(所有博客的汇总帖)

    目录 一 Linux 服务器相关 二 折腾系列 三 日常学习笔记 四 硬件工程师之路 五 T5L迪文屏的开发与应用 六 ZigBee的开发与应用 七 C语言高阶学习笔记 八 嵌入式通信 九 单线通讯 十 单片机 嵌入式 十一 STM8S学习

  • vue常见面试题：computed和watch的区别是什么？

    根据vue官方文档可以看到 computed叫做计算属性 而watch叫做侦听器 顾名思义 计算属性 是依赖其他变量计算出来得到的一个变量 也就是它受别的变量的影响 别的变量一变他就会变 比如 计算属性是基于它们的响应式依

  • 微信公众号服务器配置验证服务器地址token php代码

    做记录

  • 三个小朋友分糖果

    题目描述 有甲 乙 丙三个小朋友 甲有x粒糖果 乙有y粒糖果 丙有z粒糖果 现在他们做一个游戏 从甲开始 将自己的糖平均分三份 自己留一份 其余两份分别给乙与丙 多余的糖果自己吃掉 然后乙与丙也依次这样做 问最后甲 乙 丙三人各有多少粒糖果

  • jquery attr()方法 添加，修改，获取对象的属性值

    转自 http hi baidu com 0701u item b8ec62c1daba973eef466524 jquery中用attr 方法来获取和设置元素属性 attr是attribute 属性 的缩写 在jQuery DOM操作中会

  • 区块链程序要怎么去测试？

    区块链程序开发越来越多 区块链怎么做测试 让大家很好奇 与传统测试不同的是区块链系统边界模糊 不管是是独立的应用程序 还是客户端 服务器模式的应用程序 传统软件都具备明显的系统边界 可以通过UI用户界面或者客户端去进行测试 区块链底层则不同

  • 空间解析几何

    解析几何是用代数方法研究几何对象之间的关系和性质的一门几何学分支 通俗讲就是通过建立坐标系来用方程描述几何图形 在解析几何创立以前 几何与代数是彼此独立的两个分支 而它的出现使形与数统一起来 这是数学发展史上的一次重大突破 在平面解析几何中

  • Unity3D Engine Architecture

    原文 http www umingo de doku php id paper mechs and tanks section03 Architecture To better understand the game s software

  • InfoQ视频直播分享报名：前贝尔实验室、Oracle架构师为你在线揭秘分布式平台内核...

    报名方式 关注InfoQ微信公众号 ID infoqchina 回复 InfoQ 即可观看在线直播技术分享 分享地点 u0026amp 时间 InfoQ直播微课堂将在熊猫 TV 网站播出 看腻了卖肉的女主播 来看看QCon 的明星讲师如何

  • html图片平铺div,前端小知识——图片平铺问题

    图片平铺有两种方式 直接写img标签或者通过background image方式 1 img标签 HTML CSS row margin 0 auto width 100 img width 100 height 100 margin 0

  • 用于Arduino的S4A图形化编程图文详解

    文章结构 1 说明 2 实操 2 1 S4A安装 2 2 Arduino IDE 安装 2 3 下载S4A的固件 2 4 连接 2 5 刷入S4A固件 2 6 打开S4A并测试 3 附录 Uno引脚图 1 说明 作者还拥有个人公众号 会写一

  • Dcat-admin 多级联动

    Dcat admin 2 x 多级联动 需求 一个省市区的三级联动功能 在表单中 需要可以实现三级联动 在列表的查询中 也需要实现三级联动 实现说明 前提 dcat admin 提供了 一个 load 方法 有两个参数 第一个是选项框的字段

  • deepin操作系统无法打开蓝牙

    自己用的deepin系统无法使用蓝牙传送图片 发现系统里面找不到这个功能 可以使用命令安装蓝牙功能 sudo apt install bluetooth blueman blueman assistant 安装以后 很方便手机传送文件

  • 怎样修改一个正在运行的soket的端口

    0 目录 整体架构目录 ASP NET Core分布式项目实战 目录 在开发项目的过程中 我新创建了一个controller 发现vs会给我们直接在controller头添加前缀 比如 Route api controller 即在访问接口

  • ESB开发WebService接口

    1 概述 在进行系统间集成时经常利用WebService 但是从建立WebService和调用的重复性和维护性的工作量都相当大 首先简单介绍一下 ESB全称为Enterprise Service Bus 即企业服务总线 它是传统中间件技术与

  • HertzBeat监控部署及使用

    易用友好的高性能监控告警系统 网站监测 PING连通性 端口可用性 数据库监控 API监控 自定义监控 阈值告警 告警通知 邮件微信钉钉飞书 安装部署 HertzBeat最少依赖于 关系型数据库MYSQL8 实际亲测用mysql5 7 也行

  • 单元测试总结

    概念 百度百科 单元测试 unit testing 是指对软件中的最小可测试单元进行检查和验证 对于单元测试中单元的含义 一般来说 要根据实际情况去判定其具体含义 如C语言中单元指一个函数 Java里单元指一个类 图形化的软件中可以指一个窗

  • （算法-双指针）判断子序列

    算法 双指针 判断子序列 题目描述 题目分析 解决方案 题目描述 给定一个长度为 n 的整数序列 a1 a2 an 以及一个长度为 m 的整数序列 b1 b2 bm 请你判断 a 序列是否为 b 序列的子序列 子序列指序列的一部分项按原有次

  • 1.windows系统：

    conda更新 conda update conda conda安装tensorflow 首先建立一个新的虚拟环境 1 conda create n my env python 3 6 n 也可以写全为 name 激活环境并安装tensor

  • 微信二次分享

    微信二次分享 效果演示 如何运行项目 克隆代码到本地 git clone https github com Jameswain WeiXinSDK git 安装依赖 npm i 运行项目 npm run dev 通过charles配置代理

热门标签