Mise en œuvre de la version mini-programme WeChat du mini-jeu de retournement de cartes

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

L'exemple dans cet article partage avec tout le monde le mini WeChat. version du programme. Le code spécifique du jeu de flip du programme est pour votre référence. Le contenu spécifique est le suivant

1 Créez un nouveau projet de démarrage rapide pour voir la structure. 🎜>
Développer des outils sur WeChat Cliquez sur Ajouter un projet, ne sélectionnez aucun application et cochez "Créer un projet à démarrage rapide dans le répertoire actuel".

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 fichier 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.index.js ajouter deux fonctions pour gérer les événements de clic dans la page, 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.index.wxss Jeu ajouté image d'arrière-plan dans

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun pour en savoir plus. contenu, veuillez suivre le site Web chinois PHP !

Recommandations associées :

L'applet WeChat implémente la fonction de sélection des villes en fonction des lettres

L'applet WeChat imite les villes Meituan sélectionnées implémentation

Jeu Snake implémenté par l'applet WeChat [avec code source]

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!