zoukankan      html  css  js  c++  java
  • 实现h5公众号分享功能(vue项目也适用)

    在vue项目中我们先npm install weixin-js-sdk --save下载下来在main.js文件中引入
    import wx from 'weixin-js-sdk';//引入
    Vue.prototype.wx = wx//
    jq项目中我们需要引入这个js-sdk(在需要调用js接口的页面引入js文件 http://res.wx.qq.com/open/js/jweixin-1.2.0.js,如果你的服务器是https请求的话请引入 https://res.wx.qq.com/open/js/jweixin-1.2.0.js

    //  分享 调用sdk
                // 微信分参数
                getConfig() {
                    this.showFx = true
                    var _this=this;
                    // let url = location.href.split('#')[0] //获取锚点之前的链接
                    let url = encodeURIComponent(window.location.href.split('#')[0]) //获取锚点之前的链接
                    console.log(url)
                     //let url = 'http://xiaofeng.ckugua.com/index.html' //获取锚点之前的链接
                    // console.log(url)
                    _this.$Ajax.post('webchat/config?url='+url).then(response => {
                        // console.log(response)
                        let res = JSON.parse(response.data.data);
                        console.log(res)
                        _this.wxInit(res);
                    })
                },
                // 微信分享
                wxInit(res) {
                    var _this=this;
                    let url = window.location.href.split('?')[0] //获取锚点之前的链接 
                    console.log(url)
                    // let links = url+'#/Food/' + this.$route.params.id;
                    let links = url+'#/product/productDetails?pid='+_this.$route.query.pid;
                    console.log(links)
                    let title = '晓峰科技';
                    let desc = '了解更多,请关注“晓峰科技”公众号';
                    let imgUrl = 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM4soO2NoID1uZPHibOVgkJoPoaelibibF3GagvW2o43wRASA/0';
                    _this.wx.config({
                        debug: false,
                        appId: res.appId,
                        timestamp: res.timestamp,
                        nonceStr: res.nonceStr,
                        signature: res.signature,
                        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
                    });
                    _this.wx.ready(function() {
                        _this.wx.onMenuShareAppMessage({
                            title: title, // 分享标题
                            desc: desc, // 分享描述
                            link: links, // 分享链接
                            imgUrl: imgUrl, // 分享图标
                            success: function() {
                                alert('分享成功')
                                _this.showFx =false;
                            },
                            cancel: function() {
                                alert('分享失败')
                                _this.showFx =false;
                            }
                        });
                        //微信分享菜单测试
                        _this.wx.onMenuShareTimeline({
                            title: title, // 分享标题
                            desc: desc, // 分享描述
                            link: links, // 分享链接
                            imgUrl: imgUrl, // 分享图标
                            success: function() {
                                alert('分享成功')
                                _this.isShow =true;
                            },
                            cancel: function() {
                                alert('分享失败')
                                _this.isShow =true;
                            }
                        })
                    });
                    _this.wx.error(function(err) {
                        alert(JSON.stringify(err))
                    });
                }

      

  • 相关阅读:
    工欲善其事,必先利其器
    年度总结
    人脸解锁从底层到上层(一)
    Hexo NexT 主题添加评论和文章阅读量
    摄影历程-第一章
    西藏之旅
    软件测试和评估
    WordCount优化
    WordCount编码与测试
    值得深入思考的五个问题
  • 原文地址:https://www.cnblogs.com/WangXinPeng/p/10303544.html
Copyright © 2011-2022 走看看