新手练习小程序入门项目，建立属于自己的一个微信小程序！

新手练习微信小程序入门项目

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

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

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

工具：微信开发者工具

---

目录

新手练习微信小程序入门项目

前言

一、项目介绍

二、项目展示

1.项目准备

2.主页展示

总结

---

前言

微信小程序(wei xin xiao cheng xu),简称小程序，缩写XCX，英文名Mini Program，是一种不需要安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。从微信小程序近期开放的功能明显看出，小程序的发展前景十分看好，并且随着时间的流逝，相信将会开放更多功能，实现更多的需求。未来小程序和微信将实现更佳的链接，用户搜索小程序更加方便，这就是小程序的未来发展方向及优势。

---

一、项目介绍

以视频展示：

点击链接跳转：

https://live.csdn.net/v/165058

二、项目展示

1.项目准备

图代码如下：

var imagePaths = ['../../images/scissors.png', '../../images/stone.png', '../../images/cloth.png'];
var imageIndex = 0;

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;
}

由于代码量太大，所以就不一一展示了，代码已上传CSDN官网，欢迎学习。

下载地址：

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

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了一个基础的微信小程序案例，而微信开发文档提供了大量能使我们快速便捷地学习实现微信小程序的插件和方法。希望通过此次学习，你能拥有属于自己的微信小程序，并不断前进，一步一步成为大佬。