前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序环境搭建与开发工具的简单介绍

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

作者头像
端碗吹水
发布2020-09-23 12:21:30
1.5K0
发布2020-09-23 12:21:30
举报

笔记内容:小程序环境搭建与开发工具的简单介绍 笔记日期:2018-1-03


下载开发工具

和其他产品的开发一样,开发小程序也需要搭建相应的环境,小程序的开发环境很简单,下载个开发工具就可以了。微信官方提供了一个小程序的开发者工具,可以在官网下载到。 官网下载地址: 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是调到下一个断点

这些快捷键可以在设置 >>> 快捷键设置里查看到,也可以自定义快捷键:

小程序环境搭建与开发工具的简单介绍
小程序环境搭建与开发工具的简单介绍
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-01-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 下载开发工具
  • 小程序目前情况及限制
  • 小程序开发工具介绍
相关产品与服务
访问管理
访问管理(Cloud Access Management,CAM)可以帮助您安全、便捷地管理对腾讯云服务和资源的访问。您可以使用CAM创建子用户、用户组和角色,并通过策略控制其访问范围。CAM支持用户和角色SSO能力,您可以根据具体管理场景针对性设置企业内用户和腾讯云的互通能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档