1、下载微信开发工具，

2、登录微信公众平台，注册账号

https://mp.weixin.qq.com/

打开微信小程序,将AppId复制过去，自己取一个项目名称。

小程序项目的结构：

小程序项目的配置文件：（不需要自己创建）

1、Project.config,json

2、入口文件（重要）：app.json

3、应用程序的启动文件;app.js 作用是监听小程序的生命周期

4、通用样式配置文件：用于配置通用的样式； app.wxss.

这四个文件的格式就是小程序的四种文件格式。

WXSS.:用于设置小程序页面的通用格式和CSS功能相同。

格式：

ＸＸＸ（选择器）｛指定具体的模样｝

小程序的所有资源文件不得超过２０Ｍ，

ＷＸＭＬ：文件等同于ｈｔｍｌ文件，用于组织页面骨架的文件。

小程序页面跳转，

在WXML中添加绑定事件－》ｂｉｎｄｔａｐ＝＂函数名＂

２、在ｊｓ中实现绑定的函数。

小程序事件绑定：

每一个函数相当于一个ｊｓｏｎ对象，及键值对

页面跳转：

Ｗｘ，ｎａｖａｇｉｔｅＴｏ（｛

ｕｒｌ：＂路由地址＂

｝）

跳转页面：wx.navigateTo();

正题来了：

贴几张效果图：

第一步：

创建app的三个不同文件，

首先，app.json

{
  "pages": [
    "pages/home/home",
    "pages/one/one"
  ],
  "window": {
    "navigationBarBackgroundColor": "#BC8F8F",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "火眼金睛识颜色",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  }
}

代码解析：json格式的文件是不能有注释的，否则肯定会报错。

1、 Pages=>数组【】路由:

设置小程序有多少个页面，并设置启动首页。利用数组设置页码顺序。

数组中的元素使用“” 或者‘’ 即把首页放在第一个位置，第二页放在第二个位置。编译一下，自动创建相关文件。

2、 Window窗口：

1、导航条的样式

2、标题文字

3、文字样式

4、是否使用下拉刷新

2、app.wxss 文件（设置整个文件的背景）

page {
    /* 设置页面的宽和高*/
  width: 100%;
  height: 100%;

  /* 背景颜色*/
  /* background-color: #BC8F8F; 
  center 以中心等比缩放
  no-repeat 让背景不重复*/
  background: url("http://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz/noz2jw2hPlVjicCpoqe2UMMQibEuRz4LfRthbHovkKA7ib3w8Io3TNp70xhbqibV4p89Sgofr2LaTeQ80RX8a7je6g/0?wx_fmt=gif")
  no-repeat 
  center;
  /*设置背景的缩放方式  */
  background-size:  cover;
}

其中background url: 在网页上右键复制你想加的图片地址就好。

3、app.js文件

输入App,根据提示加载进几个原始的函数就好。

home文件相关代码：

1、home.wxml文件。（首页界面）

<view>
<!--1、给按钮添加一个点击事件，触发entryGame函数  -->
<button bindtap='entryGame'>进入眼力测试</button>

</view>

很简单，创建一个进入游戏的按钮。

2、home.wxss文件

/* pages/home/home.wxss */
/*找到按钮外的容器  */
view{
  /*设置view的高度和page的高度相同  */
  height: inherit;
/*通过设置容器设置按钮  */
/*弹性盒  */
display: flex; 
/*设置view元素 垂直居中  */
align-items: center;

}
button{
  /*颜色表示方式：
  字符串、十六进制、rgba(有透明度)  */
 
  background: rgba(100, 149, 237, 0.4)
}

3、home.js文件

其中两个函数,其他不变。

Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },
  // 实现点击事件触发的函数
entryGame:function(){
// 跳转页面：wx.navigateTo();
wx.navigateTo({
  url: '/pages/one/one',
})
},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  return{
    title:" come on baby !",
    path:"/pages/home/home",
    imageUrl:"../../res/image.jpg"
  }
  }
})

游戏界面的相关文件代码：

1、one.xml文件

<!--游戏页面分为两大部分
1】 工具栏部分
2】游戏主界面
  -->
  <!--class：类选择器  ：可以通过class指定的字符串来找到这个元素  -->
  <!--在wxss中可以通过 .class指定的字符串找到这个元素  -->

  <!--整个主界面的容器  -->
<view class='container'>

<!--工具的容器  -->
<view class='tool_container'>
<view class='stepView'>
<button class='step'>剩余{{time}}秒</button>
<button class='step'>{{step}}步</button>
</view>
</view>

<!--游戏的 容器  -->
<view class='game_container'> 

<!--循环渲染 wx：for "{{数组}}"  -->
<!--WXML中绑定js中的数据通过双花括号绑定的  -->
<view class='item' wx:for="{{views}}"
 style='width:{{colorWidth}}px;height:{{colorWidth}}px;margin:{{space}}px 0 0 {{space}}px; background:{{item.color}}; opacity:{{item.opacity}};border-radius:{{space}}px'
 bindtap='chooseView' data-opacity='{{item.opacity}}'>
<!--末尾不能加分号  -->
</view>
</view>

<!--row:2 每点击对了一次色块，行数增加1  -->
<!--计算每一个色块的间距  和本身的宽度  -->
<!--屏幕宽度750px  平均宽度 除以2
 间距宽度：得到平均宽度后*0.1
  色块长度 ：平均宽度 （总共宽度-间距宽度）/row -->
<!--颜色特殊色块的区分  -->

<view class='share_container'>
<button open-type='share'>分享有惊喜</button>
</view>


</view>

2、one.wxss文件

/* pages/one/one.wxss */
 /* 让所有元素在同一行显示，如果宽度不够就在下一行显示 */
.item{

  float: left;
}
.game_container {
  /*在所有微信小程序中 认为所有设备的宽度 都是750 rpx
  rpx 是一个响应式单位  */
  width: 750rpx;
  height: 750rpx;
  position: absolute;
  top: 50%;
  margin-top: -375rpx;
  /* background: rgba(red, green, blue, alpha) */
}
.tool_container.stepView.step{
  display: flex;
  /*平均分布 */
  justify-content: space-around;
  /*给每一个元素增加一个上下间距  */
  padding: 20rpx 0;
  background: red

}
.share_container{
  width: 100%;
  position: fixed;
  left: 0;
  bottom:  0;
 
}
/*后代选择器  */
.share_container button {
 background: rgba(219, 112, 147, 0.9);
 color:brown;
}

one.js文件

// pages/one/one.js
Page({

  /**
   * 页面的初始数据
   */
  // wxml和js 两个文件内容的 互相绑定
// 在微信小程序中可以实现数据的双向绑定（两端的数据有一方改变，另一方也会改变，及同时更新）
// 只要需要绑定的数据都需要 写在data里
  data: {
  time:30,//倒计时
  views:[],//色块的信息
  row:2,//默认游戏的行数 在wxml中 根据 row 创建色块的个数
  space:0,//每一个色块的间距
  colorWidth:0,//色块的宽度
  color:"rgb(178,58,238)",
  step:0,
  },

  /**
   * 生命周期函数--监听页面加载
   */

  //onLoad函数 只在页面启动的时候调用一次
  //可以在函数中 去声明 只在 js中 使用 的属性  
  onLoad: function (options) {
    //初始化屏幕高度
    //this表示window
  this.width = 750;
  this.titles = ["戴好眼镜重来一次吧","正常正常，不错不错","眼神挺好使啊！","火眼金睛！"]
  wx.getSystemInfo({
    success: function(res) {
      console.log(res);
      this.width = res.screenWidth;
    }.bind(this)
  })

  this.loadGame();
  this.reStartTimer();

  },
//加载游戏函数
loadGame:function(){
  //计算色块的宽度
  var tempWidth = this.width/this.data.row;

//给初始化在data中的属性賦值
  this.setData({
    space: tempWidth * 0.1
  });
  //计算色块宽度
  this.setData({
    colorWidth:(this.width - this.data.space*(this.data.row + 1))/this.data.row
  });

  var tempList = [];//色块的临时数组，提高代码效率
  // 根据行数生成指定的色块数量
  var color = this.randColor();
  var index = parseInt(Math.random()*this.data.row*this.data.row);
  for (let i = 0; i < this.data.row * this.data.row;i++){
 let info = {};
 info.color = color;//随机颜色
 //0.9 调节透明度，数字越小透明度越低，游戏越简单。
 info.opacity = i == index?0.8:1;//透明度，随机抽取
 tempList.push(info);//push在数组中最后一个位置添加元素
  }
  //更新色块的数组
this.setData({
  views:tempList
});
},


//封装一个随机颜色的函数：
randColor:function(){
  // rgb 形式，随机抽选0-255 之间的一个数字，因此为一个随机颜色
   var colorString = "";
   var r = parseInt(Math.random()*256);
   var g = parseInt(Math.random() * 256);
   var b = parseInt(Math.random() * 256);
   colorString = "rgba("+r+","+g+","+b+",1)";
   return colorString;
},
//点击色块触发的事件
  chooseView:function(event){
    var opacity = event.currentTarget.dataset.opacity;
    opacity == 1 ?this.fail():this.sucess();//更具色块的不透明度区分点击的是否正确
    this.loadGame();


  },


  //失败
  fail:function(){
    clearInterval(this.timer);
var result = "";
    if(this.data.step<=5){
result = this.titles[0];
    }else if(this.data.step > 5&& this.data.step<= 15){
      result = this.titles[1];
    } else if (this.data.step > 15 && this.data.step <= 30) {
      result = this.titles[2];
    } else if (this.data.step > 30) {
      result = this.titles[2];
    }
    wx.showModal({
      title: '结束啦！',
      content: result,
      showCancel:false,
      confirmText:'承认吧',
      success:(res)=>{
       this.setData({
      row:2,
      step:0,
      time:30
    });
    wx.navigateBack();
      }
    })
  },
  //成功
  sucess:function(){
    this.setData({
      time:++this.data.time,//点对一次增加一秒钟
      step:++this.data.step
    });

    if(this.data.step%3===0){
      var temp = this.data.time += 1;
      this.setData({
        row: ++this.data.row,
        time: temp//点对三次 增加2秒钟
     
      });
    }
  },



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  
  },
  reStartTimer:function(){
    this.timer = setInterval(() => {//es6的箭头函数
      this.setData({
        time: --this.data.time
      });
      if (this.data.time == 0) {
        this.fail();
      }
    }, 1000);
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  clearInterval(this.timer);//清楚定时器
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    //暂定定时器
    clearInterval(this.timer);
  return{
    title:"是谁的小眼睛还没有看这里，快来测测你辨色力吧！",
    path:"/pages/one/one",
    imageUrl: "../../res/image.jpg",
    success:()=>{
      var temp = this.data.time + 5;
      this.setData({
      time:temp
      });
      //重启定时器

      this.reStartTimer();

    },
    //不用添加绑定
    fail:()=>{
      this.reStartTimer();
    }
  }
  }
})

以上基本上就是全部代码，相关解释基本上都在注释里。

记录我的第一个简单微信小程序——分辨颜色（测眼力）