公众号分享link 不能配置其他域名_微信分享功能实现过程

1. 需要参数

微信公众号的AppID和AppSecret，存在模型类中，name字段填wechat。

微信公众号后台管理需要

配置IP白名单

和

绑定安全域名

（一级域名），如果不配置IP白名单，会遇到40164的状态码并报错，安全域名如果不绑定也不会报错，但微信分享配置的icon等也会无效。

1. 代码复用性

后端-代码基本可以完全复用，wechat的app下的models.py、views.py、utils.py和路由配置

前端-代码基本可以复用，全局方法在main.js文件可完全复用，需要分享的地方（比如在大赛官网要分享文章详情页，就在文章详情页进行配置）需要按需配置（如：标题、图片（图片使用绝对路径）、概述）。

this

.utils.wechat.config({

url: location.href.split('#')[0],

title: res.data.title, //标题

desc: message, //描述

link: location.href,

imgUrl:

this

.image //图片

})

鉴于ios路径的差异需要加入以下代码：

beforeRouteEnter(to,

from

, next) {

if

(inIOS && to.path !== location.pathname) {

location.assign(to.fullPath)

}

else

{

next()

}

}

用上面这个代码还需进行用户代理配置如：大赛官网utils文件的ua.js里面

const

userAgent = global.navigator.userAgent

export const

inIOS = /iPhone|iPad|iPod/i.test(userAgent)

4.安装包

前端： weixin-js-sdk （绑定域名之后可用）

微信分享说明文档链接如下：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

如有错误欢迎指正

main.js

import

wx

from

'weixin-js-sdk'

import

{ inMicroMessenger, inWXWork }

from

'./utils/ua'

import

{ getWechatSignature }

from

'./api' //接口

Vue.prototype.utils = {

wechat: {

config: (data) => {

let

wechat = ''

if

(inMicroMessenger) {

wechat = 'wechat'

if

(inWXWork) {

wechat = 'wxwork'

}

}

getWechatSignature({

url: data.url,

wechat: wechat

})

.then(res => {

// let data = res.data

const

configData = {

debug:

false

,

appId: res.data.app_id,

nonceStr: res.data.noncestr,

timestamp: res.data.timestamp,

signature: res.data.signature,

jsApiList: [

'onMenuShareTimeline',

'onMenuShareAppMessage'

]

}

wx.config(configData)

// this.weChatReady(data)

wx.ready(() => {

// 分享到朋友圈

wx.onMenuShareTimeline({

title: data.title,

link: data.link,

imgUrl: data.imgUrl,

success: () => {},

cancel: () => {}

})

// 发送给朋友

wx.onMenuShareAppMessage({

title: data.title,

desc: data.desc,

link: data.link,

imgUrl: data.imgUrl,

success: () => {},

cancel: () => {}

})

})

wx.error(err => {

console.log(err)

})

})

.catch(err => {

console.log(err)

})

},

weChatReady: (data) => {

wx.ready(() => {

// 分享到朋友圈

wx.onMenuShareTimeline({

title: data.title,

link: data.link,

imgUrl: data.imgUrl,

success: () => {},

cancel: () => {}

})

// 发送给朋友

wx.onMenuShareAppMessage({

title: data.title,

desc: data.desc,

link: data.link,

imgUrl: data.imgUrl,

success: () => {},

cancel: () => {}

})

})

}

}

}