집 > 기사 > 웹 프론트엔드 > 위챗 미니 프로그램 플립게임 구현

위챗 미니 프로그램 플립게임 구현

小云云원래의: 2018-01-29 09:22:303193검색

이 글은 주로 카드 뒤집기 게임의 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. 인덱스 페이지 변환

미니 프로그램의 구조를 알고 나면 먼저 인덱스 페이지를 변환하고 사용자 아바타에서 클릭 이벤트를 제거한 다음 버튼 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; }

위챗 미니 프로그램 플립게임 구현

관련 기사