一、微信开发者工具

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

下载地址：

稳定版稳定版 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.运行效果图

手机端微信小程序预览

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

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

注册微信小程序下载并使用开发者工具
微信小程序开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序. 申请帐号进入小程序注册页根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号. 在这个小程序 ...
微信小程序之目前为止史上最全的微信小程序项目实例，微信小程序实战学习
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
适合编程初学者的开源项目：小游戏2048（微信小程序版）
目标为编程初学者打造入门学习项目,使用各种主流编程语言来实现. 2048游戏规则一共16个单元格,初始时由2或者4构成. 1.手指向一个方向滑动,所有格子会向那个方向运动. 2.相同数字的两个格子 ...
php 翻牌,微信小程序版翻牌小游戏的实现
这篇文章主要为大家详细介绍了微信小程序版翻牌小游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序翻牌游戏的具体代码,供大家参考,具体内容如下一.新建一个quick ...
用mpvue实现的微信小程序版cnode社区
五一放假,没出去玩,想熟悉下vue的开发流程,又想体验下mpvue,于是写了个练手项目.一个用mpvue实现的cnode微信小程序版. 代码在仓库.欢迎各位star.fork.issue.pr.目前已 ...
webstorm下载微信小程序插件_微信电脑版可以打开小程序喽前提你得下载测试版...
据微信开发者团队消息最新推出的小程序开发套件已经支持开发者面向电脑版微信测试微信小程序相关功能. 开发者下载新版本开发套件即可针对电脑版微信进行小程序调试,不过似乎也没有什么需要特别调试的地方. 既然 ...
微信小程序版博客——开发汇总总结（附源码）
花了点时间陆陆续续,拼拼凑凑将我的小程序版博客搭建完了,这里做个简单的分享和总结. 整体效果对于博客来说功能页面不是很多,且有些限制于后端服务(基于ghost博客提供的服务),相关样式可以参考截图或 ...
视频直播终端开发之微信小程序版
前言由于项目需要最近接到公司的一个研发任务,尝试开发视频直播功能,要求双方可以对讲互动,并提供微信小程序.PC.Web等版本.由于之前对流媒体技术有所积累,这个任务只要满足功能演示,因此这个任务对我 ...
微信小程序（游戏）----拼图游戏（设计思路）
微信小程序(游戏)----拼图游戏(设计思路) 设计思路 1.将一张海报等分成 N*N 的矩阵方法一:利用两个组件循环完成,view组件和image组件,view组件作为盒子规定大小--超出部分不显 ...

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

一、微信开发者工具

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

1.wxml文件

3. json文件

4.js文件

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

最新文章

热门文章