前段時(shí)間開發的(de)公衆号，有一個(gè)自定義分享功能，今天分享一下代碼和(hé / huò)開發中遇到(dào)的(de)問題，避免踩坑。

• 使用vue開發 版本2.6.11
• 微信JS-SDK版本1.4.0
• 接口請求使用axios
• 此文章隻是(shì)一個(gè)demo，可根據自己具體項目修改

npm install weixin-js-sdk --save
複制代碼

微信公衆号開發需登錄才能獲取appid，此文章隻有分享部分代碼，授權采用靜默授權，後台提供的(de)接口，我這(zhè)裏隻負責調用。

import wxSdk from 'weixin-js-sdk'  //h5分享用到(dào)
import {getSignPackage} from './api' // 分享接口後台提供，用于(yú)獲取appid，timestamp，nonceStr，signature
var Shares = {
  // h5分享功能
  shareCode: function (imgurl, title, desc, link, callback,) {
    var url = window.location.href
    let arr = {
      url: url
    }
    getSignPackage(arr).then((res) => {
      wxSdk.config({
        // debug: true, // 用來(lái)調試
        appId: res.data.appId, // 必填，公衆号的(de)唯一标識
        timestamp: res.data.timestamp, // 必填，生成簽名的(de)時(shí)間戳
        nonceStr: res.data.nonceStr, // 必填，生成簽名的(de)随機串
        signature: res.data.signature, // 必填，簽名
        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "onMenuShareAppMessage", "onMenuShareTimeline"] // 必填，需要(yào / yāo)使用的(de)JS接口列表，所有JS接口列表見附錄2
      });
      wxSdk.ready(function () {
        // 自定義“分享給朋友”及“分享到(dào)QQ”按鈕的(de)分享内容
        wxSdk.updateAppMessageShareData({
          title: title, // 分享标題
          desc: desc, // 分享描述
          link: link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的(de)公衆号JS安全域名一緻
          imgUrl: imgurl, // 分享圖标
          success: function (res) {
            console.log(res, 'success')
            // 用戶确認分享後執行的(de)回調函數
            if (callback) {
              callback('success');
            }
          },
          cancel: function () {
            // 用戶取消分享後執行的(de)回調函數
            console.log('erroe')
            if (callback) {
              callback('cancel');
            }
          }
        });
        // 自定義“分享到(dào)朋友圈”及“分享到(dào)QQ空間”按鈕的(de)分享内容
        wxSdk.updateTimelineShareData({
          title: title, // 分享标題
          desc: desc, // 分享描述
          link: link, // 分享鏈接
          imgUrl: imgurl, // 分享圖标
          success: function (res) {
            // 用戶确認分享後執行的(de)回調函數
            if (callback) {
              callback('success', res);
            }
          },
          cancel: function () {
            // 用戶取消分享後執行的(de)回調函數
            if (callback) {
              callback('cancel');
            }
          }
        });
      })
    })
  }
}
export {
  Shares
}
複制代碼

哪個(gè)頁面需要(yào / yāo)分享就(jiù)把這(zhè)個(gè)代碼放在(zài)哪個(gè)頁面，由于(yú)我這(zhè)個(gè)分享出(chū)去的(de)頁面不(bù)是(shì)當前頁面，所以(yǐ)還需要(yào / yāo)寫一個(gè)分享出(chū)去的(de)頁面 http://XXXX/share，部署到(dào)服務器上(shàng)就(jiù)可以(yǐ)了(le／liǎo)。 分享出(chū)去打開就(jiù)是(shì)這(zhè)個(gè)頁面了(le／liǎo) http://XXX/share
index.vue

//先導入上(shàng)面封裝的(de)分享方法
import { Shares } from '@/utils/share'
mounted() {
    let imgurl = 'http://XXX/logo.png'
    let title = '自定義分享'
    let desc = '自定義分享demo'
    let link = 'http://XXX/share?&userid=' + 1 // 自定義分享鏈接 ios分享鏈接不(bù)能帶端口号 否則分享失效，此鏈接應該爲(wéi / wèi)線上(shàng)鏈接，此處隻是(shì)一個(gè)demo,user_id是(shì)爲(wéi / wèi)了(le／liǎo)分享頁面能夠拿到(dào)數據所以(yǐ)我這(zhè)傳了(le／liǎo)個(gè)參數
    // console.log(imgurl, title, desc, link)
    Shares.shareCode(imgurl, title, desc, link, (status,data) => {
      if(status === 'success') {
        console.log('success')// 分享成功的(de)操作
      } else if(status === 'cancel') {
        console.log('error'// 分享失敗的(de)操作
      }
    })
}
複制代碼

• 1、遇到(dào)的(de)問題需要(yào / yāo)在(zài)微信公衆平台設置合法域名
• 2、vue路由記得設置爲(wéi / wèi) mode: 'history' 模式，後台nigix設置

location / {
  try_files $uri $uri/ /index.html;
}
複制代碼

• 3、ios自定義分享失效，配置的(de)域名一定不(bù)能帶端口号，分享出(chū)去的(de)頁面也(yě)不(bù)能帶端口，之(zhī)前因爲(wéi / wèi)帶端口号調試了(le／liǎo)很久才找到(dào)問題