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

原创

已于 2022-03-30 16:06:34 修改 · 置顶 · 2.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue2.0 微信自定义分享

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

本文介绍了在vue-cli2.0项目中实现微信分享自定义样式的过程，强调了需要后端支持，并详细阐述了前端配置jsapi、创建公用方法、调用微信API的步骤，同时指出了在iOS上分享可能遇到的问题和解决方案，以及分享图片大小限制等关键点。

使用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.youkuaiyun.com/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',

                ],

最低0.47元/天解锁文章