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))
                    });
                }

      

  • 相关阅读:
    Docker容器监控(十)--技术流ken
    Docker跨主机通信(九)--技术流ken
    Docker多主机管理(八)--技术流ken
    Docker公共&本地镜像仓库(七)--技术流ken
    Docker镜像构建的两种方式(六)--技术流ken
    Docker网络(五)--技术流ken
    tomcat使用详解(week4_day2)--技术流ken
    haproxy使用演示--技术流ken
    xshell连接虚拟机详解--技术流ken
    grafana使用详解--技术流ken
  • 原文地址:https://www.cnblogs.com/WangXinPeng/p/10303544.html
Copyright © 2011-2022 走看看