公司業(yè)務(wù)需求 活動(dòng)頁(yè)要做分享, 流程是
app ---分享到微信/QQ ---在微信瀏覽器打開(kāi)之后, 再次發(fā)送給朋友或者朋友圈
我要做的是 2次分享
踩了2天坑, 記錄一下
上圖 第一個(gè)是沒(méi)有做2次分享配置 做出來(lái)的分享展示
第二圖是做了2次分享配置之后的分享展示
網(wǎng)上查了好多文檔, 都是對(duì)微信官方文檔的敘述, 還有就是不嚴(yán)格縝密的, 有的表述不清楚
接下來(lái), 我來(lái)從第一部開(kāi)始排雷
1, 首先先在微信公眾號(hào)里面配置
2. 去公眾號(hào)設(shè)置
3.去查看接口權(quán)限, 查看有沒(méi)有獲得 分享權(quán)限
4, 接下來(lái)就是js 的配置部分了,
a) 引入 wx 我使用的 npm install 的方法, 網(wǎng)上可查指令 , 然后引入 import wx from 'weixin-js-sdk'
b)
這是一個(gè)vue 的單頁(yè)面, 我再methods 里面寫了一個(gè)init()方法, 然后再created 或者mounted 里面調(diào)用就可以
著重看一下這個(gè)init()方法, 通過(guò)后端提供的
getWXConfigSignature接口, 去獲取想要的
appid 等字段然后就在config 的下面, 直接寫wx.ready() 方法, 里面寫1.4.0 的微信提供的新的分享方法.到這, 其實(shí)js 已經(jīng)寫完了, 接下來(lái)就是測(cè)試了.
5, 測(cè)試
下載了才發(fā)現(xiàn)也是有很多坑, 不如用真機(jī)測(cè)試.
到第四步的時(shí)候, 準(zhǔn)備工作和代碼其實(shí)已經(jīng)寫完了, 接下來(lái)就是部署了
6, 部署
a) 部署的鏈接 一定是跟公眾號(hào)配置的那個(gè)鏈接是一樣的
由于我們公司 預(yù)發(fā)布環(huán)境, 測(cè)試環(huán)境都是沒(méi)有經(jīng)過(guò)icp 認(rèn)證, 所以, 這個(gè)分享功能只能在正式環(huán)境測(cè)試, 因?yàn)槲⑿乓? 你輸入的js 域名, 都是經(jīng)過(guò)icp 認(rèn)證的才可以
7, 備注
搞了2天, 從一開(kāi)始的小白, 到實(shí)現(xiàn)效果. 用了2天時(shí)間, 代碼其實(shí)并不難, 難的是理解微信的分享流程, 前期的配置, 我們公司一開(kāi)始就是沒(méi)有做這個(gè)配置, appid 也是很關(guān)鍵的, 看過(guò)一個(gè)分享說(shuō)是因?yàn)閍ppid 不對(duì), 導(dǎo)致一直url domain的
如果還有什么問(wèn)題, 歡迎大家一起來(lái)提問(wèn) , 討論
備注一個(gè)問(wèn)題: 異步請(qǐng)求的接口返回的數(shù)據(jù), 如果下一個(gè)接口要使用, 有可能是拿不到的, 所以就放在async 或者, 直接在獲取 數(shù)據(jù)的接口里面, 去調(diào)用下一個(gè)接口.
代碼示例:
getCardMsg() {
const obj = {}
obj.userNo = localStorage.getItem('userNo') || this.obj.userNo
assembleCardInfo(this.local.creditNo, obj).then(res => {
if (res.code == 1) {
this.Query = res.resultObj
this.init() // 在返回?cái)?shù)據(jù)里面 調(diào)用下面的init()方法
}
})
},
init() {
const obj = {
title: '用卡王-愛(ài)拼才會(huì)贏', // 分享標(biāo)題
desc: '拼團(tuán)辦理' + this.Query.creditName + '，領(lǐng)現(xiàn)金紅包嗡综。', // 分享描述
link: window.location.href, // 分享鏈接乙帮，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: 'https://ftp.runzezhihui.com/cycleImage/2019-05-29/i186172451792875520/i186172451792875520.png'
}
this.getWxShare(obj)
this.$uweb.trackEvent(this.Query.creditName, '查看頁(yè)面') // 友盟的埋點(diǎn)插件
},
8, 問(wèn)題
最近做分享 又碰到一個(gè)一個(gè)問(wèn)題
就是配置分享鏈接
let obj = {
title: '12345678',
desc:'234567890-',
link: window.location.href,
// link: 'http://h5.shensx.com/customer/home',
imgUrl: 'https://www.yuebaoib.com:8072/includeindex/img/1.1f39a981.jpeg',
};
如果分享出去的是本鏈接還可以, 直接寫 window.location.href 就可以了
但是如果分享出去的鏈接是 外部或者 甲方提供的鏈接就得思考一下了
設(shè)置, 并且下載文件 放在 根目錄下
再次分享的時(shí)候, 就可以分享外部的 三方鏈接了
打開(kāi)分享, 就是 打開(kāi)了 3方鏈接
