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

時間  2019-11-09
標籤 使用 sdk 自定義 微信 分享 效果 欄目 JavaScript 简体版
原文   原文鏈接

前言

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

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

接下來小編給你們講解下分享相關操做css

預期效果

原始的分享效果：html

 

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

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

準備工做

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

如今的思路已經很明確了，就是經過調用微信的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'>

 

 

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

 

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

　　一、若是用$(function(){  }) 須要把jquery庫引入在前面，保證$有定義；

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

好了，到此就結束了　　　　　　　　　　　　　　　　　　　

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程