zoukankan      html  css  js  c++  java
  • vue 使用jssdk分享

    背景

    在vue中使用jssdk微信分享

    weixin-js-sdk mint-ui需要安装npm install weixin-js-sdk mint-ui --save

    mixins/wechat.js

    
    //weixin-js-sdk应用
    const wx = require('weixin-js-sdk')
    import { Toast } from 'mint-ui'
    export default {
      methods: {
        wechatShare(info) {
          // 判断苹果手机
          let _url = ''
          if (window.__wxjs_is_wkwebview === true) {
            _url = window.location.href.split('#')[0] || window.location.href
          } else {
            _url = window.location.href
          }
          // 访问后台接口获取微信参数
          this.$store
            .dispatch('GetWxParam', { url: encodeURIComponent(_url) })
            .then(res => {
              wx.config({
                debug: false,
                appId: res.data.appId, // 必填,公众号的唯一标识
                timestamp: res.data.timestamp, // 必填,生成签名的时间戳
                nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
                signature: res.data.signature, // 必填,签名,见附录1
                jsApiList: [
                  'previewImage',
                  'hideAllNonBaseMenuItem',
                  'showMenuItems',
                  'onMenuShareTimeline',
                  'onMenuShareAppMessage',
                  'chooseWXPay'
                ] // 必填,需要使用的 JS 接口列表,所有JS接口列表见附录2
              })
            })
            .catch(err => {
              console.log(err)
            })
          wx.ready(() => {
            const share_title = info.title
            const share_desc = info.desc
            const share_link = info.link
            const share_img = info.img
            wx.showOptionMenu()
            wx.onMenuShareTimeline({
              title: share_title, // 分享标题
              link: share_link, // 分享链接
              imgUrl: share_img, // 分享图标
              success: function() {
                Toast('已成功分享到朋友圈')
              },
              cancel: function() {
                Toast('已取消分享')
              }
            })
            wx.onMenuShareAppMessage({
              title: share_title, // 分享标题
              desc: share_desc, // 分享描述
              link: share_link, // 分享链接
              imgUrl: share_img, // 分享图标
              success: function() {
                Toast('已成功分享给您的朋友')
              },
              cancel: function() {
                Toast('已取消分享')
              }
            })
          })
        }
      }
    }
    
    

    使用方法
    import wxShare from '@/mixins/wechat' //引用
    export default {

    
    mixins: [wxShare], // 
    methods: {
     setShare() {
       const shareInfo = {
          title: `羽绒服低至199元!`,
          desc: `7月26日-8月3日,年中限时特惠,售完即止`,
          link: window.location.href,
          img: '.../logo.jpg'
        }
        // mixins
        this.wechatShare(shareInfo)
      },
    },
    created(){
        // 设置
        this.setShare()
    }
    }
    

    来源:https://segmentfault.com/a/1190000015999815

  • 相关阅读:
    innodb buffer pool小解
    information_schema系列十一
    Shader编程教程
    第四章 继承
    第三章 对象和类型
    第二章:核心C#
    前言和第一章.NET的体系结构
    单例模式
    代理模式
    第 1 章 策略模式【Strategy Pattern】
  • 原文地址:https://www.cnblogs.com/datiangou/p/10148616.html
Copyright © 2011-2022 走看看