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

来源:https://www.cnblogs.com/zmdComeOn/archive/2018/09/06/9600027.html
-Advertisement-
Play Games

前言 想必各位在寫wap端時都遇到過這樣的場景吧 自定義分享標題、圖片、描述 接下來小編給大家講解下分享相關操作 預期效果 原始的分享效果： 使用微信JS-SDK的分享效果： 可以看出縮略圖，標題，摘要樣式良好，給用戶的體驗很好。 準備工作 微信官方開發者文檔地址：https://mp.weixin ...


前言

想必各位在寫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這樣的錯誤，導致引入失敗。

<script typet="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

 我的實例過程用的是

<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

註意必須引入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:'<?php echo $signPackage["appId"];?>',
                     timestamp:'<?php echo $signPackage["timestamp"];?>',
                     nonceStr:'<?php echo $signPackage["nonceStr"];?>',
                     signature:'<?php echo $signPackage["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(){} ，切記在同一個頁面內不要有第二個出現　

好了，到此就結束了　　　　　　　　　　　　　　　　　　　

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android apk安裝時出現“解析軟體包錯誤”
    有時候在安裝apk的時候會出現解析軟體包出錯 （Android studio）解決方法如下： 關閉Instant Run功能: File-Settings-...看下圖： 將紅色框內的勾取消。 如果還是不行，那麼便在工程的gradle.properties里添加 android.injected.t ...
  • Android Studio調試手機或者安裝APK的時候出現install failed test only
    1、檢查\app\src\main\AndroidMainfest.xml中是否有testOnly屬性為true，如果有去掉或者改為false 2、檢查Android Studio和gradle版本是否為alpha版本，換為穩定版本 3、檢查是否關閉Instant Run功能，關掉此功能 4、檢查是 ...
  • iOS下載圖片失敗
    一、具體問題 開發的過程中，發現某個界面部分圖片的顯示出現了問題只顯示占點陣圖片，取出圖片的url在瀏覽器卻是能打開的，各種嘗試甚至找同行的朋友幫忙在他們項目里展示都會存在問題，最終發現通過第三方框架SDWebImage或者YYWebImage下載帶有逗號的url圖片鏈接都會下載失敗，在下載方法完成的 ...
  • 對類Vue的MVVM前端庫的實現
    關於實現MVVM，網上實在是太多了，本文為個人總結，結合源碼以及一些別人的實現 關於雙向綁定 vue 數據劫持 + 訂閱 發佈 ng 臟值檢查 backbone.js 訂閱 發佈(這個沒有使用過，並不是主流的用法) 雙向綁定，從最基本的實現來說，就是在defineProperty綁定的基礎上在綁定i ...
  • 史上最全的HTML和CSS標簽常用命名規則
    文件夾主要建立以下文件夾： 1、Images 存放一些網站常用的圖片； 2、Css 存放一些CSS文件； 3、Flash 存放一些Flash文件； 4、PSD 存放一些PSD源文件； 5、Temp 存放所有臨時圖片和其它文件； 6、copyright 版權信息（可選） 8、readme 說明文件 c ...
  • React Native開發中自動打包腳本
    React Native開發中自動打包腳本 在日常的RN開發中，我們避免不了需要將我們編寫的代碼編譯成安裝包，然後生成二維碼，供需要測試的人員掃描下載。但是對於非原生的開發人員來說，可能不知如何使用Xcode或者Android studio來導出ipa、apk安裝包，為瞭解決非原生開發的同學們打安裝 ...
  • JavaScript語句
    JavaScript語句 JavaScript語句向瀏覽器發出命令，語句的作用是告訴瀏覽器該乾什麼。 JavaScript分號 ; 分號用於分隔JavaScript語句。 通常我們在每條可執行的語句尾添加分號。 另一個作用是在一行中編寫多條語句。 a = 5; b = 4; c = a + b; a ...
  • How to Make Fibonacci Confusing
    好端端的”斐波那契“是怎麼變成這樣的，因吹斯聽，我們來回放一下。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類