vue項目做微信分享總結

在做微信分享，也是遇到了許多的坑，記錄一下流程，以后做到可以直接用。

安裝sdk

npm install weixin-js-sdk --save

整體步驟

1.我是新建了一個js文件wxapi.js。

2.在wxapi.js中引入sdk以及配置一些基本信息（相關的配置內容是后台返的）

3.在需要做分享的頁面引入wxapi.js，調用里面的方法

大概代碼如下：

wxapi.js中：

/**
 * 微信js-sdk
 * 參考文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 */
import wx from 'weixin-js-sdk'
import Axios from 'axios'
const wxApi = {
    /**
     * [wxRegister 微信Api初始化]
     * @param  {Function} callback [ready回調函數]
     */
    wxRegister(data,option) { //data是微信配置信息，option是分享的配置內容
        wx.config({
            debug: false, // 開啟調試模式
            appId: data.appId, // 必填，公眾號的唯一標識
            timestamp: data.timestamp, // 必填，生成簽名的時間戳
            nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
            signature: data.signature, // 必填，簽名，見附錄1
            jsApiList: [
                'checkJsApi',
                'updateTimelineShareData',
                'updateAppMessageShareData',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
        })
        wx.ready(function(){
            wx.updateTimelineShareData({
                title: option.title, // 分享標題
                link: option.link, // 分享鏈接
                imgUrl: option.imgUrl, // 分享圖標
                desc: option.desc, // 分享描述
                success() {
                    // 用戶成功分享后執行的回調函數
                    option.success()
                },
                cancel() {
                    // 用戶取消分享后執行的回調函數
                    option.error()
                }
            });
            wx.updateAppMessageShareData({
                title: option.title, // 分享標題
                desc: option.desc, // 分享描述
                link: option.link, // 分享鏈接
                imgUrl: option.imgUrl, // 分享圖標
                success() {
                    // 用戶成功分享后執行的回調函數
                    option.success()
                },
                cancel() {
                    // 用戶取消分享后執行的回調函數
                    option.error()
                }
            })
        })
    }
}
export default wxApi

需要分享的頁面，如：index.vue

1.引入wxapi.js

import wxapi from '@/assets/js/wxapi.js';

2.頁面請求完接口之后，獲取配置信息，調用wxapi.js中的方法（可以寫在created中，也可以寫在初始化調用的犯法里面，具體根據實際項目而定）

wxapi.wxRegister(data,option);//data是微信配置信息，option是分享要配置的內容

 

上面的步驟就已經完成了，但是還是有一些坑，分享出去圖片跟說明老是沒有，后來開啟了調試模式，微信返回信息是簽名錯了。所以這里就要注意了，我們是vue做的項目，而且路由還是用的hash，所以url上面包含"#"，這個時候后端返回的信息，簽名一直都是錯的。解決方案有兩個：

1：router.js中路由配置換成history模式

當然，這種方式需要后台配合，具體怎么配合可以看一下https://www.cnblogs.com/chao202426/p/11168019.html這個里面的。

2：url去掉’#’hash部分，可用location.href.split('#')[0]

 

踩完坑之后自己做一下總結：

1、一開始說要以這種點擊的方式觸發分享，其實目前是實現不了的

2、瀏覽器中的分享，其實用的是瀏覽器自帶的，這個分享他就沒辦法按照你的配置來，試了一下之后發現，瀏覽器中自帶的分享：

　　標題會取你頁面的title

　　圖片會取你頁面的img，沒有的話就是去頁面截圖

　　地址會取你當前頁面的url