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

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

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

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

工具：微信开发者工具

—

视频展示

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

—

介绍与趋势

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

未来小程序和微信将实现更佳的链接，用户搜索小程序更加方便，这就是小程序的未来发展方向及优势。

—

代码展示

部分代码展示：

（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》

写在最后

以上就是今天要讲的内容，本文仅仅简单介绍了一个基础的微信小程序案例，而微信开发文档提供了大量能使我们快速便捷地学习实现微信小程序的插件和方法。希望通过此次学习，你能拥有属于自己的微信小程序，并不断前进，一步一步成为大佬。如果此篇文章确实对你有所帮助，请点一个赞，谢谢您的评价。此文章若有雷同，请联系本人，谢谢。最后再奉上源码，公众号回复 051 即可获取下载地址关注我，不迷路