Mise en œuvre du jeu Flip du programme WeChat Mini

Cet article présente principalement en détail la version du mini-programme WeChat du jeu de cartes à bascule. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

1. Créez un nouveau projet à démarrage rapide et voyez la structure

Cliquez sur Ajouter un projet dans l'outil de développement WeChat, sélectionnez Aucun app et cochez « Dans le répertoire courant "Créer un projet de démarrage rapide".

Vous pouvez voir qu'il y a deux répertoires, pages et utils, et 3 fichiers d'application dans le répertoire racine. Pages stocke les pages du mini programme et chaque page possède son propre dossier indépendant. Une page est composée de 4 fichiers. Le fichier js est la logique du programme ; wxss est un fichier de style défini par WeChat. La syntaxe est la même que celle du css, mais il prend en charge moins de styles ; programme, et sa fonction est similaire au HTML, mais seules certaines balises personnalisées par WeChat peuvent être utilisées, et les éléments de la page ne peuvent pas être directement exploités avec js et ne peuvent être modifiés qu'en liant les données. json est le fichier de configuration de la page et est généralement ; pas utilisé. Les fonctions de app.js, app.json et app.wxml dans le répertoire racine sont similaires à celles sous pages, sauf que celles sous pages sont au niveau de la page, tandis que celles sous le répertoire racine sont au niveau de l'application. Une fonction d'outil pour convertir le format de l'heure est définie ci-dessous dans utils, puis la fonction est exposée via module.exports, puis introduite via require dans logs.js.

2. Transformer la page d'index

Une fois que vous connaissez la structure du mini programme, vous pouvez commencer par transformer la page d'index et ajouter le. avatar de l'utilisateur. Supprimez l'événement de clic, puis ajoutez deux boutons pour accéder à l'interface principale du jeu et à l'interface des résultats du jeu.

1. Interface, bindtap est équivalent au onclick de 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. js file Deux fonctions qui gèrent les événements de clic, utilisez wx.navigateTo pour accéder à la page cible

//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. Ajoutez une image d'arrière-plan du jeu à indexer. wxss

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

Recommandations associées :

Comment éviter plusieurs sauts de clics dus à la limitation du mini-programme WeChat fonction

Comment obtenir des informations utilisateur via le mini-programme WeChat

Une version du mini-programme WeChat du partage d'exemples Zhihu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!