帶你使用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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類