在安装完“微信Web开发者工具”之后,通过开发者的微信扫码进入后,如图。

  

  点击“添加项目”,填入之前获得的AppID(无AppID可忽略),输入项目名称“Hello WXapplet”,选定本地文件夹作为项目目录。

  勾选“在当前目录中创建quick start项目”后,点击“添加项目”按钮,即已成功创建了我们第一个微信小程序项目——Hello WXapplet。

开发者工具操作与使用

  

  开发者工具界面基本分为四大区域:1区“顶部菜单”,2区“导航菜单”,3区“目录文件/模拟运行”,4区“编辑/调试开发”、1区与2区是固定的。3区与4区会根据选择导航菜单区的不同功能或模式有所不同。

  1区“顶部菜单”,“设置”是配置开发机运行程序时如何连接网络。“动作”是指“刷新”、“后退”、“前进”等操作,主要在网页或界面调试时使用。“帮助”是Web开发者工具的版本与版权声明等信息。

  2区“导航菜单”,是开发者经常使用的功能区。特别是其中的“编辑”与“调试”功能将是开发者使用最多的重要功能。

编辑功能

  点击编辑按钮,出现如图所示的界面。

  原来的4区部分变成项目的文件列表区及对应文件的代码编辑区,我们也称之为代码编辑器。

  代码编辑器现在支持4种文件的编辑:wxml、wxss、js以及json文件。代码编辑器还提供了较为完善的自动补全功能,大大方便了开发者。

  代码编辑器也支持快捷键操作,部分常用快捷键如下:

    Ctrl+End:移动到文件结尾
    Ctrl+Home:移动到文件开头
    Ctrl+i:选中当前行
    Shift+End:移动到行尾
    Shift+Home:移动到行首
    Ctrl+Shift+L:选中所有匹配
    Ctrl+D:选中匹配
    Ctrl+U:光标回退
    Shift+Al t+F:代码格式化
    Alt+Up,Alt+Down:上下移动一行
    Shift+Alt+Up,Shfit+Alt+Down:向上向下复制一行
    Ctrl+Shift+Enter:在当前行上方插入一行

调试功能

  调试功能是开发者检测代码结果实现与排查问题的核心工具,如图。

  4区此时变成调试工具与输出区。模拟器将如实地模拟微信小程序项目在客户端的逻辑与操作表现,绝大部分的功能与API调用均能在模拟器上正确呈现。

  调试工具与输出区的顶部是一行菜单,分别是:Console、Sources、Network、Storage、AppData、Wxml、Senser,最右边的扩展菜单项是定制与控制开发工具钮“┆”。

 Console页:控制台信息页,有两个作用:

 1)开发者直接在此输入代码并调试。

  

 2)显示小程序的错误输出。

  

 Sources页:源文件调试信息页,用于显示当前项目的脚本文件。

  

  

注意:因小程序框架会对脚本文件进行编译工作,在源文件页面中我们看到的文件其实是经过处理之后的脚本文件。所以我们编写的代码都被包含在define函数中。对于页面(page)的代码,则在打包脚本文件尾部,require函数会完成主动调用动作。

 Network页:网络调试信息页,用于观察和显示每个元素请求信息和套接字(socket)状态等网络相关的详细信息。

 

 Storage页:数据存储信息页,用于显示当前项目使用存储API(wx.setStorage或wx.setStorageSync)接口的数据存储情况。比如在Console中输入:wx.setStorage({key:"name",data:"King"}),则在Storage页面中就可以看到我们存储了一个Key-Value数据。

 

 AppData页:用于调试显示当前小程序项目此时此刻的应用具体数据,实时地回显项目数据情况。我们可以在此处编辑修改数据,反馈到当前界面上去。

 Wxml页:用于帮助开发者调试wxml转化后的界面。通过这里的调试可以看到真实的页面结构及对应的wxss属性,同时可通过修改对应的wxss属性,在模拟器中即时查看修改后的情形。(类似chrome中开发者选项中的Element、IE开发者选项中的DOM Explorer)

项目功能

 导航菜单区的“项目”功能,用来显示当前项目的细节,包括图标、AppID以及目录信息等。

 

微信小程序开发教程(二)创建第一个微信小程序的更多相关文章

  1. Senparc.Weixin.MP SDK 微信公众平台开发教程(三):微信公众平台开发验证

    要对接微信公众平台的"开发模式",即对接到自己的网站程序,必须在注册成功之后(见Senparc.Weixin.MP SDK 微信公众平台开发教程(一):微信公众平台注册),等待官方 ...

  2. 微信公众平台开发教程(一)_微信接入校验以及token获取

    微信公众平台是运营者通过公众号为微信用户提供资讯和服务的平台,而公众平台开发接口则是提供服务的基础. 接入微信公众平台开发,开发者需要按照如下步骤完成: 1.填写服务器配置 2.验证服务器地址的有效性 ...

  3. Senparc.Weixin.MP SDK 微信公众平台开发教程(一):微信公众平台注册

    微信公众平台(下面简称“公众平台”)注册步骤和导航还是比较流畅的,因此这个教程对于上网经验丰富的朋友来说,有点多余.不过为了保持教程系列的完整性,这里还是认认真真把流程梳理一遍. 第一步:进入公众平台 ...

  4. Senparc.Weixin.MP SDK 微信公众平台开发教程(二十一):在小程序中使用 WebSocket (.NET Core)

    本文将介绍如何在 .NET Core 环境下,借助 SignalR 在小程序内使用 WebSocket.关于 WebSocket 和 SignalR 的基础理论知识不在这里展开,已经有足够的参考资料, ...

  5. Senparc.Weixin.MP SDK 微信公众平台开发教程(二十):使用菜单消息功能

    在<Senparc.Weixin.MP SDK 微信公众平台开发教程(十一):高级接口说明>教程中,我们介绍了如何使用“客服接口”,即在服务器后台,在任意时间向微信发送文本.图文.图片等不 ...

  6. Senparc.Weixin.MP SDK 微信公众平台开发教程(二十二):如何安装 Nuget(dll) 后使用项目源代码调试

    最近碰到开发者问:我使用 nuget 安装了 Senparc.Weixin SDK,但是有一些已经封装好的过程想要调试,我又不想直接附加源代码项目,这样就没有办法同步更新了,我应该怎么办? 这其实是一 ...

  7. Senparc.Weixin.MP SDK 微信公众平台开发教程(十二):OAuth2.0说明

    紧接上一篇<Senparc.Weixin.MP SDK 微信公众平台开发教程(十一):高级接口说明>,这里专讲OAuth2.0. 理解OAuth2.0 首先我们通过一张图片来了解一下OAu ...

  8. Senparc.Weixin.MP SDK 微信公众平台开发教程(二):成为开发者

    Senparc.Weixin.MP SDK 微信公众平台开发教程(二):成为开发者 这一篇主要讲作为一名使用公众平台接口的开发者,你需要知道的一些东西.其中也涉及到一些微信官方的规定或比较掩蔽的注意点 ...

  9. Senparc.Weixin.MP SDK 微信公众平台开发教程(五):使用Senparc.Weixin.MP SDK

    Senparc.Weixin.MP SDK已经涵盖了微信6.x的所有公共API. 整个项目的源代码以及已经编译好的程序集可以在这个项目中获取到:https://github.com/JeffreySu ...

  10. Senparc.Weixin.MP SDK 微信公众平台开发教程(九):自定义菜单接口说明

    上一篇<Senparc.Weixin.MP SDK 微信公众平台开发教程(八):通用接口说明>介绍了如何通过通用接口获取AccessToken,有了AccessToken,我们就可以来操作 ...

随机推荐

  1. Junit使用的超简单介绍

    Junit使用的超简单介绍 前言:我对Junit了解的并不多,只是今天突然听到有人提到了它,而且现在时间还早,所以我觉得我不妨更一篇关于Junit4的超级超级简单的用法,全当是为了省去看官网demo的 ...

  2. DOM读取和修改节点对象属性

    一.获取和修改元素间的内容(3种) 1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文 固定套路:1.删除父元素下所有子元素:parent.innerHTML="&q ...

  3. 【uva10829-求形如UVU的串的个数】后缀数组+rmq or 直接for水过

    题意:UVU形式的串的个数,V的长度规定,U要一样,位置不同即为不同字串 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&am ...

  4. bzoj4764: 弹飞大爷 link-cut-tree

    题目传送门 这道题啊 调了一个晚上 因为写的是一个有根树和n个基环的写法 所以写得很奇怪..... 最后发现单独处理树的时候不能随意改变S(就是原来的根)不然size会出错.... #include& ...

  5. 地震(quake)

    地震 题目描述 一场地震毁了 Farmer John 的整个农场.他是个有恒心的人,决定重建农场.在重建了所有 n(1<=n<=400)块田野后,他意识到还得修路将它们连起来.完工后,任两 ...

  6. Oracle 脚本记录

    给表创建序列或触发器 create or replace procedure p_createseq(tablename in varchar2,key in varchar2) Authid Cur ...

  7. Java相关框架

    框架 类型 设计(个人理解) HK2 自动注入框架 Jersey RESTful Jetty HTTP服务 Retrofit HTTP客户端 ActiveMQ 消息组件 主题.队列 Redis K-V ...

  8. QML与C++混合编程详解(转)

    原文转自:http://blog.csdn.net/ieearth/article/details/42243553 原文转自:https://www.cnblogs.com/findumars/p/ ...

  9. python3 进程_multiprocessing模块

    '''多进程优点:可以利用多核,实现并行运算缺点:1.开销太大: 2.通信困难使用方式跟开多线程一样''' 多进程 import multiprocessing import time,os def ...

  10. 关于might_sleep的一点说明---CONFIG_DEBUG_ATOMIC_SLEEP【转】

    转自:http://blog.chinaunix.net/uid-23769728-id-3157536.html 这个函数我在看代码时基本上是直接忽略的(因为我知道它实际上不干什么事),不过因为内核 ...