Implementation of WeChat Mini Program Flip Game

This article mainly introduces the WeChat mini program version of the card flipping game in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

1. Create a new quick start project and look at the structure

Click Add Project in the WeChat development tool, select No appid, and check "In the current directory" Create a quick start project".

You can see that there are two directories, pages and utils, and 3 app files in the root directory. pages stores the pages of the mini program, and each page has its own independent folder. A page consists of 4 files. The js file is the program logic; wxss is a style file defined by WeChat. The syntax is the same as css, but it supports fewer styles; the wxml file is used to define the interface of the mini program, and its function is similar to html, but only Some tags customized by WeChat can be used, and page elements cannot be directly operated with js and can only be modified by binding data; json is the configuration file of the page and is generally not used. The functions of app.js, app.json, and app.wxml in the root directory are similar to those under pages, except that those under pages are at the page level, while those under the root directory are at the application level>. A tool function for converting time format is defined below in utils, and then the function is exposed through module.exports, and then introduced through require in logs.js.

2. Transform the index page

Once you know the structure of the mini program, you can start. First, transform the index page and add the user avatar. Remove the click event, and then add two buttons to jump to the game main interface and game results interface.

1. Interface, bindtap is equivalent to onclick of html

<!--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.Add two to the Page of the index.js file Function to handle click events, use wx.navigateTo to jump to the target page

//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.Add game background image to index.wxss

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

Related recommendations:

WeChat applet function throttling how to prevent multiple click jumps

How to obtain user information through WeChat mini program

A WeChat mini program version of Zhihu example sharing

The above is the detailed content of Implementation of WeChat Mini Program Flip Game. For more information, please follow other related articles on the PHP Chinese website!