• 实现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))
                    });
                }

      

  • 相关阅读:
    Mysql 重做日志及与二进制日志的区别
    【MySql】性能优化之分析命令
    ubuntu一些基本软件安装方法
    Linux学习笔记
    exp/imp三种模式——完全、用户、表
    Oracle学习日志20150302
    如何在macOS Sierra中运行CORE Keygen破解程序
    国内各大互联网公司技术站点集合
    React Native资料
    React Native集成到现有项目(非cocoa pods)
  • 原文地址:https://www.cnblogs.com/WangXinPeng/p/10303544.html
Copyright © 2020-2023  润新知