当前位置:首页 > vue.js技术文章 > vue微信分享到朋友圈 vue微信发送给好友

vue微信分享到朋友圈以及发送好友的代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:176

这篇文章主要知识点是关于vue微信分享、vue微信分享到朋友圈、vue微发送给好友、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

Vue.js前端开发:快速入门与专业应用

本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的

查看详情

vue微信分享到朋友圈 vue微信发送给好友

本文为大家分享了vue微信分享至朋友圈&&分享至朋友代码的封装,供大家参考,具体内容如下

1.新建share.js文件

import {shareSDK} from "../api/common";//分享api
import wx from 'weixin-js-sdk'
 
export const shareTitle = '测试';
export const shareUrl = '测试连接';
export const shareImg = '测试图片';
export const shareDesc = '测试详情';
 
/**
 *分享
 * @param _this
 * @param shareTitle 标题
 * @param shareUrl 链接
 * @param shareImg 图片
 * @param shareDesc 描述
 */
export const commonShare = (_this, shareTitle, shareUrl, shareImg, shareDesc) => {
 let url = window.location.href;
 let data = {
  url: url
 };
 shareSDK(data).then(res => {
  if (res.status == 1) {
   let data = res.data;
   wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: data.appId, // 必填,公众号的唯一标识
    timestamp: data.timestamp, // 必填,生成签名的时间戳
    nonceStr: data.nonceStr, // 必填,生成签名的随机串
    signature: data.signature, // 必填,签名,见附录1
    jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
   });
   wx.ready(function () {
    wx.onMenuShareTimeline({
     title: shareTitle, // 分享标题
     link: shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
     imgUrl: shareImg, // 分享图标
     success: function () {
      // 用户确认分享后执行的回调函数
      _this.$vux.toast.text('分享成功!!!');
     },
     cancel: function () {
      // 用户取消分享后执行的回调函数
      _this.$vux.toast.text('取消分享!!!');
     }
    });
    wx.onMenuShareAppMessage({
     title: shareTitle, // 分享标题
     desc: shareDesc, // 分享描述
     link: shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
     imgUrl: shareImg, // 分享图标
     type: "", // 分享类型,music、video或link,不填默认为link
     dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
     success: function () {
      // 用户确认分享后执行的回调函数
      _this.$vux.toast.text('分享成功!!!');
     },
     cancel: function () {
      // 用户取消分享后执行的回调函数
      _this.$vux.toast.text('取消分享!!!');
     }
    });
   });
  }
 }).catch(err => {
  console.log(err)
 })
};

2.组件中引入

import {commonShare, shareTitle, shareUrl, shareImg, shareDesc} from "./utils/share";
commonShare(this, shareTitle, shareUrl, shareImg, shareDesc);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vue中的watch监听数据变化及、 Vue2实现组件props双向绑定、 vuex的实例用法教程、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:如何解决vue props传值失败后输出undefined的问题

下一篇:vue组件jsx语法的实例用法

展开 +

收起 -

vue分享朋友圈 相关内容
Vue.js实战

尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅

查看详情
Spring Boot+Vue全栈开发实战

传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序

查看详情
Vue企业开发实战

本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

查看详情
前端工程师必备技能:Vue移动开发实战技巧

Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201

查看详情
Vue.js项目实战

Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

查看详情
Vue.js快速入门

目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。

查看详情
vue分享朋友圈 学习笔记
网友NO.234715

vue微信分享出来的链接点开是首页问题的解决方法

最近工作上遇到了这样一个Bug:“vue微信分享出来的链接点开是首页” 公司网站有PC端和移动端,两个版本。其中如果手机访问PC端,则自动跳转到移动端。(这是常规操作,没啥稀奇点。) 可神奇的问题来了。 在移动端中有微信分享功能,如果手机直接访问手机端的地址进入子页面分享,点开分享的链接进入的是子页面。但是如果是从PC端跳转进入手机端,分享子页面链接打开将会是主页。 这个问题我也百度了各种方法,折腾了一天,然而都没啥用。 最后自己想了一个替代方案: 在 static 目录下新建一个名为 html 的文件夹,在html文件夹中再新建一个 redirect.html (看到这个文件名是不是知道我要干啥了) 没错,我们做一个重定向。 html中写入以下内容 script let url = location.href.split('?') let pars = url[1].split('gt; { let p = n.split('=') data[p[0]] = p[1] }) if (!!data.……

网友NO.911753

vue-cli构建项目下使用微信分享功能

一、index.html中引入微信官方分享js script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"/script 二、在src下的assets/js文件夹下新建wx.jsapi.js文件,把分享做成公用方法 使用axios来发送请求,参照 //www.jb51.net/article/141008.htm配置vue-cli项目的axios 代码: import axios from 'axios'export default { wxShowMenu : function() { axios.post('http://test.youxue.pxjy.com/wxtest').then(function(res){ var getMsg = res.data.data; wx.config({ debug: false, //生产环境需要关闭debug模式 appId: getMsg.appId, //appId通过微信服务号后台查看 timestamp: getMsg.timestamp, //生成签名的时间戳 nonceStr: getMsg.noncestr, //生成签名的随机字符串 signature: getMsg.signature, //签名 jsApiList: [ //需要调用的JS接口列表 'onMenuShareTimeline', //分享给好友 'onMenuShareAppMessage', //分享到朋友圈 'showMenuItems', 'hideMenuItems' ] }); wx.ready(function() { wx.checkJsApi({ jsApiList:……

网友NO.704944

VueJs单页应用实现微信网页授权及微信分享功能示例

在实际开发中,无论是做PC端、WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算完成了,但开发过程中遇到好几个坑。废话不多说了,开始正题。 描述点 微信相关开发知识了解 怎么样实现微信相关功能本地测试 微信网页授权 微信分享 微信相关开发知识了解 微信公众号的appId,AppSecret 当我们注册一个微信公众号后,便能够得到一个appId(每个微信公众号只有一个,一个微信公众号唯一的标识)和appSecret(可以进行重置),这两个信息是进行微信公众号开发必不可少的,因为微信公众号中几乎所有功能的开发都与这两个信息相关。 微信公众号中IP白名单 在开发微信公众功能的时候,需要我们添加IP白名单,这样以便能够获……

网友NO.879245

vue-router history模式下的微信分享小结

背景 旧项目改造,进行前后端分离。做成了spa,为了保证后端路由时期链接可用性,使用了history模式。 因为不同的页面有不同的分享内容,所以每次路由都要重新进行wx.config/wx.ready调用 微信分享遇到的坑 微信官方文档上有下面一段话: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复) 在实际测试和大量真实数据收集后发现,Android4.4+都是支持pushState的。也就是说,没有遇到官方文档所述的问题。(此番调研后才决定采用history模式进行实施的,导致IOS下踩了坑) IOS下遇到了问题: # 打开页面时分享没有问题,路由一次之后再分享……

网友NO.223650

vue实现微信分享朋友圈,发送朋友的示例讲解

首先下载微信jssdk引入项目中,这里我就不说怎么去安装了,如果不会的可以看一下npm教程和es6的教程。 第一步, 引入微信jssdk,此处我是通过下载微信jssdk,然后用webpack引入进项目的。 第二步, 获取详情数据,渲染页面。 第三步, 获取详情数据成功后再获取微信签名,token等配置信息。 第四步, 通过api配置所想要的功能 代码: template div class="details" player :videoUrl="details.videoUrl" :coverUrl="details.coverUrl" :videoId="details.videoId"/ div class="description" span class="label" :{{details.videoLabel}}/span p class="title"{{details.videoTitle}}/p p class="info" span{{details.mtime}}/span i class="iconfont icon--"/i {{details.videoPlayTimes}} /p p class="summary"简介/p p class="article ql-editor" v-html="details.videoDescription"/p /div /div/templatescriptimport player from '@/components/player'import { videoDtails, getApp } from '@/config/api'/* eslint-disable no……

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757