国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue + 微信二次分享/自定義分享

diabloneo / 3566人閱讀

摘要:但是在本次開發(fā)中,我只使用了,,個(gè)別微信版本分享出來的還是沒有圖片和文案,的是沒有問題,所以又加上了棄用的,之后,安卓機(jī)也可以正常分享。

微信二次分享/自定義分享

從App中使用App分享(一次分享)

使用微信導(dǎo)航欄的分享(二次分享) --已做處理

使用微信導(dǎo)航欄的分享(二次分享) --未做處理

如上圖,如果不做相關(guān)處理,頁面進(jìn)行二次分享,用戶看到的就是鏈接+空?qǐng)D,上面顯示的文案(考拉閱讀)實(shí)際上是獲取的title標(biāo)簽中的文案,我在網(wǎng)上查的相關(guān)例子有說明,圖片如果不設(shè)置,將會(huì)自動(dòng)獲取瀏覽器渲染的第一張圖片,經(jīng)過個(gè)人測(cè)試,并沒有實(shí)現(xiàn)(朋友圈同理,不做圖片展示)。

微信js-sdk說明文檔

先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。(一般后端配置)

前端需要調(diào)取后端的接口,獲取微信的congfig所需要的參數(shù)

wx.config({
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會(huì)通過log打出,僅在pc端時(shí)才會(huì)打印。
    appId: "", // 必填,公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: , // 必填,生成簽名的時(shí)間戳
    nonceStr: "", // 必填,生成簽名的隨機(jī)串
    signature: "",// 必填,簽名
    jsApiList: [] // 必填,需要使用的JS接口列表
});

jsApiList里面需要填寫你調(diào)用的jsApi,updateAppMessageShareData(分享微信,QQ),updateTimelineShareData(微信朋友圈,QQ空間),onMenuShareTimeline/onMenuShareAppMessage/onMenuShareQQ 這三個(gè)即將廢棄,不建議使用。
??但是在本次開發(fā)中,我只使用了updateAppMessageShareData,updateTimelineShareData,個(gè)別Android(微信版本7.0.3)分享出來的還是沒有圖片和文案,ios的是沒有問題,所以又加上了棄用的onMenuShareTimeline,onMenuShareAppMessage之后,安卓機(jī)也可以正常分享。

判斷當(dāng)前客戶端版本是否支持指定JS接口

wx.checkJsApi({
    jsApiList: ["chooseImage"], // 需要檢測(cè)的JS接口列表,所有JS接口列表見附錄2,
    success: function(res) {
    // 以鍵值對(duì)的形式返回,可用的api值true,不可用為false
    // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

wx.config中的 debug 設(shè)為true,在微信測(cè)試時(shí)會(huì)自動(dòng)彈出相關(guān)信息,在微信開發(fā)者工具中也會(huì)打印出流程(分為begin,end),如下圖

通過ready接口處理成功驗(yàn)證

在ready接口中調(diào)取updateAppMessageShareData,updateTimelineShareData方法

wx.ready(function () {   //需在用戶可能點(diǎn)擊分享按鈕前就先調(diào)用
    wx.updateAppMessageShareData({ 
        title: "", // 分享標(biāo)題
        desc: "", // 分享描述
        link: "", // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
        imgUrl: "", // 分享圖標(biāo)
        success: function () {
          // 設(shè)置成功
        }
    })
});
在vue的開發(fā)項(xiàng)目中,可在created或mounted生命周期中調(diào)用

通過error接口處理失敗驗(yàn)證

wx.error(function(res){
    // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù),如簽名過期導(dǎo)致驗(yàn)證失敗,具體錯(cuò)誤信息可以打開config的debug模式查看,也可以在返回的res參數(shù)中查看,對(duì)于SPA可以在這里更新簽名。
});

??需要注意的點(diǎn)

通過后端的接口獲取微信配置的參數(shù)時(shí),需要傳遞當(dāng)前頁面url

-  url(當(dāng)前網(wǎng)頁的URL,不包含#及其后面部分),如果沒有#,則需要傳遞完整的url
-  url需要編碼    encodeURIComponent(url)

代碼如下

//  wetchat.js  -- 個(gè)人封裝
import wx from "weixin-js-sdk";  // 引入wxJS
import apiUrl from "@/api/index";  // 本項(xiàng)目的api (根據(jù)自己項(xiàng)目)
export function wxChatShare(param) {
    let _url = encodeURIComponent(param.url)  // 當(dāng)前頁面的url
    apiUrl.wechatConfig(_url)  // wechatConfig是獲取微信配置相關(guān)信息的接口,此處根據(jù)個(gè)人項(xiàng)目寫法而定,類似于this.$ajax
    .then (res => {
        if(res.data.code==200) {
        // 接口返回配置信息
            wx.config({
                debug: false,
                appId: res.data.content.appid,
                timestamp: res.data.content.timestamp, // 必填,生成簽名的時(shí)間戳
                nonceStr: res.data.content.nonceStr, // 必填,生成簽名的隨機(jī)串
                signature: res.data.content.signature, // 必填,簽名
                jsApiList: [  // 用的方法都要加進(jìn)來
                    "updateAppMessageShareData", "updateTimelineShareData", "onMenuShareTimeline", "onMenuShareAppMessage"
                ]
            });
            wx.ready(function () {
                //分享到朋友圈

                wx.updateTimelineShareData({ 
                    title: param.title, // 分享標(biāo)題
                    link: param.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                    imgUrl: param.imgUrl, // 分享圖標(biāo)
                    success: function () {
                      // 設(shè)置成功
                        console.log("分享到朋友圈成功返回的信息為:", res);
                        this.$Message.message("設(shè)置成功!");
                    }
                })

                wx.onMenuShareTimeline({
                    title: param.title, // 分享標(biāo)題
                    link: param.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                    imgUrl: param.imgUrl, // 分享圖標(biāo)
                    success: function () {
                    // 用戶點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
                    },
                })

                //分享給朋友

                wx.updateAppMessageShareData({ 
                    title: param.title, // 分享標(biāo)題
                    desc: param.desc, // 分享描述
                    link: param.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                    imgUrl: param.imgUrl, // 分享圖標(biāo)
                    success: function () {
                      // 設(shè)置成功
                        console.log("分享到朋友圈成功返回的信息為:", res);
                        this.$Message.message("設(shè)置成功!");
                    }
                })
                wx.onMenuShareAppMessage({
                    title: param.title, // 分享標(biāo)題
                    desc: param.desc, // 分享描述
                    link: param.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                    imgUrl: param.imgUrl, // 分享圖標(biāo)
                    type: param.type, // 分享類型,music、video或link,不填默認(rèn)為link
                    dataUrl: param.dataUrl, // 如果type是music或video,則要提供數(shù)據(jù)鏈接,默認(rèn)為空
                    success: function () {
                    // 用戶點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
                    }
                });
            });
            wx.error(function (res) {
                console.log("驗(yàn)證失敗返回的信息:", res);
            });
        } else {
            console.log(res.data.message);
        }
    })
  }
// home.vue

  import * as wechatJS from "@/utils/wechat"  // 引入wechat.js

//  寫在方法中調(diào)用,或者在生命周期中調(diào)用
let _param = {
    studentId: 1, // 個(gè)人項(xiàng)目而定
    activityId: 1, // 個(gè)人項(xiàng)目而定
    url: window.location.href, // 當(dāng)前頁面url
    title: "為我點(diǎn)贊,一起免費(fèi)搶考拉閱讀VIP會(huì)員卡,暢讀一萬本好書~",  // 分享數(shù)據(jù)配置
    desc: "孩子要讀書,上考拉閱讀", // 分享數(shù)據(jù)配置
    link: _nowUrl, // 分享數(shù)據(jù)配置
    imgUrl: url, // 分享數(shù)據(jù)配置  -- 全路徑
    type: "link", // 分享類型,music、video或link,不填默認(rèn)為link
    dataUrl: " ", // 如果type是music或video,則要提供數(shù)據(jù)鏈接,默認(rèn)為空
}

已上
有什么不清楚的,或者需要糾正的,歡迎留言~

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/102725.html

相關(guān)文章

  • vue微信二次分享定義分享

    摘要:但是在本次開發(fā)中,我只使用了,,個(gè)別微信版本分享出來的還是沒有圖片和文案,的是沒有問題,所以又加上了棄用的,之后,安卓機(jī)也可以正常分享。 微信二次分享/自定義分享 從App中使用App分享(一次分享) showImg(https://segmentfault.com/img/bVbp83T?w=593&h=278); 使用微信導(dǎo)航欄的分享(二次分享) --已做處理 showImg(...

    Donald 評(píng)論0 收藏0
  • 微信二次分享

    摘要:接下來通過詳細(xì)的步驟介紹如何接入微信二次分享操作。不要嘗試在中使用異步請(qǐng)求修改本次分享的內(nèi)容,因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作,這時(shí)候使用的回包會(huì)還沒有返回用戶點(diǎn)擊分享到朋友圈已分享已取消此時(shí)微信二次分享就已經(jīng)大功告成了。 微信二次分享 效果演示 showImg(https://segmentfault.com/img/remote/1460000016895951); 如何運(yùn)行項(xiàng)目 ...

    Betta 評(píng)論0 收藏0
  • 微信二次分享

    摘要:接下來通過詳細(xì)的步驟介紹如何接入微信二次分享操作。不要嘗試在中使用異步請(qǐng)求修改本次分享的內(nèi)容,因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作,這時(shí)候使用的回包會(huì)還沒有返回用戶點(diǎn)擊分享到朋友圈已分享已取消此時(shí)微信二次分享就已經(jīng)大功告成了。 微信二次分享 效果演示 showImg(https://segmentfault.com/img/remote/1460000016895951); 如何運(yùn)行項(xiàng)目 ...

    NusterCache 評(píng)論0 收藏0
  • 微信二次分享

    摘要:接下來通過詳細(xì)的步驟介紹如何接入微信二次分享操作。不要嘗試在中使用異步請(qǐng)求修改本次分享的內(nèi)容,因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作,這時(shí)候使用的回包會(huì)還沒有返回用戶點(diǎn)擊分享到朋友圈已分享已取消此時(shí)微信二次分享就已經(jīng)大功告成了。 微信二次分享 效果演示 showImg(https://segmentfault.com/img/remote/1460000016895951); 如何運(yùn)行項(xiàng)目 ...

    Kahn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<