vue 使用jssdk分享

MrZONT 发布于2019-08-26 12:09 / 1564人阅读

摘要：背景在中使用微信分享需要安装应用判断苹果手机访问后台接口获取微信参数必填，公众号的唯一标识必填，生成签名的时间戳必填，生成签名的随机串必填，签名，见附录必填，需要使用的接口列表，所有接口列表见附录分享标题分享链接分

背景

在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()
}
}

云服务器 GPU云服务器微信分享的jssdk vue使用webrtc vue 中使用 webrtc vue怎么使用webRTC

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108130.html

微信 jssdk 逻辑在 vue 中的运用

摘要：微信在中的简单使用以上是微信官方给出的示例代码，但是对于实际项目使用，还需要进一步对代码进行封装。微信 jssdk 在 vue 中的简单使用 import wx from weixin-js-sdk; wx.config({ debug: true, appId: , timestamp: , nonceStr: , signature: , jsApiLi...

anRui 2019-08-23 13:09 评论0 收藏0
IOS微信上Vue单页面应用JSSDK签名失败解决方案

摘要：路由守卫内触发更新签名获取真实有效微信签名此处需要自行处理在路由守卫内更新签名，保证是使用当前页面，是使用目标路由完整地址再加上域名使用签名调用在使用的页面通过取出缓存的微信签名，然后进行签名。背景手机型号：型号：iphone 7 / iphone xs max版本：ios 10.3.1 / ios 12.1微信版本：WeChat 6.7.3 问题还原： Vue应用(vue-ro...

lixiang 2019-08-23 13:12 评论0 收藏0
jssdk 在history模式下安卓不能调用图片上传接口和分享接口

摘要：配置先上配置每个页面都调用微信授权配置注是我在暴露的接口这份配置主要是根据微信公众号开发踩坑记录配置而来。首先说明，应用环境是使用的是vue+vue-router,history模式开发的单页应用。配置先上配置??? // index.js const protocol = location.protocol + // + location.host; router.afterE...

dkzwm 2019-08-22 15:37 评论0 收藏0
vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

lieeps 2019-08-30 15:55 评论0 收藏0
vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

jsdt 2019-08-02 14:00 评论0 收藏0