本文實例為大家分享了微信小程序翻牌游戲的具體代碼，供大家參考，具體內容如下
一、新建一個quick start項目看看結構
在微信開發工具點擊添加項目，選擇 無appid，勾上"在當前目錄中創建quick start 項目"。
可以看到一共有兩個目錄 pages和utils，和根目錄下的3個app文件。pages存放的是小程序的頁面，每個也面都有自己獨立的文件夾。 一個頁面由4文件構成，js文件是程序邏輯；wxss是微信定義的樣式文件，語法跟css一樣，支持的樣式要少一些；wxml文件用來定義小程序的界面，作用類似于html，但是只能用微信自定義的一些標簽，而且頁面元素不能直接用js操作，只能通過綁定數據來修改；json是頁面的配置文件一般用不著。根目錄下的app.js,app.json,app.wxml作用和pages下面的作用類似,只不過pages下面的是頁面級的,根目錄下的是成個應用級的>。utils下面定義了一個轉換時間格式工具函數，然后通過module.exports將函數暴露出去，再在logs.js中通過require引入。
二、改造index頁面
知道了小程序的結構就可以動手開始做了，首先把index頁面改造一下，把用戶頭像上的點擊事件去掉，然后再新增兩個按鈕，用來跳轉到游戲主界面和游戲成績界面。
1.界面，bindtap相當于html的onclick
<!--index.wxml--> <view class="container"> <view class="userinfo"> <text class="userinfo-nickname"></text> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> <text class="userinfo-nickname">你好</text> </view> <view class="usermotto" > <text class="user-motto" bindtap="startGame">{{motto}}</text> </view> <view style="margin-top:30rpx; "> <text class="user-motto" bindtap="viewScore" >查看排名</text> </view> </view> 2.index.js 文件的Page中增加兩個處理點擊事件的函數,用wx.navigateTo來跳轉的目標頁
//index.js //獲取應用實例 var app = getApp() Page({ data: { motto: '開始游戲', userInfo: {}, welcome:'你好' }, //事件處理函數 startGame: function() { wx.navigateTo({ url: '../game/game' }) },viewScore: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //調用應用實例的方法獲取全局數據 app.getUserInfo(function(userInfo){ //更新數據 that.setData({ userInfo:userInfo }) }) } }) 3.index.wxss中增加游戲背景圖
page{background: url('../images/gamebg.jpg') center top; } 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
