(白嫖)新手練習(xí)小程序入門項(xiàng)目,建立屬于自己的一個(gè)微信小程序!

“?詳細(xì)介紹一個(gè)微信小程序項(xiàng)目——剪刀石頭布游戲，此項(xiàng)目較為簡(jiǎn)單，但麻雀雖小五臟俱全，包含小程序的所有要求，只有將最基礎(chǔ)的學(xué)習(xí)好，才能有所成就。”

在此說(shuō)明：微信小程序包含微信小游戲，微信小游戲不包含微信小程序。

主要語(yǔ)言：JavaScript==xx.js、html==wxml、css==wxss、node

工具：微信開(kāi)發(fā)者工具

01

—

視頻展示

具體指引詳見(jiàn)《https://live.csdn.net/v/165058》

02

—

介紹與趨勢(shì)

02

—

代碼展示

部分代碼展示：

（1）項(xiàng)目準(zhǔn)備

（2）編碼實(shí)現(xiàn)

index.js代碼如下：

//index.js//獲取應(yīng)用實(shí)例var app = getApp()var imagePaths = ['../../images/scissors.png', '../../images/stone.png', '../../images/cloth.png'];var imageIndex = 0;


Page({  data: {    imagePath: imagePaths[0],    title: '開(kāi)始',    isRunning:false,    userInfo: {},

  },  //事件處理函數(shù)  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: '開(kāi)始',          isRunning:false        }      );
      this.timer && clearInterval(this.timer);    }
  },  onLoad: function () {    console.log('onLoad')    console.log('onLoad11')    var that = this
    //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)    app.getUserInfo(function (userInfo) {      //更新數(shù)據(jù)      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;}

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

具體指引詳見(jiàn)

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

寫(xiě)在最后