前段時間開發(fā)的公眾號，有一個自定義分享功能，今天分享一下代碼和開發(fā)中遇到的問題，避免踩坑。

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

npm install weixin-js-sdk --save
復(fù)制代碼

微信公眾號開發(fā)需登錄才能獲取appid，此文章只有分享部分代碼，授權(quán)采用靜默授權(quán)，后臺提供的接口，我這里只負責(zé)調(diào)用。

import wxSdk from 'weixin-js-sdk'  //h5分享用到
import {getSignPackage} from './api' // 分享接口后臺提供，用于獲取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, // 用來調(diào)試
        appId: res.data.appId, // 必填，公眾號的唯一標(biāo)識
        timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
        nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串
        signature: res.data.signature, // 必填，簽名
        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "onMenuShareAppMessage", "onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
      });
      wxSdk.ready(function () {
        // 自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容
        wxSdk.updateAppMessageShareData({
          title: title, // 分享標(biāo)題
          desc: desc, // 分享描述
          link: link, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
          imgUrl: imgurl, // 分享圖標(biāo)
          success: function (res) {
            console.log(res, 'success')
            // 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
            if (callback) {
              callback('success');
            }
          },
          cancel: function () {
            // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
            console.log('erroe')
            if (callback) {
              callback('cancel');
            }
          }
        });
        // 自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內(nèi)容
        wxSdk.updateTimelineShareData({
          title: title, // 分享標(biāo)題
          desc: desc, // 分享描述
          link: link, // 分享鏈接
          imgUrl: imgurl, // 分享圖標(biāo)
          success: function (res) {
            // 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
            if (callback) {
              callback('success', res);
            }
          },
          cancel: function () {
            // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
            if (callback) {
              callback('cancel');
            }
          }
        });
      })
    })
  }
}
export {
  Shares
}
復(fù)制代碼

哪個頁面需要分享就把這個代碼放在哪個頁面，由于我這個分享出去的頁面不是當(dāng)前頁面，所以還需要寫一個分享出去的頁面 http://XXXX/share，部署到服務(wù)器上就可以了。 分享出去打開就是這個頁面了 http://XXX/share
index.vue

//先導(dǎo)入上面封裝的分享方法
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分享鏈接不能帶端口號 否則分享失效，此鏈接應(yīng)該為線上鏈接，此處只是一個demo,user_id是為了分享頁面能夠拿到數(shù)據(jù)所以我這傳了個參數(shù)
    // console.log(imgurl, title, desc, link)
    Shares.shareCode(imgurl, title, desc, link, (status,data) => {
      if(status === 'success') {
        console.log('success')// 分享成功的操作
      } else if(status === 'cancel') {
        console.log('error'// 分享失敗的操作
      }
    })
}
復(fù)制代碼

• 1、遇到的問題需要在微信公眾平臺設(shè)置合法域名
• 2、vue路由記得設(shè)置為 mode: 'history' 模式，后臺nigix設(shè)置

location / {
  try_files $uri $uri/ /index.html;
}
復(fù)制代碼

• 3、ios自定義分享失效，配置的域名一定不能帶端口號，分享出去的頁面也不能帶端口，之前因為帶端口號調(diào)試了很久才找到問題