微信小程序是騰訊微信團(tuán)隊(duì)推出的基于微信生態(tài)的應(yīng)用號(hào)，是一種跨平臺(tái)，媲美原生App操作體驗(yàn)的web應(yīng)用，它擁有，即用即走、離線存儲(chǔ)、跨平臺(tái)等特點(diǎn)。

微信小程序的定義：小程序是一個(gè)可以幫助用戶高效解決問題的工具，用完即走；其優(yōu)質(zhì)的用戶體驗(yàn)會(huì)推動(dòng)用戶走了再回來。同時(shí)微信給小程序開放了多個(gè)入口幫助用戶能夠找到自己使用過或者想要使用的小程序。

最大的優(yōu)勢(shì)就是：很多App在微信打開后需要跳轉(zhuǎn)，而小程序依靠月活10億的微信用戶，可以直接在微信中打開運(yùn)行。購(gòu)物類小程序打開后界面類似其他商城App，讓用戶購(gòu)物體驗(yàn)更好。也可以直接在微信群分享，熟人分享轉(zhuǎn)化率更高。

微信群里的小游戲像病毒一樣刷屏，雖然騰訊表示會(huì)阻止這樣的病毒式分享，但是依然無法阻擋小游戲的火爆。這是一條很好的變現(xiàn)方式。

碎片化時(shí)間的利用充分展示了小程序的優(yōu)越性，用完就走，無需安裝和留存，騰訊給小程序開放了很多入口，首頁(yè)下拉可以看到小程序的使用記錄。

借助小程序數(shù)據(jù)助手對(duì)用戶特征消費(fèi)行為特征數(shù)據(jù)的采集和處理，可進(jìn)行多維度的用戶消費(fèi)特征分析、產(chǎn)品策略分析和銷售策略指導(dǎo)分析，通過準(zhǔn)確把握用戶需求，增加用戶互動(dòng)的方式推動(dòng)營(yíng)銷策略的策劃和執(zhí)行。

本次微信小程序—雙人對(duì)戰(zhàn)五子棋游戲，能夠在微信中實(shí)現(xiàn)好友與好友之間的雙人對(duì)戰(zhàn)游戲，能夠加強(qiáng)好友之間的聯(lián)系，加強(qiáng)互動(dòng)。如今微信在即時(shí)通信領(lǐng)域發(fā)揮著越來越重要的作用，而作為在微信上運(yùn)行的小程序?qū)��?huì)變得更加重要，也會(huì)被使用的越來越頻繁，所以此次設(shè)計(jì)將會(huì)在微信web開發(fā)平臺(tái)上制作微信小程序。

小程序是微信內(nèi)的云端應(yīng)用（所以無需安裝），不是原生App，通過WebSocket 雙向通信（保證無需刷新即時(shí)通信）、本地緩存（圖片與UI 本地緩存降低與服務(wù)器交互延時(shí)）以及微信底層技術(shù)優(yōu)化實(shí)現(xiàn)了接近原生APP 的體驗(yàn)。

本質(zhì)上就是JS+CSS+HTML5，不過不能直接用HTML標(biāo)簽，微信提供一個(gè)組件庫(kù)，沒有DOM和其他瀏覽器上的API；網(wǎng)絡(luò)、Canvas等也重新包裝過。

Java是由Sun Microsystems公司推出的Java面向?qū)ο蟪绦蛟O(shè)計(jì)語言和Java平臺(tái)的總稱。Java是由James Gosling和同事們共同研發(fā)，并在1995年正式推出。Java最初被稱為Oak，是1991年為消費(fèi)類電子產(chǎn)品的嵌入式芯片而設(shè)計(jì)的。1995年正式更名為Java，并重新設(shè)計(jì)用于開發(fā)Intern et應(yīng)用程序。用Java實(shí)現(xiàn)的HotJava瀏覽器（支持Java applet）顯示了Java的魅力：跨平臺(tái)、動(dòng)態(tài)Web、Internet計(jì)算。從此，Java被廣泛接受并推動(dòng)了Web的迅速發(fā)展，常用的瀏覽器均支持Java applet。另一方面，Java技術(shù)也不斷更新。Java自面世后就非常流行，發(fā)展迅速，對(duì)C++語言形成有力沖擊。在全球云計(jì)算和移動(dòng)互聯(lián)網(wǎng)的產(chǎn)業(yè)環(huán)境下，Java更具備了顯著優(yōu)勢(shì)和廣闊前景。2010年Oracle公司收購(gòu)Sun Microsystems[2]。

XML語言是一種可擴(kuò)展標(biāo)記語言，標(biāo)準(zhǔn)通用語言的子集，是一種標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語言。它非常適合萬維網(wǎng)的傳輸，提供統(tǒng)一的方法來描述和交換獨(dú)立于應(yīng)用程序或提供商的結(jié)構(gòu)化數(shù)據(jù)。是Internet環(huán)境中跨平臺(tái)的、依賴于內(nèi)容的技術(shù)，也是當(dāng)今處理分布式結(jié)構(gòu)信息的有效工具。早在1998年，W3C就發(fā)布了XML1.0規(guī)范，使用它來簡(jiǎn)化Internet的文檔信息傳輸。

為幫助開發(fā)者更方便、更安全地開發(fā)和調(diào)試基于微信的網(wǎng)頁(yè)，我們推出了 web 開發(fā)者工具。它是一個(gè)桌面應(yīng)用，通過模擬微信客戶端的表現(xiàn)，使得開發(fā)者可以使用這個(gè)工具方便地在 PC 或者 Mac 上進(jìn)行開發(fā)和調(diào)試工作。

小程序提供了豐富的基礎(chǔ)組件給開發(fā)者，開發(fā)者可以像搭積木一樣，組合各種組件拼合成自己的小程序。

就像 HTML 的 div, p 等標(biāo)簽一樣，在小程序里邊，你只需要在 WXML 寫上對(duì)應(yīng)的組件標(biāo)簽名字就可以把該組件顯示在界面上，

為了讓開發(fā)者可以很方便的調(diào)起微信提供的能力，例如獲取用戶信息、微信支付等等，小程序提供了很多 API 給開發(fā)者去使用。

要獲取用戶的地理位置時(shí)，只需要：

調(diào)用微信掃一掃能力，只需要：

需要注意的是：多數(shù) API 的回調(diào)都是異步，你需要處理好代碼邏輯的異步問題。

更多的 API 能力見 小程序的API 。

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些擴(kuò)充和修改。

新增了尺寸單位。在寫 CSS 樣式時(shí)，開發(fā)者需要考慮到手機(jī)設(shè)備的屏幕會(huì)有不同的寬度和設(shè)備像素比，采用一些技巧來?yè)Q算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開發(fā)者可以免去換算的煩惱，只要交給小程序底層來?yè)Q算即可，由于換算采用的浮點(diǎn)數(shù)運(yùn)算，所以運(yùn)算結(jié)果會(huì)和預(yù)期結(jié)果有一點(diǎn)點(diǎn)偏差。

提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同，你可以寫一個(gè) app.wxss 作為全局樣式，會(huì)作用于當(dāng)前小程序的所有頁(yè)面，局部頁(yè)面樣式 page.wxss 僅對(duì)當(dāng)前頁(yè)面生效。

此外 WXSS 僅支持部分 CSS 選擇器

本微信小程序是一款界面簡(jiǎn)潔的游戲類小程序。該小程序是五子棋游戲，擁有五子棋的基本功能，黑白雙方，下棋、悔棋、判斷勝負(fù)、重新開局的功能。此小程序能夠在微信中實(shí)現(xiàn)好友與好友之間的雙人對(duì)戰(zhàn)游戲，能夠加強(qiáng)好友之間的聯(lián)系，加強(qiáng)互動(dòng)。

繪制棋盤—通過棋盤寬高和格數(shù)計(jì)算間距，根據(jù)一定的間距繪制格子相同的棋盤，同時(shí)保存坐標(biāo)點(diǎn)。相關(guān)代碼如下：

drawLine(arr){

arr.forEach(current => {

this.ctx.setFillStyle(this.lineColor);

this.ctx.beginPath();

this.ctx.lineWidth = 1;

this.ctx.moveTo(current[0].x, current[0].y);

for (var i = 1; i < current.length; i++) { this.ctx.lineTo(current.x, current.y);

}

this.ctx.stroke();

this.ctx.closePath();

this.ctx.draw(true); });

}

drawChessboard(){

// 每個(gè)格子的寬高

var everyLen = this.everyLen;

// 標(biāo)記坐標(biāo)的個(gè)數(shù)

var count = 0;

// 從縱向保存坐標(biāo)

var arrY = [];

// 雙循環(huán)計(jì)算每個(gè)坐標(biāo)的橫縱坐標(biāo)

for(var i = 0;i <= this.type; i++){

var arr = [],arr0 = [];

for(var j = 0;j <= this.type; j++){

count++;

arr.push({

y: this.margin + i * everyLen,

x: this.margin + j * everyLen,

pointX: j,

pointY: i,

index: count

});

arr0.push({

x: this.margin + i * everyLen,

y: this.margin + j * everyLen }) } // 清空canvas

this.ctx.clearRect(0, 0, this.width, this.height);

// 保存橫線坐標(biāo)和豎線坐標(biāo)

this.everyPoint.push(arr); arrY.push(arr0); } // 繪制橫向線 this.drawLine(this.everyPoint); // 繪制豎向線

this.drawLine(arrY);

}            

對(duì)棋子的位置坐標(biāo)進(jìn)行相關(guān)定義，各種相關(guān)代碼如下：

在每局結(jié)束后將可以手動(dòng)進(jìn)行重置棋盤，相關(guān)代碼如下：

在本次微信小程序的制作中，實(shí)現(xiàn)了五子棋小游戲的各種基本的功能，能夠成功運(yùn)行并進(jìn)行雙人對(duì)弈、悔棋、重置棋盤等功能。

通過此次小程序制作，了解了微信小程序的制作過程、運(yùn)行環(huán)境、開發(fā)環(huán)境、腳本語言等，為以后軟件的學(xué)習(xí)打下了一定的基礎(chǔ)。

在制作過程中，繪制棋盤前必須清空canvas，方便最后的重新開始和重置棋盤；對(duì)當(dāng)前棋子的坐標(biāo)四個(gè)方向的判斷，采用的原始坐標(biāo)而不是計(jì)算后的繪制坐標(biāo)；在判斷持棋人時(shí)，各自采用一個(gè)值，方便添加悔棋功能。

在這次微信小程序-五子棋的開發(fā)過程中，雖然困難重重，但我始終堅(jiān)持不放棄，積極請(qǐng)教同學(xué)。在開發(fā)過程中，無論我出現(xiàn)多么簡(jiǎn)單的錯(cuò)誤，同學(xué)們都耐心地指導(dǎo)我一步一步去改正，并最終從中吸取經(jīng)驗(yàn)，防止下次再犯。所以在項(xiàng)目基本完成之際，我要感謝許新華老師給我們這次成長(zhǎng)的機(jī)會(huì)，也要感謝給予我?guī)椭�的同學(xué)們。

0.png (46.18 KB, 下載次數(shù): 92)

下載附件

2018-7-3 00:24 上傳

0.png (9.1 KB, 下載次數(shù): 100)

下載附件

2018-7-3 00:24 上傳

五子棋程序加文檔.zip (252.86 KB, 下載次數(shù): 70)

2018-7-2 22:22 上傳

點(diǎn)擊文件名下載附件
微信小程序五子棋
下載積分: 黑幣 -5