怎麼使用微信JSSDK的自定義分享功能

時間 2019-11-19

標籤怎麼使用微信 jssdk 自定義分享功能简体版

原文原文鏈接

微信在去年發佈JSSDK後，把包括自定義分享在內的衆多網頁服務接口進行了統一。如今，若是要想自定義分享本身的網頁信息給好友或朋友圈，就最好使用這個統一的網頁服務接口。沒有認證微信號的，可參考文章末尾的辦法。php

一，首先在公衆號管理後臺「公衆號設置」的「功能設置」裏填寫JS接口安全域名，域名須要經過ICP備案，沒有備案域名能夠用SAE、BAE等平臺。此外，自定義分享功能須要經過微信認證才能使用，沒有認證的能夠跟關係好的朋友借用權限，在他的JS接口安全域名設置這裏填上你的域名和共享同一個開發者ID。html

二，在須要調用JS接口的頁面引入微信JSSDK的JS文件：http://res.wx.qq.com/open/js/jweixin-1.0.0.js，這個文件在須要分享的頁面是必需要引用的，單獨特別重申一下，其餘方面請閱讀官方文檔http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 安全

引用方法：在網頁title標題下面加上：<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>微信

三，下載官方示例代碼：app

jssdk-php.zip函數

解壓以後在例如PHP文件夾中看到如下文件：ui

四，複製以上文件到你的遊戲目錄，爲了方便全部遊戲調用同一個文件，建議在主機根目錄（即一級目錄）創建一個JSSDK文件夾。debug

五，在你須要自定義分享的網頁源文件上（主機需支持PHP環境，網頁文件名.html改爲.php）引用JSSDK：調試

在網頁頭部加上以下代碼：code

PHP

<?php
require_once "../jssdk/jssdk.php"; //表示主機根目錄下jssdk文件夾內jssdk.php文件
$jssdk = new JSSDK("AppID(應用ID)", "AppSecret(應用密鑰)");//填寫開發者中心你的開發者ID
$signPackage = $jssdk->GetSignPackage();
?>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  //必須引用該文件  
   <script>
 wx.config({
   debug:  false,  //調式模式，設置爲ture後會直接在網頁上彈出調試信息，用於排查問題
   appId: '<?php echo $signPackage["appId"];?>',
   timestamp: <?php echo $signPackage["timestamp"];?>,
   nonceStr: '<?php echo $signPackage["nonceStr"];?>',
   signature: '<?php echo $signPackage["signature"];?>',
   jsApiList: [  //須要使用的網頁服務接口
       'checkJsApi',  //判斷當前客戶端版本是否支持指定JS接口
       'onMenuShareTimeline', //分享給好友
       'onMenuShareAppMessage', //分享到朋友圈
       'onMenuShareQQ',  //分享到QQ
       'onMenuShareWeibo' //分享到微博
   ]
 });
 wx.ready(function () {   //ready函數用於調用API，若是你的網頁在加載後就須要自定義分享和回調功能，須要在此調用分享函數。//若是是微信遊戲結束後，須要點擊按鈕觸發獲得分值後分享，這裏就不須要調用API了，能夠在按鈕上綁定事件直接調用。所以，微信遊戲因爲大多須要用戶先觸發獲取分值，此處請不要填寫以下所示的分享API
wx.onMenuShareTimeline({  //例如分享到朋友圈的API  
   title: '', // 分享標題
   link: '', // 分享連接
   imgUrl: '', // 分享圖標
   success: function () {
       // 用戶確認分享後執行的回調函數
   },
   cancel: function () {
       // 用戶取消分享後執行的回調函數
   }
});
});	
wx.error(function (res) {
 alert(res.errMsg);  //打印錯誤消息。及把 debug:false,設置爲debug:ture就能夠直接在網頁上看到彈出的錯誤提示
});
</script>

那麼，沒有認證微信號，又無法借用權限的朋友，如何分享呢？這就必須讓用戶點擊分享按鈕或遊戲結束時觸發來改變title標題了，至於分享的小圖片，在網頁源文件<body>標籤後，加上<div style="display: none"> <img src="圖片文件的絕對URL地址" /> </div>便可。

微信在去年發佈JSSDK後，把包括自定義分享在內的衆多網頁服務接口進行了統一。如今，若是要想自定義分享本身的網頁信息給好友或朋友圈，就最好使用這個統一的網頁服務接口。沒有認證微信號的，可參考文章末尾的辦法。

一，首先在公衆號管理後臺「公衆號設置」的「功能設置」裏填寫JS接口安全域名，域名須要經過ICP備案，沒有備案域名能夠用SAE、BAE等平臺。此外，自定義分享功能須要經過微信認證才能使用，沒有認證的能夠跟關係好的朋友借用權限，在他的JS接口安全域名設置這裏填上你的域名和共享同一個開發者ID。

引用方法：在網頁title標題下面加上：<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

三，下載官方示例代碼：

jssdk-php.zip

解壓以後在例如PHP文件夾中看到如下文件：

四，複製以上文件到你的遊戲目錄，爲了方便全部遊戲調用同一個文件，建議在主機根目錄（即一級目錄）創建一個JSSDK文件夾。

五，在你須要自定義分享的網頁源文件上（主機需支持PHP環境，網頁文件名.html改爲.php）引用JSSDK：

在網頁頭部加上以下代碼：

PHP

<?php
require_once "../jssdk/jssdk.php"; //表示主機根目錄下jssdk文件夾內jssdk.php文件
$jssdk = new JSSDK("AppID(應用ID)", "AppSecret(應用密鑰)");//填寫開發者中心你的開發者ID
$signPackage = $jssdk->GetSignPackage();
?>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  //必須引用該文件  
   <script>
 wx.config({
   debug:  false,  //調式模式，設置爲ture後會直接在網頁上彈出調試信息，用於排查問題
   appId: '<?php echo $signPackage["appId"];?>',
   timestamp: <?php echo $signPackage["timestamp"];?>,
   nonceStr: '<?php echo $signPackage["nonceStr"];?>',
   signature: '<?php echo $signPackage["signature"];?>',
   jsApiList: [  //須要使用的網頁服務接口
       'checkJsApi',  //判斷當前客戶端版本是否支持指定JS接口
       'onMenuShareTimeline', //分享給好友
       'onMenuShareAppMessage', //分享到朋友圈
       'onMenuShareQQ',  //分享到QQ
       'onMenuShareWeibo' //分享到微博
   ]
 });
 wx.ready(function () {   //ready函數用於調用API，若是你的網頁在加載後就須要自定義分享和回調功能，須要在此調用分享函數。//若是是微信遊戲結束後，須要點擊按鈕觸發獲得分值後分享，這裏就不須要調用API了，能夠在按鈕上綁定事件直接調用。所以，微信遊戲因爲大多須要用戶先觸發獲取分值，此處請不要填寫以下所示的分享API
wx.onMenuShareTimeline({  //例如分享到朋友圈的API  
   title: '', // 分享標題
   link: '', // 分享連接
   imgUrl: '', // 分享圖標
   success: function () {
       // 用戶確認分享後執行的回調函數
   },
   cancel: function () {
       // 用戶取消分享後執行的回調函數
   }
});
});	
wx.error(function (res) {
 alert(res.errMsg);  //打印錯誤消息。及把 debug:false,設置爲debug:ture就能夠直接在網頁上看到彈出的錯誤提示
});
</script>

方式二

設置meta

<meta itemprop="name" content="分享標題"/>
<meta itemprop="image" content="http://img.xmiles.cn/fortune/icon.png" />
<meta name="description" itemprop="description" content="分享描述" />

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。