(白嫖)新手练习小程序入门项目,建立属于自己的一个微信小程序!

“ 详细介绍一个微信小程序项目——剪刀石头布游戏，此项目较为简单，但麻雀虽小五脏俱全，包含小程序的所有要求，只有将最基础的学习好，才能有所成就。”

在此说明：微信小程序包含微信小游戏，微信小游戏不包含微信小程序。

主要语言：JavaScript==xx.js、html==wxml、css==wxss、node

工具：微信开发者工具

01

—

视频展示

具体指引详见《https://live.csdn.net/v/165058》

02

—

介绍与趋势

02

—

代码展示

部分代码展示：

（1）项目准备

（2）编码实现

index.js代码如下：

//index.js//获取应用实例var app = getApp()var imagePaths = ['../../images/scissors.png', '../../images/stone.png', '../../images/cloth.png'];var imageIndex = 0;


Page({  data: {    imagePath: imagePaths[0],    title: '开始',    isRunning:false,    userInfo: {},

  },  //事件处理函数  bindViewTap: function () {    wx.navigateTo({      url: '../logs/logs'    })  },  change: function (e) {    imageIndex++;    if (imageIndex > 2) {      imageIndex = 0;    }
    this.setData(      {        imagePath: imagePaths[imageIndex]      }    )  },   guess: function (e) {    let isRunning = this.data.isRunning;    if (!isRunning) {      this.setData(        {          title: '停止',          isRunning:true        }      );
      this.timer = setInterval((function () {        this.change()      }).bind(this), 100);    }    else {      this.setData(        {          title: '开始',          isRunning:false        }      );
      this.timer && clearInterval(this.timer);    }
  },  onLoad: function () {    console.log('onLoad')    console.log('onLoad11')    var that = this
    //调用应用实例的方法获取全局数据    app.getUserInfo(function (userInfo) {      //更新数据      that.setData({        userInfo: userInfo      })    })  }})

index.wxml代码如下：

<!--index.wxml--><view class="container">    <text class="finger_guessing">猜拳游戏</text>    <view   class="userinfo">    <image class="userinfo-avatar" src="{{imagePath}}" background-size="cover"/>        <button bindtap="guess">{{title}}</button>  </view></view>

index.wxss代码如下：

/**index.wxss**/.userinfo {  display: flex;  flex-direction: column;  align-items:center;  margin-top: 50px;}
.userinfo-avatar {  width: 500rpx;  height: 500rpx;  margin: 40rpx;

}
.userinfo-nickname {  color: #aaa;}
.finger_guessing {  color: #F00;  font-size: 30px;  margin-top: 20px;}

由于代码量太大，所以就不一一展示了。

具体指引详见

《https://download.csdn.net/download/qinluyu111/18448520》

写在最后