집 > 기사 > 위챗 애플릿 > 카드 뒤집기 미니 게임의 WeChat 미니 프로그램 버전 구현

카드 뒤집기 미니 게임의 WeChat 미니 프로그램 버전 구현

不言원래의: 2018-06-27 16:29:163303검색

이 글에서는 주로 카드 뒤집기 게임의 WeChat 미니 프로그램 버전을 자세히 소개하며, 관심 있는 친구들이 참고할 수 있습니다.

이 글의 예시는 위챗 미니 프로그램 버전의 구체적인 내용을 알려드립니다. 카드 뒤집기 게임의 코드는 참고용입니다. 구체적인 내용은 다음과 같습니다.

1. 새로운 빠른 시작 프로젝트를 생성하여 구조를 확인하세요.

WeChat 개발 도구에서 프로젝트 추가를 클릭하고 앱 ID 없음을 선택하세요. 을 클릭하고 "현재 디렉터리에 빠른 시작 프로젝트 만들기"를 선택하세요.

루트 디렉터리에는 페이지와 유틸리티라는 두 개의 디렉터리와 3개의 앱 파일이 있는 것을 볼 수 있습니다. 페이지는 미니 프로그램의 페이지를 저장하며 각 페이지에는 자체 독립 폴더가 있습니다. 페이지는 4개의 파일로 구성됩니다. js 파일은 WeChat에서 정의한 스타일 파일입니다. 구문은 css와 동일하지만 wxml 파일은 미니의 인터페이스를 정의하는 데 사용됩니다. 프로그램이며 그 기능은 html과 유사하지만 WeChat에서 사용자 정의한 일부 태그만 사용할 수 있으며, 페이지 요소는 js로 직접 작동할 수 없으며 데이터 바인딩을 통해서만 수정할 수 있습니다. json은 페이지의 구성 파일이며 일반적으로 사용되지 않습니다. 루트 디렉터리에 있는 app.js, app.json, app.wxml의 기능은 페이지 아래에 있는 기능은 페이지 수준에 있는 반면 루트 디렉터리에 있는 기능은 애플리케이션 수준>에 있다는 점을 제외하면 페이지 아래에 있는 기능과 유사합니다. 시간 형식을 변환하는 도구 기능은 아래 utils에 정의되어 있으며, module.exports를 통해 해당 기능이 노출되고, log.js의 require를 통해 소개됩니다.

2. 인덱스 페이지 변환

미니 프로그램의 구조를 알고 나면 먼저 시작할 수 있습니다. 먼저 인덱스 페이지를 변환하고 사용자 아바타의 클릭 이벤트를 제거한 다음 버튼을 두 개 더 추가합니다. 게임 메인 인터페이스와 게임 결과 인터페이스로 이동하는 데 사용됩니다.

1. 인터페이스는 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 파일 페이지는 클릭 이벤트를 처리하는 두 가지 기능을 추가하고 wx.navigateTo를 사용하여 대상 페이지로 이동합니다

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
 motto: &#39;开始游戏&#39;, 
 userInfo: {}, 
 welcome:&#39;你好&#39; 
 }, 
 //事件处理函数 
 startGame: function() { 
 wx.navigateTo({ 
  url: &#39;../game/game&#39; 
 }) 
 },viewScore: function() { 
 wx.navigateTo({ 
  url: &#39;../logs/logs&#39; 
 }) 
 }, 
 onLoad: function () { 
 console.log(&#39;onLoad&#39;) 
 var that = this 
 //调用应用实例的方法获取全局数据 
 app.getUserInfo(function(userInfo){ 
  //更新数据 
  that.setData({ 
  userInfo:userInfo 
  }) 
 }) 
 } 
})

3.index.wxss 게임 배경 이미지 추가

page{background: url(&#39;../images/gamebg.jpg&#39;) center top; }

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트로 !

카드 뒤집기 미니 게임의 WeChat 미니 프로그램 버전 구현

관련 기사