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

番茄西紅柿發布于2019-04-23 13:25 / 2123人閱讀

摘要：準備工作微信官方開發者文檔地址現在的思路已經很明確了，就是通過調用微信的實現自定義分享效果。安裝微信開發者工具，用于本地調試。

前言

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

　　----自定義分享標題、圖片、描述

接下來小編給大家講解下分享相關操作

預期效果

原始的分享效果：

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

可以看出縮略圖，標題，摘要樣式良好，給用戶的體驗很好。

準備工作

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

現在的思路已經很明確了，就是通過調用微信的JS-SDK實現自定義分享效果。但是這個調用過程比較繁瑣，需要提前準備如下東西：

（1）微信服務號一個，并且已經通過了實名認證；

　　沒有實名認證的話，一些接口沒有調用權限。

（2）一個ICP備案的域名；

這個域名需要設置為微信公眾號后臺的JS接口安全域名，否則微信仍然不允許調用它的接口。

這時大家應該就犯難了，這樣的話豈不是不能在本地測試，只能部署到生產環境才能測試？不用著急，解決方案告訴大家：花生殼的內網穿透服務（收費，20元以內）

花生殼官網：http://hsk.oray.com/price/#personal

選擇個人免費版就可以了，雖然說是免費版，但是其實注冊過程中還是要收幾塊錢的，因為我自己買了域名和流量所以花的錢更多一些，但也在20元以內。不建議大家購買流量，送的流量可以用很久了。

當準備好上面提到的就可以開始敲代碼了。

（3）安裝微信開發者工具，用于本地調試。

下載地址：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以及綁定域名

進入微信后臺，找到下面的菜單

獲取AppID和AppSecret

設置JS接口安全域名

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

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

（2）引入JS文件

這里需要注意是http還是https，如果生產環境是https，務必前綴是https，都則會出現mix content這樣的錯誤，導致引入失敗。

我的實例過程用的是

注意必須引入jquery庫且庫在前如下圖

特別注意1：我這個頁面因為下文用到window.onload = function(){ } ，而同一個頁面如果有兩套window.onliad=function(){ } 只會執行最后一套，所以這里我換成了$(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;//獲取域名到參數之間的內容
                
                var pre_url  = "http://"+ pre_urlll+pre_urllll + ?invite=+invite;
                //alert(pre_url);
                wx.config({
                     debug:false, //關閉調試
                     appId:,
                     timestamp:,
                     nonceStr:,
                     signature:,
                     jsApiList:[
                        //所有要調用的API列表
                        "onMenuShareTimeline",
                        "onMenuShareAppMessage",
                        "onMenuShareQQ",
                        "wx.onMenuShareWeibo",
                        "onMenuShareQZone"
                     ] 
                 });
                 wx.ready(function(){
                     //分享給朋友
                    wx.onMenuShareAppMessage({
                        title:"{$data[a_Title]}",//分享標題
                        desc:"{$data[a_Introduction]}", //分享描述
                        link:pre_url,//分享鏈接 // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                        imgUrl:"{$data[a_Image]}",//分享圖標
                        type:link,//分享類型,music/video或link，默認link
                        dataUrl:,//如果是type是music或video,則要提供數據鏈接，默認為空
                        /*success:function(){
                            //用戶確認分享后執行的回調函數
                            erroy("分享成功");
                        },*/
                        
                    });
                    //分享給朋友圈
                    wx.onMenuShareTimeline({
                        title:"{$data[a_Title]}",//分享標題
                        link:pre_url,//分享鏈接 // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                        imgUrl:"{$data[a_Image]}",//分享圖標
                        /*success: function () { 
                            // 用戶確認分享后執行的回調函數
                            erroy("分享成功");
                        },
                        /*cancel: function () { 
                            // 用戶取消分享后執行的回調函數
                            alert("分享失敗");
                        }*/
                    });
                    //分享到QQ
                    wx.onMenuShareQQ({
                        title:"{$data[a_Title]}",//分享標題
                        desc:"{$data[a_Introduction]}", //分享描述
                        link:pre_url,//分享鏈接 // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                        imgUrl:"{$data[a_Image]}",//分享圖標
                        type:link,//分享類型,music/video或link，默認link
                        dataUrl:,//如果是type是music或video,則要提供數據鏈接，默認為空
                        /*success:function(){
                            //用戶確認分享后執行的回調函數
                            erroy("分享成功");
                        },
                        /*cancel:function(){
                            //用戶取消分享后執行的回調函數
                            alert("分享失敗");
                        }*/
                    });
                    //分享到qq空間
                    wx.onMenuShareQZone({
                        title:"{$data[a_Title]}",//分享標題
                        desc:"{$data[a_Introduction]}", //分享描述
                        link:pre_url,//分享鏈接 // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                        imgUrl:"{$data[a_Image]}",//分享圖標
                        type:link,//分享類型,music/video或link，默認link
                        dataUrl:,//如果是type是music或video,則要提供數據鏈接，默認為空
                        /*success:function(){
                            //用戶確認分享后執行的回調函數
                            erroy("分享成功");
                        },
                        
                        /*cancel:function(){
                            //用戶取消分享后執行的回調函數
                            alert("分享失敗");
                        }*/
                    });
                    //分享到微博
                    wx.onMenuShareWeibo({
                        title:"{$data[a_Title]}",//分享標題
                        desc:"{$data[a_Introduction]}", //分享描述
                        link:pre_url,//分享鏈接 // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                        imgUrl:"{$data[a_Image]}",//分享圖標
                        type:link,//分享類型,music/video或link，默認link
                        dataUrl:,//如果是type是music或video,則要提供數據鏈接，默認為空
                        /*success:function(){
                            //用戶確認分享后執行的回調函數
                            erroy("分享成功");
                        },
                        /*cancel:function(){
                            //用戶取消分享后執行的回調函數
                            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>

上面代碼示例中紅顏色的內容即為后臺返出自定義圖片、標題、描素內容。

注意有兩點內容容易導致分享達不到效果：

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

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

好了，到此就結束了　　　　　　　　　　　　　　　　　　　

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1839.html

微信分享自定義樣式

摘要：微信分享到朋友圈微信分享給朋友自定義圖文信息本來效果預期效果參考微信開發者文檔需要準備的通過微信認證的公眾號有備案過的域名步驟后臺需要實現的事情登錄微信公眾平臺進入公眾號設置的功能設置里填寫接口安全域名調用的必須在接口安全域名可以登錄后可微信分享到朋友圈&微信分享給朋友自定義圖文信息本來效果:showImg(https://segmentfault.com/img/bV4LBB?...

darcrand 2019-08-22 15:00 評論0 收藏0
vue使用微信JS-SDK實現分享功能

摘要：最近開發微信公眾號內嵌頁面，使用搭建的項目，由于業務需求，需要實現微信自定義分享功能，所以項目中集成微信。最近開發微信公眾號內嵌H5頁面，使用vue搭建的項目，由于業務需求，需要實現微信自定義分享功能，所以項目中集成微信JS-SDK。微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。通過使用微信JS-SDK，網頁開發者可借助微信高效地使用拍照、選圖、語音、...

ShowerSun 2019-08-26 10:58 評論0 收藏0

發表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關注我要私信

TA的文章

tensor

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

閱讀 3910·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3784·2021-11-30 14:52
VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區

閱讀 3852·2021-11-29 11:00
百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

閱讀 3783·2021-11-29 11:00
Linux系統和寶塔面板如何啟用禁ping功能?

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

閱讀 3557·2021-11-29 11:00
wordpress網站重定向次數過多的解決方法

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

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

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

前言

預期效果

準備工作

具體步驟

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

（2）引入JS文件

相關文章

微信分享自定義樣式

**vue使用微信JS-SDK實現分享功能**

發表評論

0條評論

番茄西紅柿

男|高級講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區

百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

Linux系統和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設置方法有幾種

wordpress網站重定向次數過多的解決方法

最新活動