微信小程序仿微信SlideView組件slide-view

發布時間：2018-11-02 09:09 所屬欄目：小程序開發教程

快速上手安裝開發工具

前往開發者工具下載頁面，根據自己的操作系統下載對應的安裝包進行安裝。

你的第一個小游戲

新建項目選擇小程序項目，選擇代碼存放的硬盤路徑。目前小游戲不提供公開注冊，可點擊體驗小游戲使用無 AppID 模式。給你的項目起一個好聽的名字，最后，勾選“建立游戲快速啟動模板”（注意：你要選擇一個空的目錄才會有這個選項），點擊確定，你就得到了你的第一個小游戲了。

點擊頂部菜單編譯就可以在 IDE 預覽你的第一個小游戲。

真機預覽

點擊工具上的編譯按鈕，可以在工具的左側模擬器界面看到這個小游戲的表現。點擊預覽按鈕，通過微信的掃一掃在手機上體驗你的第一個小游戲。

文件結構

小游戲只有以下兩個必要文件：

game.js 小游戲入口文件
game.json 配置文件

配置

小游戲開發者通過在根目錄編寫一個 game.json 文件進行配置，開發者工具和客戶端需要讀取這個配置，完成相關界面渲染和屬性設置。

deviceOrientation

示例配置

[JavaScript] 純文本查看復制代碼


{
    "deviceOrientation": "portrait",
    "networkTimeout": {
        "request": 5000,
        "connectSocket": 5000,
        "uploadFile": 5000,
        "downloadFile": 5000
    }
}

wx API

你只能使用 JavaScript 來編寫小游戲。小游戲的運行環境是一個綁定了一些方法的 JavaScript VM。不同于瀏覽器，這個運行環境沒有 BOM 和 DOM API，只有 wx API。接下來我們將介紹如何用 wx API 來完成創建畫布、繪制圖形、顯示圖片以及響應用戶交互等基礎功能。

創建 Canvas

調用 wx.createCanvas() 接口，可以創建一個 Canvas 對象。

[JavaScript] 純文本查看復制代碼

1	var canvas = wx.createCanvas()

此時創建的 canvas 已經顯示在了屏幕上，且與屏幕等寬等高。

[JavaScript] 純文本查看復制代碼

1	console.log(canvas.width, canvas.height)

但是由于沒有在 canvas 上進行繪制，所以 canvas 是透明的。使用 2d 渲染上下文的進行簡單的繪制，可以在屏幕左上角看到一個 100x100 的紅色矩形。

[JavaScript] 純文本查看復制代碼

var context = canvas.getContext('2d')

context.fillStyle = 'red'

context.fillRect(0, 0, 100, 100)

通過 Canvas.getContext() 方法可以獲取 2d 或 WebGL 渲染上下文 RenderingContext，調用渲染上下文的繪制方法可以在 Canvas 上進行繪制。小游戲基本上支持 2d 和 WebGL 1.0 所有的屬性和方法，詳情請見 RenderingContext。由于使用 WebGL 的繪制過程較為復雜，所以本文中的示例代碼都以 2d 渲染上下文的繪制方法編寫。

通過設置 width 和 height 屬性可以改變 Canvas 對象的寬高，但這也會導致 Canvas 內容的清空和渲染上下文的重置。

[JavaScript] 純文本查看復制代碼

1 2	canvas.width = 300 canvas.height = 300

顯示圖片

通過 wx.createImage() 接口，可以創建一個 Image 對象。Image 對象可以加載圖片。當 Image 對象被繪制到 Canvas 上時，圖片才會顯示在屏幕上。

[JavaScript] 純文本查看復制代碼

1	var image = wx.createImage()

設置 Image 對象的 src 屬性可以加載一張本地圖片或網絡圖片，當圖片加載完畢時會執行注冊的 onload 回調函數，此時可以將 Image 對象繪制到 Canvas 上。

[JavaScript] 純文本查看復制代碼



image.onload = function () {
    console.log(image.width, image.height)
    context.drawImage(image, 0, 0)
}
image.src = 'logo.png'

創建多個 Canvas

在整個小游戲運行期間，首次調用 wx.createCanvas 接口創建的是一個上屏 Canvas。在這個 canvas 上繪制的內容都將顯示在屏幕上。而第二次、第三次等后幾次調用 wx.createCanvas 創建的都會是離屏 Canvas。在離屏 Canvas 上繪制的內容僅僅只是繪制到了這個離屏 Canvas 上，并不會顯示在屏幕上。

以如下代碼為例，運行后會發現屏幕上并沒有在 (0, 0) 的位置顯示 100x100 的紅色矩形。因為我們是在一個離屏的 Canvas 繪制的。

[JavaScript] 純文本查看復制代碼



var screenCanvas = wx.createCanvas()
var offScreenCanvas = wx.createCanvas()
var offContext = offScreenCanvas.getContext('2d')
offContext.fillStyle = 'red'
offContext.fillRect(0, 0, 100, 100)

為了讓這個紅色矩形顯示在屏幕上，我們需要把離屏的 offScreenCanvas 繪制到上屏的 screenCanvas 上。

[JavaScript] 純文本查看復制代碼


var screenContext = screenCanvas.getContext('2d')
screenContext.drawImage(offScreenCanvas, 0, 0)

動畫

在 JavaScript 中，一般通過 setInterval/setTimeout/requestAnimationFrame 來實現動畫效果。小游戲對這些 API 提供了支持：

setInterval()
setTimeout()
requestAnimationFrame()
clearInterval()
clearTimeout()
cancelAnimationFrame()

另外，還可以通過 wx.setPreferredFramesPerSecond() 修改執行 requestAnimationFrame 回調函數的頻率，以降低性能消耗。

觸摸事件

響應用戶與屏幕的交互是游戲中必不可少的部分，小游戲參照 DOM 中的 TouchEvent 提供了以下監聽觸摸事件的 API：

wx.onTouchStart()
wx.onTouchMove()
wx.onTouchEnd()
wx.onTouchCancel()

[JavaScript] 純文本查看復制代碼



wx.onTouchStart(function (e) {
    console.log(e.touches)
})

wx.onTouchMove(function (e) {
    console.log(e.touches)
})

wx.onTouchEnd(function (e) {
    console.log(e.touches)
})

wx.onTouchCancel(function (e) {
    console.log(e.touches)

微信小游戲資訊+教程

小程序功能升級：支持游戲開發啦！

微信小游戲「跳一跳」

微信小游戲的技術5要點

官方問答-- 微信小游戲 Q&A

微信小程序跳一跳的游戲輔助實現

微信小游戲初體驗

如何解決目前微信小游戲無法進行網絡請求的問題

微信小游戲體驗之打飛機改造計劃

微信小程序實例--猜拳游戲

微信小程序開發的游戲《拼圖游戲》

『教程』微信小程序canvas輯合（教程+Demo+跳坑）

微信小游戲Demo

微信小程序demo：1024小游戲

微信小程序demo：剪刀石頭布小游戲

微信小程序Demo：別踩白塊小游戲

微信小程序Demo：Sudolite（數獨小游戲）

微信小程序Demo：瘋狂吃月餅小游戲

微信小程序Demo：官方飛機大戰小游戲

微信小程序demo：云圖飛機大戰游戲

微信小程序Demo：Make Them Fight悠閑游戲

微信小程游戲Demo：誰是殺手

游戲類demo：貪食蛇：得分計算/蛇長計算/游戲加速/蛇加長

微信小程序游戲類demo：貪吃蛇

微信小程序游戲類demo：翻牌小程序

微信小程序游戲類demo：經典掃雷

微信小程序游戲類demo：掃雷英雄

微信小程序游戲demo：消滅黑暗勢力；隨機點路徑類似圍住貓

微信小程序24點計算游戲

微信小程序demo：骰子游戲

易優小程序（企業版）+靈活api+前后代碼開源碼云倉庫:

本文地址：http://www.xiuhaier.com/wxmini/doc/course/24924.html 復制鏈接如需定制請聯系易優客服咨詢：800182392 點擊咨詢

免責聲明：本站所有文章和圖片均來自用戶分享和網絡收集，文章和圖片版權歸原作者及原出處所有，僅供學習與參考，請勿用于商業用途，如果損害了您的權利，請聯系網站客服處理。

熱門問題
最新問題

网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序仿微信SlideView組件slide-view

產品

服務

幫助

關于