微信开发者工具官方版

微信开发者工具简介

微信开发者工具提供小程序和小游戏开发功能。用户可以在软件上开发新的游戏，提交给微信使用。经过审核后，就可以将自己的小程序或者小游戏部署到微信上，从而在微信上使用这些工具。这个软件还是很简单的。您可以直接在软件界面中编辑您的项目，成功加载项目后可以开始编辑代码，也可以使用内容编辑器编辑代码。之后可以在手机上预览效果。你也可以用这个软件设计一个网页微信官方账号，直接编辑你的网页界面，设计一个新的微信官方账号页面效果。所有设计项目都可以在手机上预览，对需要开发微信小程序的朋友非常有帮助！

微信开发者工具软件功能

1.菜单栏

微信开发者工具

切换:快速切换登录用户。

关于:关于开发人员工具

更新:版本更新

开发者论坛:转到开发者论坛

开发人员文档:转到开发人员文档

调试:调试开发人员工具和调试编辑器；如果您遇到一个看起来像是开发人员工具或编辑器的bug，您可以打开调试工具查看是否有任何错误。欢迎在论坛反馈相关问题。

替换模式:在微信官方账号网页调试和小程序调试之间快速切换。

退出:退出开发工具。

2.项目

新项目:快速新项目

最近打开:可以查看最近打开的项目列表，选择是否输入对应的项目。

查看所有项目:一个新窗口打开启动页面的项目列表页面。

关闭当前项目:关闭当前项目，返回启动页面的项目列表页面。

3.文档

新文件

4.救援

全部保存

5.关闭文件。

编辑:可以查看编辑相关的作品和快捷方式。

6.工具

编译:编译当前小程序项目。

刷新:与编译功能一致，对应快捷键ctrl(？)是出于历史原因而保留的。)+ R

配置:可以选择正常编译或自定义编译条件。

前后切换:模拟后台运行的客户端小程序返回前台的操作。

清除缓存:清除文件缓存、数据缓存和授权数据。

界面:控制主界面窗口模块的显示和隐藏。

7.设置:

外观:控制编辑器的颜色主题、字体、字号、行距。

设置:控制文件保存的行为和编辑器的性能。

代理设置:选择直连网络、系统代理和手动代理设置。

设置:设置是否接受特定类型的

8.工具栏

点击用户头像打开个人中心，可以方便的切换用户，查看开发者工具收到的消息。

用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要显示一个模块。

工具栏中间可以选择普通编译，也可以新建一个，选择自定义条件进行编译预览。

通过剪切背景按钮，可以模拟小程序进入背景。

工具栏提供了清除缓存的快速访问。可以轻松清除工具上的文件缓存、数据缓存和后台授权数据，方便开发者调试。

工具栏的右侧是开发辅助功能的区域，您可以在这里上传代码、管理版本和查看项目详细信息。

9.工具栏管理

单击工具栏上的鼠标右键，打开工具栏管理。

10.模拟器

模拟器可以在微信客户端模拟小程序的性能。小程序的代码编译后可以直接在模拟器上运行。

开发人员可以选择不同的设备，或者添加自定义设备来调试小程序在不同尺寸模型上的适配。

在模拟器底部的状态栏中，可以直观地看到当前运行的小程序的场景值、页面路径和页面参数。

1.窗户

单击模拟器/调试器右上角的按钮，在窗口中显示模拟器/调试器。

微信开发者工具软件特色

1.微信开发者工具可以帮助用户设计自己的小程序。

2.用户可以通过这个软件开发新的软件，并部署在微信上。

3.该软件提供了一个编辑器，可以在创建新项目时打开。

4.可以在软件中开发游戏，在微信中添加小游戏。

5.可以在软件中制作网页，新建微信官方账号网页。

6.软件功能还是很多的，编辑器可以满足大部分用户的开发需求。

7.设计好的程序可以在手机上预览，并自动生成二维码预览链接。

8.通过这个软件，你可以更好地开发你需要的软件。

9.可以用自己的微信号调试微信网页授权。

10.可以调试验证页面的-SDK相关功能和权限，模拟大部分SDK的输入输出。

11.您可以使用集成的Chme开发工具来帮助开发。

微信开发者工具安装方法

1.打开微信_ devtools32 _ v1.02.2004020.exe软件直接启动，点击下一步。

2.提示软件安装协议，然后单击接受。

3.软件的安装地址C:Pgram Files (x86)腾讯微信网页开发工具

4.软件的安装进度，等待安装结束。

5.提示软件已安装，单击“完成”立即启动。

微信开发者工具使用说明

1.打开微信web developer工具，提示使用微信登录，在软件界面直接扫描登录。

2.如图，提示小程序设置，点击添加按钮，进入程序项目创建界面。

3.项目名称minigram-1，设置目录和ID，开发模式可以选择小程序和插件。

4.applet云开发为开发人员提供了完整的云支持，如数据库、存储和云功能。无需搭建，使用平台提供的API开发核心业务，小程序可以快速启动迭代。

5.导入项目功能，在软件界面填写APPID，然后点击导入按钮。

6.这里是微信官方账号的网页编辑界面。如果可以设计网页，可以在软件下开始编辑。

7.软件设置:打开上次修改的项目，使用U加速模式，使用新的文件监控模块，在手机上启动自动预览，在PC上启动自动预览。

8.外观设置界面，可以选择新的颜色，设置模拟器的位置。

9.端口是安全的，工具的服务端口已经关闭。命令行和HTTP都不能调用该工具。

10.清除开发人员工具cookie、清除开发人员工具缓存、清除地址栏历史和清除文件缓存。

11.预览功能，如果需要在手机上查看微信官方账号网页，可以在这里扫描二维码。

微信开发者工具教程

快速开始

本文将利用游戏提供的能力制作一个简单的飞机躲避坠落方块游戏，旨在从零开始介绍游戏的开发过程。

注册一个小游戏。

进入小程序注册页面，按照指引填写并提交相应信息。服务类别要选择“游戏”，子类别可以先选择“休闲游戏”，然后就可以有自己的小游戏了。

启动开发者工具。

注册一个小游戏后，你应该下载开发者工具并安装在你的电脑上。

打开安装好的开发者工具客户端，使用刚刚注册小游戏的微信“Sweep”扫码进入小游戏开发环境。

在左侧“小程序项目”中选择“小游戏标签”，点击右侧“+”号开始创建小游戏项目。

填写合适的项目名称，选择合适的本地空目录，登录新注册的小程序管理平台，找到如下图所示的小程序的AppId，在表单中填写“AppID”文本框。

点击右下角的“新建”按钮，完成迷你游戏的创建。

正如您在开发人员工具中看到的，迷你游戏只有两个必要的文件:

|–game.js

|–game.json

Game.js游戏入口文件

Game.json配置文件

双击目录树中的“game.js”文件开始编辑代码。

(如果找不到目录树，请先检查左上角的“编辑器”开关)

开始编辑代码

在小游戏中，只有JavaScpt可以用来写小游戏。但是和浏览器环境不同，小游戏环境没有BOM和DOM API，只有wx API。接下来，我们将使用wx API完成创建画布、绘制图形、显示图片和响应用户交互等基本功能。

创建画布

const画布= wx。画布()

在game.js中输入上述代码并保存，就可以立即创建一个上层屏幕画布。我们后续的代码将基于这个画布对象。

画一个矩形

const context = canvas . getcontext(& # 8216；2d & # 8217)//创建2d上下文

context.fillStyle = & # 8216# 1aad19 & # 8217//矩形颜色

Context.fillrect (0，0，100，100)//矩形的左上角是(0，0)，右下角是(100，100)。

输入上述代码并保存后，可以在模拟器的左上角看到一个绿色的方块。

接下来，我们通过简单的计算将矩形水平居中，并将上下文更改为:

context . fill rect(canvas . width/2 & # 8211；50, 0, 100, 100)

保存后，您可以看到矩形已水平居中:

为了方便矩形移动逻辑的绘制，将context.fillRect的代码打包到drawRect函数中，调用函数:

const { windowWidth，windowHeight } = wx.getInfoSync()

函数drawRect(x，y){ 0

context.clearRect(0，0，windowWidth，windowHeight)

context.fillRect(x，y，100，100)

}

draw rect(canvas . width/2 & # 8211；50, 0)

这里添加context.clearRect所在的行，用于每次绘制前清空整个画布，方便后期调用创建“让矩形落下移动”的效果；保存的模拟器效果应该和上一步一样，就是有一个水平居中的绿色矩形。

让矩形落下并移动。

设置draw rect(canvas . width/2 & # 8211；50，0)转换为以下代码:

const RECTx = canvas . width/2 & # 8211；50

让rectY = 0

setInterval(函数(){ 0

drawRect(rectX，rectY++)

}, 16)

这里我们增加了一个定时器功能，每16ms执行一次，每画一次，矩形左上角的Y坐标在原来的基础上增加1。添加上述代码并保存后，我们可以在模拟器上看到一个从上到下的绿色矩形。

添加飞机图片

在创建项目的目录下，新建一个 img 目录，并在其中添加一张 plane.png 的图片素材。实际上这里可以是任何你喜欢的图片素材，建议图片大小为 100px*100px，后文默认该图片大小也为 100px*100px。在创建项目的目录下创建一个新的img目录，并向其中添加plane.png的图片材料。其实可以是你喜欢的任何图片素材。建议图片大小为100px*100px，以后默认也是100px*100px。

添加成功后在目录树中可以找到 img 目录和 plane.png 素材。添加成功后，可以在目录树中找到img目录和plane.png资料。

向代码中添加以下代码，将飞机图片添加到画布中。

常量图像= wx。图像()

const imgX = canvas.width / 2 – 50const IMGx = canvas . width/2 & # 8211；50

let imgY = 500让imgY = 500

image . onload = function(){ 0

context.drawImage(image, imgX, imgY)context.drawImage(image，imgX，imgY)

}

image.src = ‘img/plane.png’image.src = & # 8216img/plane . png & # 8217；

保存后，可以看到模拟器下方出现一个飞机图形，图像加载成功。

使飞机图像跟随触摸运动。

添加以下代码，使飞机用手指触摸移动。

//存储当前飞机左上角的坐标。

let touchX = imgX让touchX = imgX

let touchY = imgY让touchY = imgY

wx.onTouchMove(函数(RES){ 0

context.clearRect(touchX，touchY，100，100)；//清除画布上的原始平面。

Touchx = Res. Changedtouches。client X//重新判断当前触摸点的X坐标。

敏感= Res. Changedtouches。clienti//重新判断当前触摸点的Y坐标。

context.drawImage(image，touchX，Touchy)；

})

其中，wx.onTouchMove是小游戏用来监控接触移动事件的API。通过监控这个事件，我们可以得到手指的触摸点坐标touchX和touchY，并用这些坐标重新绘制飞机画面，这样飞机画面就可以跟随触摸移动。

保存后，用鼠标在模拟器上拖动，可以看到飞机用鼠标移动。

确定飞机是否与下落的矩形相撞。

在wx.onTouchMove回调函数的末尾添加以下代码:

如果(touchX & gt= rectX & # 8211100英镑。和。touchX <。= RECTx+100 & amp；和。敏感。= rectY & # 8211100英镑。和。敏感<。= rectY+100) {//飞机与一个长方形相撞。

wx . ShowModal({ 0

标题:& # 8216；提示& # 8217；,

内容:& # 8216；碰撞，游戏结束！’

})

}

保存后，在模拟器中拖动飞机。只要飞机与矩形发生碰撞，就会出现一个弹出窗口，提示游戏结束。

在手机上预览

点击开发者工具中的“预览”按钮，用手机扫描二维码，就可以在手机上预览刚刚创建的小游戏的效果。

上传到体验版

当游戏开发到一定阶段，你想给项目组的其他伙伴体验，可以提交体验版。具体来说，点击工具右上角的“上传”。

在弹出窗口中填写版本号和项目备注后，点击“上传”按钮。

上传成功后，需要登录小程序管理平台，点击“版本管理”。在右侧页面，选择刚刚提交的版本，然后单击选择为体验版本。

体验版本选定后，可以点击版本号下方的二维码图标，获取体验版本游戏的二维码。

需要注意的是，除了管理员和项目成员，其他人想要体验“体验版”小游戏，首先要将自己的微信号添加到管理平台“会员管理”的“体验会员”列表中。详见小程序成员管理的详细说明。

上述“上传到体验版”的过程在开发过程中可以多次上传，不同开发人员上传的体验版是相互的，有效的体验版以管理平台中选择为体验版的为准。每次同一个开发者上传一个新版本，都会覆盖他上传的旧版本。扫码或从手机上已有的体验版入口进入都会自动更新到最新版本的体验版。

提交以供审查

小游戏开发完成后，需要提交审核后才能发布。

在小程序管理系统的“版本管理”中，点击想要发布的体验版右侧的“提交审批”按钮，然后填写相关表单提交审批。

确认发布

提交审核的版本审核通过后，可以点击“审核版本”中的“提交发布”来发布小游戏。