小程序环境搭建与开发工具的简单介绍

简介:

和其他产品的开发一样,开发小程序也需要搭建相应的环境,小程序的开发环境很简单,下载个开发工具就可以了。微信官方提供了一个小程序的开发者工具,可以在官网下载到。
官网下载地址:
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
小程序环境搭建与开发工具的简单介绍

下载对应的版本即可,我这里下载的是最新版的。

下载完成之后安装,因为安装都是图形化而且是中文的,就不过多说明了:
小程序环境搭建与开发工具的简单介绍
小程序环境搭建与开发工具的简单介绍
小程序环境搭建与开发工具的简单介绍
小程序环境搭建与开发工具的简单介绍
小程序环境搭建与开发工具的简单介绍

小程序目前情况及限制

  • 小程序已经过了公测不稳定阶段,目前处于在稳定发展的阶段
  • 已经开放了个人开发者申请注册
  • 没有小程序账号不能上传和发布小程序
  • 没有小程序账号不能真机运行,只可以在pc的模拟中运行
  • 不能真机运行的话,录音、网络状态、罗盘、拨打电话等功能的api无法使用
  • 没有小程序账号的话,获取用户信息的流程是模拟的而不是真实的
  • 但是没有小程序账号也不影响学习小程序开发

建议处于学习阶段的话,在模拟器上运行会比较好一些,真机运行需要绑定一些相关的信息,过程比较麻烦,不利于初学者。

小程序开发工具介绍

安装好开发工具,运行之后会弹出一个对话框,让你使用微信扫码登录:
小程序环境搭建与开发工具的简单介绍

登录之后点击小程序项目:
小程序环境搭建与开发工具的简单介绍

创建相应的工程,没有AppID的话可以点击 “点此体检” 即可,当然你也可以去注册一个AppID,我这里选择的是不使用AppID:
小程序环境搭建与开发工具的简单介绍
小程序环境搭建与开发工具的简单介绍

创建完成:
小程序环境搭建与开发工具的简单介绍

左边是效果的显示区域,右边是代码的编写区域。当代码修改后保存按Ctrl+s保存时就会自动编译,然后左边就会显示出修改后的效果。这个开发工具还是比较简单的,没有什么复杂的功能。

打开调试器:
小程序环境搭建与开发工具的简单介绍

这个调试器感觉和谷歌浏览器的开发者工具一毛一样。

文件树:app.js是编译过的文件,带 ?[sm] 后缀的则是没有编译过的文件:
小程序环境搭建与开发工具的简单介绍

Console控制台界面会显示错误信息或者输出信息:
小程序环境搭建与开发工具的简单介绍

在Source界面可以按Esc键让控制台位于下方显示:
小程序环境搭建与开发工具的简单介绍

Network界面可以查看网络请求信息:
小程序环境搭建与开发工具的简单介绍

Storage界面查看缓存:
小程序环境搭建与开发工具的简单介绍

AppData界面查看数据绑定:
小程序环境搭建与开发工具的简单介绍

Wxml界面,可以审查元素:
小程序环境搭建与开发工具的简单介绍

详情界面:
小程序环境搭建与开发工具的简单介绍
如果你使用了AppID的话,上传那几个按钮应该是亮着的,因为我是游客ID所以是灰色的。

切后台是用来模拟应用切换时在后台运行的状况:
小程序环境搭建与开发工具的简单介绍

清缓存的按钮会清除Storage界面里缓存的数据。

关于快捷键:
Ctrl+f可以打开查找:
小程序环境搭建与开发工具的简单介绍

断点调试的快捷键:
F10单步调试,F8是调到下一个断点

这些快捷键可以在设置 >>> 快捷键设置里查看到,也可以自定义快捷键:
小程序环境搭建与开发工具的简单介绍




本文转自 ZeroOne01 51CTO博客,原文链接:http://blog.51cto.com/zero01/2057114,如需转载请自行联系原作者

相关文章
|
8月前
|
小程序 开发工具 开发者
小程序简介和开发工具
小程序简介和开发工具
|
12月前
|
小程序 开发工具 开发者
【小程序】一文带你了解微信小程序开发(小程序注册/开发工具的下载)
【小程序】一文带你了解微信小程序开发(小程序注册/开发工具的下载)
82 0
|
数据采集 JSON 小程序
走进小程序【二】微信小程序环境搭建并初始化第一个小程序项目
走进小程序【二】微信小程序环境搭建并初始化第一个小程序项目
184 0
走进小程序【二】微信小程序环境搭建并初始化第一个小程序项目
|
小程序 测试技术 开发工具
【小程序自动化Minium】一、框架介绍和环境搭建
【小程序自动化Minium】一、框架介绍和环境搭建
【小程序自动化Minium】一、框架介绍和环境搭建
|
小程序 JavaScript 前端开发
【零基础微信小程序入门开发一】小程序介绍及环境搭建
微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。 全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。 微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的
434 0
【零基础微信小程序入门开发一】小程序介绍及环境搭建
|
存储 缓存 小程序
全栈工程师之路-中级篇之小程序开发-第一章第二节注册小程序和开发工具讲解
全栈工程师之路-中级篇之小程序开发-第一章第二节注册小程序和开发工具讲解
129 0
全栈工程师之路-中级篇之小程序开发-第一章第二节注册小程序和开发工具讲解
|
小程序 前端开发 开发工具
1.3【微信小程序全栈开发课程】小程序账号注册、开发工具下载安装
1、注册小程序 (1)注册小程序账号 点击下面注册地址开始注册 https://mp.weixin.qq.com/wxopen/waregister?action=step1 第一步:完善账号信息,选择一个自己的邮箱注册 第二步:进行邮箱激活,登录邮箱,点击激活链接 第三步:用户信息登记,确认主体类型,我选择的是「个人」类型 66
130 0
1.3【微信小程序全栈开发课程】小程序账号注册、开发工具下载安装
|
JSON 开发工具 数据格式
小程序入门---开发工具的使用
小程序发布到现在已经2年零2个月了,现在越来越多的企业倾向于开发小程序。作为一位前端开发人员,虽然对小程序有所耳闻,却一直没有尝试去做。只是觉得很火的样子,今天突然有了点兴趣,就学习了一下,觉得还真不错!下面我简单聊一下小程序开发工具的使用以及相关入门知识。
2012 0
|
开发者
小程序环境搭建
1.注册 点击小程序进入,选择注册。注册的用户名要注意,不能注册过微信公众平台和微信开放平台。 图1.png 图2.png 2.登录 图3.png 3. AppID(小程序ID) 在菜单 “设置”-“开发设置” 看到小程序的 AppID, 类似于手机App的报名。
788 0
|
7天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。

热门文章

最新文章