美文网首页
wx-share 微信分享

wx-share 微信分享

作者: 泠泉 | 来源:发表于2020-02-18 10:17 被阅读0次

需要注意的是签名的url需要与当前url一致。
分享的url,即link可以是当前域名下任意链接

  • api获取签名
import axios from 'common/js/axios'

const path = '/woa'

/// web-auth
export const createJsSignature = () => { return axios.post(`${path}/web-auth/create-js-signature`, {url: document.URL}) }
  • 封装的wxShareRegister
import Vue from 'vue'
import { Toast } from 'vant'
import {createJsSignature} from 'api/woa'

Vue.use(Toast)

const wx = require('weixin-js-sdk')

export default{
  install (Vue) {
    // 微信分享注册
    Vue.prototype.wxShareRegister = (url) => {
      createJsSignature().then(res => {
        const {data} = res
        wx.config({
          debug: false, // 开启调试模式,开发时可以开启
          appId: 'wxc11abfdbcasd5a31',   // 必填,公众号的唯一标识   由接口返回
          timestamp: data.timestamp, // 必填,生成签名的时间戳 由接口返回
          nonceStr: data.nonceStr,    // 必填,生成签名的随机串 由接口返回
          signature: data.signature,   // 必填,签名 由接口返回
          jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 此处填你所用到的方法
        })

        const shareData = {
          title: '招工啦,点击即可报名',
          desc: '名额有限,速来报名吧',
          link: url,
          imgUrl: `${location.protocol}//${location.hostname}/share-logo.png`
        }

        wx.ready(() => {
          wx.onMenuShareTimeline(shareData)
          wx.onMenuShareAppMessage(shareData)
        })

        wx.error(function (res) {
          console.log('errorMSG-->')
          console.log(res)
        })

      }).catch(err => {
        console.log(err)
        return false
      })
    }
  }
}
  • 引入

npm i weixin-js-sdk -S

!#main.js

// wx-jssdk
import wxShare from 'common/js/wx-share'
Vue.use(wxShare)
  • to use
mounted(){
  this.wxShareRegister(`${location.protocol}//${location.hostname}/share-page`)
}

相关文章

  • wx-share 微信分享

    需要注意的是签名的url需要与当前url一致。分享的url,即link可以是当前域名下任意链接 api获取签名 封...

  • 友盟分享接入的坑记录

    友盟的wx-share的aar中Manifest文件中定义了微信的入口WXEntryActivity,导致自行通过...

  • iOS - 集成ShareSDK/友盟分享之后,导致原生微信登录

    项目涉及微信登录、微信分享、微博分享、Facebook分享、Twitter分享。 使用 ShareSDK 的微信登...

  • 2021-05-12

    微信分享跳转2次,微信分享跳转微信正在连接,分享微信没反应 这几天搞微信分享,还是有一些坑在里面的,记录踩过的坑;...

  • 微信团队原创分享

    微信团队原创分享:Android版微信后台保活实战分享(网络保活篇) 微信团队原创分享:Android版微信后台保...

  • 微信分享的实现

    微信分享: //微信分享准备 getShareInfo() { $.ajax({ type:"GET"...

  • iOS 开发第三方登录和分享

    微信登录: Facebook 登录: 短信分享: 邮件分享: 微信分享: // Facebook 开放图谱动态分享...

  • 微信分享

    微信接口引入 微信分享

  • Flutter 微信分享集成

    1.pubspec.yaml 引入微信 #微信分享 fluwx: ^3.9.1 2.引入微信分享 //微信分享 i...

  • 宝宝最爱的“玩具”,居然是……

    【转自微信:宝宝妈妈知识分享,微信添加CosClone免费领取更多育儿宝典】 【转自微信:宝宝妈妈知识分享,微信添...

网友评论

      本文标题:wx-share 微信分享

      本文链接:https://www.haomeiwen.com/subject/vxowfhtx.html