[小程序开发]微信开发者工具

为了帮助开发者简单和高效地开发和调试微信小程序,微信官方在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

  • 使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK详情
  • 使用小程序调试,开发者可以完成小程序的API和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

在微信开发平台(https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)可以直接下载,点击进入下载任意版本即可。使用安装包进行安装,一直点下一步即可(需要更换安装目录可自行配置)

安装界面

1. 启动页

在登录页,可以使用微信扫码登录开发者工具,开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。

登录成功后,会看到已经存在的项目列表和代码片段列表,在项目列表可以选择公众号网页调试,进入到公众号网页调试模式。

项目列表

当符合以下条件时,可以在本地创建一个小程序项目:

(1)需要一个小程序的AppID;如没有AppID,可以选择申请使用测试号;

(2)登录的微信号需要是该AppID的开发者;

(3)需要选择一个空目录,或者选择的非空目录下存在app.json或者project.config.json。当选择空目录时,可以选择是否在该目录下生成一个简单的项目。

新建项目

2. 主界面

开发者工具主界面,从上到下,从左到右,分别为:菜单栏、工具栏、模拟器、目录树、编辑区、调试器六大部分。

主界面

2.1 菜单栏

(1)项目

  • 新建项目:快速新建项目
  • 打开最近:可以查看最近打开的项目列表,并选择是否进入对应项目
  • 查看所有项目:新窗口打开启动页的项目列表页
  • 关闭当前项目:关闭当前项目,回到启动页的项目列表页

(2)文件

  • 新建文件
  • 保存
  • 保存所有
  • 关闭文件

(3)编辑:可以查看编辑相关的操作和快捷键

(4)工具

  • 编译:编译当前小程序项目
  • 刷新:与编译的功能一致,由于历史原因保留对应的快捷键ctrl+R
  • 编译配置:可以选择普通编译或自定义编译条件
  • 前后台切换:模拟客户端小程序进入后台运行和返回前台的操作
  • 清除缓存:清除文件缓存、数据缓存、以及授权数据

(5)界面:控制主界面窗口模块的显示与隐藏

(6)设置

  • 外观设置:控制编辑器的配色主题、字体、字号、行距
  • 编辑设置:控制文件保存的行为,编辑器的表现
  • 代理设置:选择直连网络、系统代理和手动设置代理
  • 通知设置:设置是否接受某种类型的通知

2.2 工具栏

工具栏中间,可以选择普通编译,也可以新建并选择自定义条件进行编译和预览;通过切后台按钮,可以模拟小程序进入后台的情况;工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据,方便开发者调试。

工具栏中间

工具栏右侧是开发辅助功能的区域,在这里可以上传代码、版本管理、查看项目详情

2.3 模拟器

模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。开发者可以选择不同的设备,也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇