使用vue-cli（vue2.0）项目做微信分享自定义样式的请进（都是踩过的坑啊）

置顶韩南北

已于 2022-03-30 16:06:34 修改

阅读量2.7k

点赞数 7

分类专栏：一梦-一念文章标签： vue2.0 微信自定义分享

于 2019-02-18 17:46:05 首次发布

本文链接：https://blog.csdn.net/HDhanmingyang/article/details/87633285

版权

一梦-一念专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用vue-cli（vue2.0）项目做微信分享自定义样式的请进（都是踩过的坑啊）

微信自定义分享在客户端（iOS和Android）时用不用后端都行，因为他们可以借助友盟（https://udplus.umeng.com/?spm=a211g2.195839.0.0.6213218930RmEL）登录就可以用了。
进入正题：网页端完成自定义样式需要哪些操作呢？
前端语言 vue
后端 node
必须要有后端支持，前端自己没办法完成微信自定义分享QAQ
前端部分
准备，先看下官方文档（https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842）
这个是必须看的，当然他不能帮住你填坑（ps：我能帮你）但是你要遵循他的规则，微信官方api一直在更新，如果你的分享突然失效了，那么就说明一些方法已经更新了，你要同步他！
第一步，引入js
在这里插入图片描述
目前我使用的就是最新版本！
代码

第二步，在src下的assets/js文件夹下新建wx.jsapi.js文件，把分享做成公用方法（这句话是抄来的QAQ）
使用axios来发送请求，参照https://blog.csdn.net/web_xyk/article/details/79933024配置vue-cli项目的axios（这句话也是QAQ）
在这里插入图片描述
图片路径不要搞错！
代码

// import axios from 'axios'

import { getWXConfig } from "../../api/api";

export default {

    wxShowMenu: function(title,img) {

        let pageurl = encodeURIComponent(window.location.href)

        // console.log(window.location.href);

        getWXConfig(pageurl).then(function(res) {
            
            var getMsg = res.data;

            wx.config({
 
                debug: false, //生产环境需要关闭debug模式
 
                appId: getMsg.appId, //appId通过微信服务号后台查看
 
                timestamp: getMsg.timestamp, //生成签名的时间戳
 
                nonceStr: getMsg.nonceStr, //生成签名的随机字符串
 
                signature: getMsg.signature, //签名
 
                jsApiList: [ //需要调用的JS接口列表
 
                    'updateAppMessageShareData', //分享给好友
 
                    'updateTimelineShareData', //分享到朋友圈
                    
                    'onMenuShareTimeline',

                    'onMenuShareAppMessage',

                ],
            
            });
            wx.ready(function() {
 
                wx.checkJsApi({
 
                    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline',

                    'onMenuShareAppMessage',], //分享到朋友圈,
 
                    success: function(res) {

                    }
 
                });
 
                //分享到朋友圈
 
                wx.updateTimelineShareData({
 
                    title: title, // 分享标题
 
                    desc: "我在真知灼见跟随大咖学金融，赶紧一起加入吧！", //分享描述
 
                    link: location.href.split('#')[0], // 分享链接
 
                    imgUrl: img // 分享图标
 
                });
 
 
 
                //分享给朋友
 
                wx.updateAppMessageShareData({
 
                    title: title, // 分享标题
 
                    desc: "我在真知灼见跟随大咖学金融，赶紧一起加入吧！", //分享描述
 
                    link: location.href.split('#')[0], // 分享链接
 
                    imgUrl: img // 分享图标
 
                });
 
            });
 
        })
 
    }
 
}

神坑之一
在这里插入图片描述
微信朋友圈里都需要写这四个方法，这很重要！少些一个就会一直报错，打开debug模式会一直弹出方法名：false
上面两个方法
‘updateAppMessageShareData’, //分享给好友
‘updateTimelineShareData’, //分享到朋友圈
你一定觉得我用这两个方法为什么写四个，官方也没让写后两个啊
我告诉你，那是因为官方api给了最新方法，而适配的是旧的方法，就是下面这两个QAQ（苦了这俩哥们了）
’ onMenuShareTimeline’,
‘onMenuShareAppMessage’,
然后里面有个getWXConfig这个方法，这个是自定义的
在这里插入图片描述
这个要改成后端给你的接口（就是正常请求，写错了我不背锅）
其中所有参数都让后端返回（ojbk！）
第三部调用，
在main.js里定义全局方法（为了调用方便，不这么写也行，vue很灵活的）


// 微信分享
import WXConfig from './assets/js/wx.jsapi' // 微信分享
Vue.prototype.WXConfig = WXConfig;

在使用页面调用！

this.WXConfig.wxShowMenu("这里写后端不给你返回的字段1","这里写后端不给你返回的字段2");

前端完成！！！！
后端
（我尽量详细写，但是后端和前端不在一个项目，后端是node项目，然后我就不截图了，就发相关代码，机密QAQ）
//微信内分享获取签名
这是在项目的router.js里
这段是路径位置，你们改成自己的路径

  router.get('/api/v2/getSignature',controller.api.v2.wxShare.getSign);

这个是方法代码（后端记住，不会请求的代码一定要看文档，微信很变态，）

'use strict';

const Controller = require('../base');
const gzhConfig = require('../../../common/wxGzhConfig');
const crypto = require('crypto');

class WxShareController extends Controller {
    constructor(ctx) {
        super(ctx)
    }
    //返回微信分享需要的签名和其他参数
    async getSign() {
        //当前分享的页面url
        let cururl = this.ctx.query.url;
        let appid = gzhConfig.appid;
        let appsecret = gzhConfig.appsecret;
        //获取服务器保存的token
        const localinfo = await this.ctx.service.v2.wxSignature.find(1);//id=1 保存access_token的id
        let localtoken = localinfo.access_token;//本地token
        let localticket = localinfo.jsapi_ticket;//本地ticket
        let lastdatetime = localinfo.update_time;//上次更新时间
        let nowtime = new Date().getTime();//现在时间
        //判断时间差是否在2小时内
        let temptime = Number(nowtime) - Number(lastdatetime);
        let temp2time = Number(temptime) - 7200000;
        //如果票据有效 继续使用
        if (localticket != null && localticket != '' && temp2time < 0) {

            //生成随机字符串
            let noncestr = this.randomString2(16);
            //时间戳（单位 秒）
            let timestamp = new Date().getTime().toString().substr(0, 10);
            //拼接生成签名前的字符串string1
            let string1 = "jsapi_ticket=" + localticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + cururl + "";

            //对string1进行sha1签名
            let sha1 = crypto.createHash('sha1');//sha1算法
            sha1.update(string1);
            let sign = sha1.digest('hex');  //加密后的值d
            let signature = sign;//最后得到的签名

            let result = {
                appId: appid,
                timestamp: timestamp,
                nonceStr: noncestr,
                signature: signature,
                jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
            }
            this.success(result);
            return;
        }
        //票据无效 重新生成票据
        else {
            //获取access_token
            const res1 = await this.ctx.curl('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&', {
                method: 'GET',
                data: {
                    appid: appid,
                    secret: appsecret
                },
                dataType: 'json',
                timeout: 3000
            });
            if (res1.status == 200) {
                //返回的accesstoken
                let accesstoken = res1.data.access_token;

                //根据accesstoken获取jsapi_ticket
                const res2 = await this.ctx.curl('https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi', {
                    method: 'GET',
                    data: {
                        access_token: accesstoken

                    },
                    dataType: 'json',
                    timeout: 3000
                });
                //返回ticket接口不为空
                if (res2.status == 200) {
                    let jsapiticket = res2.data.ticket;
                    //保存到数据库
                    let postdata = {
                        id: 1,
                        access_token: accesstoken,
                        jsapi_ticket: jsapiticket,
                        create_time: new Date().getTime(),
                        update_time: new Date().getTime()
                    }
                    const savetoken = await this.ctx.service.v2.wxSignature.update(postdata);
                    //生成随机字符串
                    let noncestr = this.randomString2(16);
                    //时间戳（单位 秒）
                    let timestamp = new Date().getTime().toString().substr(0, 10);
                    //拼接生成签名前的字符串string1
                    let string1 = "jsapi_ticket=" + jsapiticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + cururl + "";

                    //对string1进行sha1签名
                    let sha1 = crypto.createHash('sha1');//sha1算法
                    sha1.update(string1);
                    let sign = sha1.digest('hex');  //加密后的值d
                    let signature = sign;//最后得到的签名

                    let result = {
                        appId: appid,
                        timestamp: timestamp,
                        nonceStr: noncestr,
                        signature: signature,
                        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
                    }
                    this.success(result);
                    return;
                }
                else {
                    this.fail('jsapi_ticket获取错误');
                    return;
                }
            }
            else {
                this.fail('access_token获取错误');
                return;
            }
        }
    }
}

module.exports = WxShareController;

会后端的小伙伴们知道怎么请求了吧，文件的位置啊，什么的都自己按照项目对其就OK！

还有一个在ios上分享失败的坑，一定按照我引入的代码引入
下面是注意事项
第一，我使用的是HTTPS 所以我引入的是HTTPS，不是的就去掉s，看上面↑
第二，图片链接要后端返回，大小是32kb以内（微信规定的），链接地址如果项目是HTTPS则所需要的所有图片都要HTTPS并且通过微信的认证，（你的域名也必须通过微信认证，看开始微信api链接）
第三，在这里插入图片描述
不要用这种方法！记住，用这种引入的方法写的项目坑有一万个，放心，我用两天时间没踩完，换这个方法就用半天！！！

解决你的问题请给个赞或者留言支持，谢谢！

韩南北

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
使用vue-cli（vue2.0）项目做微信分享自定义样式的请进（都是踩过的坑啊）

使用vue-cli（vue2.0）项目做微信分享自定义样式的请进（都是踩过的坑啊）微信自定义分享在客户端（iOS和Android）时用不用后端都行，因为他们可以借助友盟（https://udplus.umeng.com/?spm=a211g2.195839.0.0.6213218930RmEL）登录就可以用了。进入正题：网页端完成自定义样式需要哪些操作呢？前端语言 vue后端 node必...
复制链接

扫一扫