安裝weixin-js-sdk

npm i weixin-jk-sdk

全局注入

在main.js中引入

import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx

最近花了500塊錢 搞了個配置較高 阿里服務器 來學習 node 及對應的框架，現(xiàn)在：,阿里云雙11活動 1核2G1M，69元/1年，180元/3年

注冊sdk

詳情請移步 微信官方sdk文檔

下面代碼是我的一個微信sdk注冊

methods: {
    /**
     * 注冊微信sdk
     */
    onRegisterWeixinSdk() {
        // 因為$wx剛剛已經(jīng)在全局注測了，所以在這里我們是可以直接this去調(diào)用的，sdk所需要的參數(shù)可以在獲取sdk參數(shù)的接口里面去調(diào)用
        this.$wx.config({
            debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
            appId, // 必填，公眾號的唯一標識
            timestamp, // 必填，生成簽名的時間戳
            nonceStr, // 必填，生成簽名的隨機串
            signature,// 必填，簽名
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
        })
    },
    /**
     * 設置微信分享參數(shù)
     */
    onRegisterWeixinShare() {
        this.$wx.ready(() => {
            // 分享給朋友
            this.$wx.updateAppMessageShareData({
                title, // 分享標題
                desc, // 分享描述
                link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                imgUrl, // 分享圖標
                success () {
                    // 設置成功
                }
            })
            // 分享到朋友圈
            this.$wx.updateTimelineShareData({
                title, // 分享標題
                desc, // 分享描述
                link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                imgUrl, // 分享圖標
                success () {
                    // 設置成功
                }
            })
        })
    },
}

修改hosts文件

不知道hosts文件目錄的童鞋請自行百度

# 在hosts文件里增加這一行代碼，將本地127.0.0.1指向線上域名，這個域名一定要是微信公眾號里面的js安全域名（這里以我自己得域名舉例）
127.0.0.1 ydhtml.com

這里默認我設置vue服務是 8888 端口

設置host完成之后這個時候，我們本地就可以 輸入 ydhtml.com:8888 訪問我們本地的項目了

設置nginx反向代理

nginx安裝不懂得童鞋請自行下載安裝噢

ps：一般我們的vue項目端口是8080，也可能是 8787 8888，這個時候我們就需要使用nginx進行反向代理，如果我們不設置代理的話，我們訪問這個域名 ydhtml.com:8888 就跟我們的js安全域名不一致了，還不美觀，所以我們就需要用到反向代理，去將 ydhtml.com:8888 映射成 ydhtml.com

配置nginx文件

在nginx的根目錄下，然后進入 conf 文件夾，然后創(chuàng)建一個文件夾 servers，再新建一個文件這個文件名要跟你設置hosts name 一致，這里我的文件名是 ydhtml.com，然后打開文件，將以下內(nèi)容復制進去

記得將端口和域名修改成你自己的，然后保存

upstream ydhtml.com {
    server 127.0.0.1:8888;
}

server
{
   listen 80 ;
        
   server_name ydhtml.com localhost;
    
   index index.html index.htm;
   # root /home/workspace/ft-portal-admin/release-current/;
    
   location / {
      proxy_pass http://ydhtml.com;
      add_header 'Access-Control-Allow-Origin' '*'; 
      add_header 'Access-Control-Allow-Credentials' 'true'; 
   }

}

最后重啟nginx

下載微信開發(fā)者工具

選擇 公眾號網(wǎng)頁調(diào)試，再輸入域名 ydhtml.com 這個時候只要nginx重啟成功就可以不需要帶端口號了，最后就可以在控制臺里面愉快的調(diào)試啦

小提示

• 安卓貌似不支持最新的微信sdk版本（1.6.0）
• 安卓在微信中默認會帶有 from=groupmessage or from=singlemessage 參數(shù)

這里針對帶有參數(shù)的情況下，如何去解決這個問題，代碼如下

/**
 * 清除微信分享自帶的參數(shù)
 * @param { String } link
 */
function clearWxLinkParams(link) {
    if (link.includes('from=') || link.includes('isappinstalled=')) {
        const newLink = link.replace(/&from=((.+?)*)/g, '')
        location.replace(newLink)
    }
}

clearWxLinkParams(location.href)