帶你使用JS-SDK自定義微信分享效果

番茄西紅柿發(fā)布于2019-04-23 13:25 / 2189人閱讀

摘要：準(zhǔn)備工作微信官方開發(fā)者文檔地址現(xiàn)在的思路已經(jīng)很明確了，就是通過調(diào)用微信的實(shí)現(xiàn)自定義分享效果。安裝微信開發(fā)者工具，用于本地調(diào)試。

前言

想必各位在寫wap端時(shí)都遇到過這樣的場景吧

　　----自定義分享標(biāo)題、圖片、描述

接下來小編給大家講解下分享相關(guān)操作

預(yù)期效果

原始的分享效果：

使用微信JS-SDK的分享效果：

可以看出縮略圖，標(biāo)題，摘要樣式良好，給用戶的體驗(yàn)很好。

準(zhǔn)備工作

微信官方開發(fā)者文檔地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

現(xiàn)在的思路已經(jīng)很明確了，就是通過調(diào)用微信的JS-SDK實(shí)現(xiàn)自定義分享效果。但是這個(gè)調(diào)用過程比較繁瑣，需要提前準(zhǔn)備如下東西：

（1）微信服務(wù)號(hào)一個(gè)，并且已經(jīng)通過了實(shí)名認(rèn)證；

　　沒有實(shí)名認(rèn)證的話，一些接口沒有調(diào)用權(quán)限。

（2）一個(gè)ICP備案的域名；

這個(gè)域名需要設(shè)置為微信公眾號(hào)后臺(tái)的JS接口安全域名，否則微信仍然不允許調(diào)用它的接口。

這時(shí)大家應(yīng)該就犯難了，這樣的話豈不是不能在本地測試，只能部署到生產(chǎn)環(huán)境才能測試？不用著急，解決方案告訴大家：花生殼的內(nèi)網(wǎng)穿透服務(wù)（收費(fèi)，20元以內(nèi)）

花生殼官網(wǎng)：http://hsk.oray.com/price/#personal

選擇個(gè)人免費(fèi)版就可以了，雖然說是免費(fèi)版，但是其實(shí)注冊過程中還是要收幾塊錢的，因?yàn)槲易约嘿I了域名和流量所以花的錢更多一些，但也在20元以內(nèi)。不建議大家購買流量，送的流量可以用很久了。

當(dāng)準(zhǔn)備好上面提到的就可以開始敲代碼了。

（3）安裝微信開發(fā)者工具，用于本地調(diào)試。

下載地址：https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=x64

官方使用教程：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

具體步驟

（1）查看AppId，AppSecret以及綁定域名

進(jìn)入微信后臺(tái)，找到下面的菜單

獲取AppID和AppSecret

設(shè)置JS接口安全域名

注意第三步，如果微信服務(wù)器不能在我們的服務(wù)器上訪問到這個(gè)txt文件，域名是無法設(shè)置成功的，這里先告訴大家在哪里設(shè)置，想要成功設(shè)置域名還需要使用花生殼的服務(wù)，讓微信服務(wù)器訪問我們本地工程中的的txt文件才行。

hkh3321313.vicp.io是在花生殼上購買的域名，免費(fèi)送的域名是在太難記了，完全不能忍。

（2）引入JS文件

這里需要注意是http還是https，如果生產(chǎn)環(huán)境是https，務(wù)必前綴是https，都則會(huì)出現(xiàn)mix content這樣的錯(cuò)誤，導(dǎo)致引入失敗。

我的實(shí)例過程用的是

注意必須引入jquery庫且?guī)煸谇?nbsp; 如下圖

特別注意1：我這個(gè)頁面因?yàn)橄挛挠玫絯indow.onload = function(){ } ，而同一個(gè)頁面如果有兩套window.onliad=function(){ } 只會(huì)執(zhí)行最后一套，所以這里我換成了$(function(){ })

下面我把我頁面中的源碼粘貼在下面

php
    require_once "jssdk/jssdk.php";
    $jssdk = new JSSDK("wx5da159273bc20f8c", "c9a2f38963f08dd082f75261c13f0c97");
    $signPackage = $jssdk->GetSignPackage();
    //var_dump($signPackage);
    
?>
<html>

    <head lang=zh-cn>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <meta content="yes" name="app-moblie-web-app-capable">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <meta name="renderer" content="webkit">
        <meta name="Author" content="http://wap.simufengyun.com">
        <title>上海交大私募班title>
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/msimufengyun/style/same.css">
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/msimufengyun/style/left_column.css">
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/msimufengyun/style/av_detail.css">
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/msimufengyun/style/activitydetail.css">
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/msimufengyun/style/activity.css">
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/msimufengyun/style/swiper-3.3.1.min.css">
        <link href="__PUBLIC__/Home/css/compub.css" rel="stylesheet">
        <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js">script>
        <script type="text/javascript">
            window.onload = function(){
                var invite = "{$uid}";
                //var pre_urll = window.location.href;
                //var pre_url  = pre_urll + ?invite=+invite;
                var pre_urlll = window.location.host; //獲取主域名
                var pre_urllll = window.location.pathname;//獲取域名到參數(shù)之間的內(nèi)容
                
                var pre_url  = "http://"+ pre_urlll+pre_urllll + ?invite=+invite;
                //alert(pre_url);
                wx.config({
                     debug:false, //關(guān)閉調(diào)試
                     appId:,
                     timestamp:,
                     nonceStr:,
                     signature:,
                     jsApiList:[
                        //所有要調(diào)用的API列表
                        "onMenuShareTimeline",
                        "onMenuShareAppMessage",
                        "onMenuShareQQ",
                        "wx.onMenuShareWeibo",
                        "onMenuShareQZone"
                     ] 
                 });
                 wx.ready(function(){
                     //分享給朋友
                    wx.onMenuShareAppMessage({
                        title:"{$data[a_Title]}",//分享標(biāo)題
                        desc:"{$data[a_Introduction]}", //分享描述
                        link:pre_url,//分享鏈接 // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                        imgUrl:"{$data[a_Image]}",//分享圖標(biāo)
                        type:link,//分享類型,music/video或link，默認(rèn)link
                        dataUrl:,//如果是type是music或video,則要提供數(shù)據(jù)鏈接，默認(rèn)為空
                        /*success:function(){
                            //用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
                            erroy("分享成功");
                        },*/
                        
                    });
                    //分享給朋友圈
                    wx.onMenuShareTimeline({
                        title:"{$data[a_Title]}",//分享標(biāo)題
                        link:pre_url,//分享鏈接 // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                        imgUrl:"{$data[a_Image]}",//分享圖標(biāo)
                        /*success: function () { 
                            // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
                            erroy("分享成功");
                        },
                        /*cancel: function () { 
                            // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
                            alert("分享失敗");
                        }*/
                    });
                    //分享到QQ
                    wx.onMenuShareQQ({
                        title:"{$data[a_Title]}",//分享標(biāo)題
                        desc:"{$data[a_Introduction]}", //分享描述
                        link:pre_url,//分享鏈接 // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                        imgUrl:"{$data[a_Image]}",//分享圖標(biāo)
                        type:link,//分享類型,music/video或link，默認(rèn)link
                        dataUrl:,//如果是type是music或video,則要提供數(shù)據(jù)鏈接，默認(rèn)為空
                        /*success:function(){
                            //用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
                            erroy("分享成功");
                        },
                        /*cancel:function(){
                            //用戶取消分享后執(zhí)行的回調(diào)函數(shù)
                            alert("分享失敗");
                        }*/
                    });
                    //分享到qq空間
                    wx.onMenuShareQZone({
                        title:"{$data[a_Title]}",//分享標(biāo)題
                        desc:"{$data[a_Introduction]}", //分享描述
                        link:pre_url,//分享鏈接 // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                        imgUrl:"{$data[a_Image]}",//分享圖標(biāo)
                        type:link,//分享類型,music/video或link，默認(rèn)link
                        dataUrl:,//如果是type是music或video,則要提供數(shù)據(jù)鏈接，默認(rèn)為空
                        /*success:function(){
                            //用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
                            erroy("分享成功");
                        },
                        
                        /*cancel:function(){
                            //用戶取消分享后執(zhí)行的回調(diào)函數(shù)
                            alert("分享失敗");
                        }*/
                    });
                    //分享到微博
                    wx.onMenuShareWeibo({
                        title:"{$data[a_Title]}",//分享標(biāo)題
                        desc:"{$data[a_Introduction]}", //分享描述
                        link:pre_url,//分享鏈接 // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                        imgUrl:"{$data[a_Image]}",//分享圖標(biāo)
                        type:link,//分享類型,music/video或link，默認(rèn)link
                        dataUrl:,//如果是type是music或video,則要提供數(shù)據(jù)鏈接，默認(rèn)為空
                        /*success:function(){
                            //用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
                            erroy("分享成功");
                        },
                        /*cancel:function(){
                            //用戶取消分享后執(zhí)行的回調(diào)函數(shù)
                            alert("分享失敗");
                        }*/
                    });
                 })
            }
        script>
        <style type="text/css">
            .container p img{
                width: 100%;
                border:none;
            }
        style>
    head>

    <body>
        <div style=position:relative;>
            <div class=index_header>
                <div class=left_btn>

上面代碼示例中紅顏色的內(nèi)容即為后臺(tái)返出自定義圖片、標(biāo)題、描素內(nèi)容。

注意有兩點(diǎn)內(nèi)容容易導(dǎo)致分享達(dá)不到效果：

　　1、如果用$(function(){ }) 需要把jquery庫引入在前面，保證$有定義；

　　2、如果用window.onload=function(){} ，切記在同一個(gè)頁面內(nèi)不要有第二個(gè)出現(xiàn)　

好了，到此就結(jié)束了　　　　　　　　　　　　　　　　　　　

GPU云服務(wù)器云服務(wù)器微信自定義菜單 view 使用自定義字體自定義鏡像使用自定義鏡像的使用

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1839.html

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

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 844·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 4109·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 3918·2021-11-30 14:52
VmShell：黑五美國VPS,免費(fèi)先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 4024·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3917·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 4035·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3752·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6597·2021-11-29 11:00

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

帶你使用JS-SDK自定義微信分享效果

前言

預(yù)期效果

準(zhǔn)備工作