全民飞机大战（微信小程序版游戏）----微信开发者工具

一、微信开发者工具

微信开发者工具是一款专业高效的小程序开发工具，用户通过软件可以制作微信小程序和给公众号添加新的功能使用，非常地方便。

下载地址：

 稳定版 稳定版 Stable Build | 微信开放文档 (qq.com)

源码地址：https://download.csdn.net/download/m0_51152186/85135337?spm=1001.2014.3001.5503

二、微信小程序开发wxml、json、js、wxss四类核心文件

1.wxml文件

wxml文件的意义类似与hmtl,写法也是采取的标签式写法。主要负责本页面的界面展示，以及事件的绑定等等。

<view>
    <canvas canvas-id="plainId" class="canvas" bindtap="click" bindtouchmove="move"></canvas>
    <view id="modal" class="modal {{modalHidden}}">
        <view class="header">飞机大战分数</view>
        <view class="content" id="content">{{score}}</view>
        <view class="footer">
            <button bindtap="startGame">继 续</button>
        </view>
    </view>
</view>

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

可以看出WXML文件的格式主要是标签格式，如下所示:

<标签名 属性名1="属性值1" 属性名2="属性值2"> ... </标签名>

其中：

所有的元素都需要闭合标签
所有的元素都必须正确嵌套，符合层级关系
属性值必须使用引号包围
标签必须使用小写
wxml中连续多个空格会被合并为1个空格.
 2.wxss文件

1.作用

wxss文件是样式控制文件，类似与css文件，主要用于与wxml文件一起使用，优化wxml页面。
 

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

.modal {
    width: 360px;
    height: 300px;
    top: 100px;
    left: 55%;
    margin-left: -200px;
    border: #666 solid 2px;
    border-radius: 8px;
    position: absolute;
    font-size: 20px;
    background-color: #dddddd;
    z-index: 1002;
}

.modal_hide {
    display: none;
}

.header {
    height: 45px;
    line-height: 45px;
    font-weight: bold;
    text-align: center;
    border-bottom: #666 solid 2px; 
}

.content {
    height: 210px;
    line-height: 210px;
    font-weight: bold;
    text-align: center;
}

.footer {
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-top: #666 solid 2px; 
}

.footer button {
    width: 120px;
    height: 42px;
    border: #666 solid 2px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    left: 50%;
    margin-left: -60px;
    color: #333;
    cursor: pointer;
}

 可以看出格式是多个样式类，每个类里都是样式键值对，不能嵌套，格式如下：

.样式类名{ key:value }

3. json文件

1.作用

JSON文件主要用于描述页面属性。

{
  "pages": [
    "pages/plain/plain",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

根据不同标签，宏观描述和控制整个项目的属性,其他文件夹中的json用来描述当前文件夹中的页面属性，例如：执行index.wxml时，优先按index.json中描述的来的来，再按app.json中描述的来。 

4.js文件

1.作用

主要负责页面的业务逻辑：包括生命周期，事件的绑定处理，数据的初始化等等。算是让小程序能动起来，而不只是静态的展示页面。
 

module.exports = {
    setup(target) {
        let listeners = [];

        Object.assign(target, {
            on(type, handle) {
                if (typeof handle == 'function') {
                    listeners.push([type, handle]);
                }
            },
            fire(type, ...params) {
                listeners.forEach(([listenType, handle]) => type == listenType && handle(...params));
            },
            removeAllListeners() {
                listeners = [];
            }
        })
    }
}

• wxml、wxss、 json主要是程序的前台文件，控制前台样式。
• js主要是程序的后台文件，控制后台数据和事件。

4.运行效果图

 手机端微信小程序预览

 

 项目源码博客主页资源处下载，瑞斯拜~~~