CocosCreator微信小遊戲入門實戰《小貓釣魚》（九）：遠端資源載入、微信分享
有心的同學可能已經發現，之前我們做的小遊戲除錯都是在creator或者微信開發者工具中進行除錯，並沒有進入真機除錯。
在微信開發者工具中，提供了預覽以及真機除錯這兩個功能讓我們能夠在小遊戲未釋出之前，就可以在手機微信中進行除錯預覽。
不過點選後你就會發現，上傳失敗，包體大小超過4M。這是微信對於包體的一個大小限制：
也就是說超過包體4M的資源，需要我們遠端進行載入。
怎麼辦？不用擔心，creator已經幫我們把這個麻煩的東西解決了，而我們只需要通過簡單的操作就可以實現遠端載入資源。
首先在你的伺服器上搭建一個檔案下載伺服器，這裡我給大家介紹一個簡單的辦法使用apache進行搭建。
下載apache進行安裝
安裝教程大家網上百度一下即可，都很簡單，我這裡就不細述了。主要注意一下證書檔案放到Apache24\conf資料夾下後，記得將httpd-ssl.conf配置中把https ssl證書相關的都配置一下。
完成後執行apache，在瀏覽器中輸入伺服器地址或者域名
看到It works就代表配置成功了。
接下來我們打包我們的小遊戲。開啟creator，構建釋出，配置如下
注意，勾選MD5 Cache，填寫遠端伺服器地址。
遠端伺服器的地址就是我們放置資源的地方，我在伺服器Apache24\htdocs\Fishing目錄下新建了一個Fishing資料夾，用來放置需要遠端載入的資源。所以我的遠端伺服器地址配置為
OK，構建打包。
構建結束後，在資源管理器中開啟我們打好的包，可以看到是這麼一個結構：
把res資料夾上傳到剛剛我們在伺服器新建的資料夾Fishing裡面，同時刪除客戶端這邊的res資料夾：
完成這些以後，再啟動微信開發者工具。
在開發者工具中，執行正常，前面可能會黑屏幾秒，不用擔心，這是在下載資原始檔。
大家也可以參考官方文件：
我們再來看下現在的包體有多大：
遠遠低於要求的4M，這下子我們終於可以愉快的點選預覽或者真機除錯，上傳小遊戲並在手機中運行了。
接下來是微信分享功能了。
微信分享是重要的流量入口，也是微信小遊戲必做的功能。
實現起來很簡單，主要通過三個微信的介面：
wx.onShareAppMessage
wx.showShareMenu
wx.shareAppMessage
wx.onShareAppMessage和wx.showShareMenu主要用於實現手機右上方的分享按鈕功能。
wx.shareAppMessage用於主動拉起分享。
在寫程式碼之前，先準備一張分享用的宣傳圖片，圖片要求長寬比為5：4
推薦圖片上傳到伺服器使用。
var GameData = require("GameData");
cc.Class({
extends: cc.Component,
properties: {
},
// LIFE-CYCLE CALLBACKS:
// onLoad () {},
start () {
if (cc.sys.platform === cc.sys.WECHAT_GAME)
{
wx.login({
success: function(res){
wx.request({
url : "https://www.zzxgame.com.cn:18801/token?code=" + res.code,
method : "POST",
success : function (data) {
if (data.statusCode == 200) {
console.log("request" , data);
wx.postMessage({
message : "openid",
openid : data.data.openid
});
}
}
});
//顯示當前頁面的轉發按鈕
wx.showShareMenu();
//監聽使用者點選右上角選單的“轉發”按鈕時觸發的事件
wx.onShareAppMessage(function(res){
return {
title: "來和小貓一起摸魚！",
imageUrl: "https://www.zzxgame.com.cn/Share/share.png",
success(res){
console.log("轉發成功!!!")
common.diamond += 20;
},
fail(res){
console.log("轉發失敗!!!")
}
}
});
}
});
}
},
onShareClick () {
if (cc.sys.platform === cc.sys.WECHAT_GAME)
{
wx.shareAppMessage({
title: '不服來挑戰，我的小貓拿到了' + GameData.instance.score + "分！",
imageUrl: "https://www.zzxgame.com.cn/Share/share.png",
success: function (res) {
console.log('主動拉起分享成功');
},
fail: function (res) {
console.log('主動拉起分享失敗');
}
});
}
},
// update (dt) {},
});onShareClick方法為結束介面的“發起挑戰”按鈕的ClickEvents。
最終效果：
右上方分享按鈕點選後，點選轉發：
在結束介面點選“發起挑戰”按鈕
