小程序项目刷新：与编译功能一致的快捷键
发表时间：2023-09-15 18:39:19
文章来源：炫佑科技
浏览次数：223
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
小程序项目刷新：与编译功能一致的快捷键
6. 工具
编译：编译当前小程序项目
刷新：与编译后的功能一致，由于历史原因保留了对应的快捷键ctrl(?) + R
编译配置：可以选择正常编译或自定义编译条件
前后切换：模拟客户端小程序后台运行、返回前台的操作
清除缓存：清除文件缓存、数据缓存、授权数据
界面：控制主界面窗口模块的显示和隐藏
7. 设置：
外观设置：控制编辑器的颜色主题、字体、字体大小和行距
编辑设置：控制文件保存行为、编辑器性能
代理设置：选择直接网络、系统代理和手动代理设置
通知设置：设置是否接受某些类型的通知
8. 工具栏
点击用户头像，打开个人中心，您可以轻松切换用户，查看开发工具收到的消息。
用户头像右侧是控制主界面模块显示/隐藏的按钮。 至少需要显示一个模块。
在工具栏的中间，你可以选择正常编译，也可以新建一个并选择自定义条件进行编译和预览。
通过切换后台按钮，可以模拟小程序进入后台的情况。
工具栏提供了清除缓存的快速入口。 您可以在工具上轻松清除文件缓存、数据缓存、后台授权数据，方便开发调试。
工具栏右侧是开发辅助功能区域，可以上传代码、版本管理、查看项目详情等。
9. 工具栏管理
右键单击工具栏，打开工具栏管理
10. 模拟器
模拟器可以模拟小程序在微信客户端上的表现。 小程序的代码编译后可以直接在模拟器上运行。
开发可以选择不同的设备或者添加自定义设备来调试小程序在不同尺寸机型上的适配情况。
在模拟器底部的状态栏中，可以直观地看到当前运行的小程序
11.独立窗口
单击模拟器/调试器右上角的按钮，可以在单独的窗口中显示模拟器/调试器
软件特点
1.微信开发工具可以帮助用户设计自己需要的小程序。
2.用户可以通过该软件开发新软件并部署到微信中。
3.本软件提供编辑器。 您可以在创建新项目时打开编辑器。
4.可以在软件中开发游戏，添加小游戏到微信
5.软件中可以制作网页以及新建公众号网页
6.软件功能还是很多的小程序项目刷新：与编译功能一致的快捷键，编辑器可以满足大部分用户的开发需求。
7、设计好的程序可以在手机上预览，并自动生成二维码预览链接。
8.通过本软件，您可以更好的开发您需要的软件。
9.可以使用自己的微信ID调试微信网页授权
10、可以调试检查页面的JS-SDK相关功能和权限，模拟大部分SDK的输入输出。
11. 您可以利用综合开发援助。
安装方法
1、打开.02..exe软件直接启动，点击下一步
2. 当提示输入软件安装协议时，单击“接受”。
3、软件安装地址C:Files(x86)微信网页开发工具
4.软件安装进度，请等待安装完成。
5. 提示软件安装完成。 单击完成立即开始。
使用说明
1.打开微信网页开发工具提示并使用微信登录，在软件界面直接扫码登录。
2.如图所示，会提示您进行小程序设置。 点击添加按钮，进入新建程序项目界面。
3.项目名称-1，设置目录，设置ID，开发模式可以选择小程序和插件
4、小程序云开发为开发提供数据库、存储、云功能等完整的云支持。 无需搭建服务器，利用平台提供的API进行核心业务开发，即可快速上线和迭代小程序。
5.导入项目功能，在软件界面填写APPID，然后点击导入按钮
6. 这里是公众号网页编辑界面。 如果你会设计网页，就可以在软件底部开始编辑。
7.软件设置：打开上次修改的项目，使用GPU加速模式小程序开发工具，使用新版本文件监控模块，在手机上启动自动预览，在PC上启动自动预览
8.外观设置界面，可以选择新的颜色和设置模拟器位置。
9.端口安全，该工具的服务端口已关闭。 命令行和 HTTP 都无法调用该工具。
10.清除开发工具、清除开发工具缓存、清除地址栏历史记录、清除文件缓存
11.预览功能，如果您需要在手机上查看公众号网页，请扫描这里的二维码
官方教程
快速上手
本文将利用小游戏提供的能力制作一个简单的飞机躲避落块小游戏，旨在从头开始介绍小游戏的开发过程。
注册一个小游戏账号
进入小程序注册页面，按照指引填写信息并提交相应材料。 服务类别应为“游戏”。 您可以先在子类别中选择“休闲游戏”，然后您就可以拥有自己的小游戏账号了。
安装并启动开发工具
注册小游戏账号后，您需要下载开发工具并将其安装到您的计算机上。
打开安装好的开发工具客户端，使用刚刚注册的微信账号注册小游戏账号“扫一扫”，扫码即可进入小游戏开发环境。
选择左侧“小程序项目”中的“小游戏选项卡”，然后点击右侧的“+”号，开始创建小游戏项目。
填写合适的项目名称，选择合适的本地空目录，登录刚刚注册的小程序管理平台，找到下图所示小程序的AppID，填写到表单的“AppId”文本框中。
填写完成后，点击右下角的“新建”按钮即可完成小游戏的创建。
在开发工具中可以看到，小游戏只有两个必要的文件：
|--game.js
|--game.json
game.js 小游戏入口文件
game.json 配置文件
双击目录树中的“game.js”文件开始编辑代码。
（如果找不到目录树，请先选择左上角的“编辑器”开关）
开始编辑代码
在小游戏中，只能用来编写小游戏。 但与浏览器环境不同的是，小游戏环境没有BOM和DOM API，只有wx API。 接下来我们将使用wx API来完成创建画布、绘制图形、显示图片、响应用户交互等基本功能。
创建画布
常量 = wx.()
在game.js中输入上述代码并保存，即可立即创建上屏。 我们后续的代码将基于这个对象。
画一个矩形
const = .('2d') // 创建一个 2d
。 = '#' // 矩形颜色
.(0, 0, 100, 100) // 矩形左上角顶点为(0, 0)，右下角顶点为(100, 100)
继续输入上面的代码并保存。 您可以看到模拟器的左上角出现一个绿色方块。
接下来，我们进行简单的计算，将矩形水平居中，并将 .(0, 0, 100, 100) 更改为：
.(.宽度/2 - 50, 0, 100, 100)
保存后可以看到矩形已经水平居中了：
为了方便绘制矩形运动逻辑，封装了. 进入一个函数并调用该函数：
const { , } = wx.()
（x，y）{
.(0, 0, , )
.(x,y,100,100)
(.宽度/2 - 50, 0)
在这里添加更多。 线条的作用是在每次绘制之前清除整个画布，以便稍后调用它来创建“让矩形落下并移动”的效果； 保存后，模拟器的效果应该和上一步一致，即多了一个水平居中的绿色矩形。
让矩形下降并移动
将(.width / 2 - 50, 0)修改为以下代码：
const rectX = .width / 2 - 50
让矩形Y = 0
((){
（矩形X，矩形Y++）
}, 16)
这里我们添加了一个定时器函数，每16ms执行一次，每次绘制时，矩形左上角的y坐标加1。添加上面的代码并保存后，可以看到一个顶部-down 函数出现在模拟器上。 下降的绿色矩形。
添加飞机图像
在创建项目的目录下，新建img目录，并在其中添加plane.png图片素材。 其实可以是任何你喜欢的图片素材。 建议图片尺寸为100px*100px。 下文中默认的图片尺寸也是100px*100px。
添加成功后，可以在目录树中找到img目录和plane.png素材。
添加以下代码到添加飞机图像的代码中。
常量图像 = wx.()
常量 imgX = .width / 2 - 50
让imgY = 500
图像。 = () {
.（图像、imgX、imgY）
image.src = 'img/plane.png'
保存后，可以看到模拟器下方出现了飞机图形，图像加载成功。
让飞机图像随着触摸而动起来
添加以下代码，使飞机跟随手指触摸移动
//存储当前飞行器左上角坐标
让=imgX
让=imgY
wx.( (res) {
.(, , 100, 100); // 清除画布上原来的飞机
= 资源[0]。 // 重新判断当前触摸点的x坐标
= 资源[0]。 // 重新判断当前触摸点的y坐标
。（图像， ， ）;
})
其中，wx. 是小游戏用来监听触摸点移动事件的API。 监听该事件获取手指触摸点的坐标，并利用该坐标重绘飞机图像，使飞机图像随着触摸而移动。
保存后，用鼠标在模拟器上拖动，可以看到飞行器跟随鼠标移动。
判断平面是否与下落的矩形发生碰撞
在 wx.txt 文件末尾添加以下代码： 回调函数：
if ( >= 矩形X - 100 && = 矩形Y - 100 &&
