微信小程序开发(二)创建小程序
安装完“微信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以及目录信息等。
微信小程序开发(二)创建小程序的更多相关文章
- Win32 程序开发:创建一个应用程序窗口
一.创建一个应用程序窗口 代码如下: // 头文件 #include <windows.h> // 全局变量 WCHAR g_lpszClassName[] = L"CLASSN ...
- 在C#/.NET应用程序开发中创建一个基于Topshelf的应用程序守护进程(服务)
本文首发于:码友网--一个专注.NET/.NET Core开发的编程爱好者社区. 文章目录 C#/.NET基于Topshelf创建Windows服务的系列文章目录: C#/.NET基于Topshelf ...
- 微信小程序开发详解——小程序,大颠覆!
微信小程序开发 联系 苏念 188.1414.7927 微信小程序系统开发 微信新功能开发 小程序开发 小程序怎么开发 app小程序开发 简化小程序开发 微信小程序定制 小程序制作 开发微信小程序 ...
- 微信小程序开发实战-天气小程序
园龄6年8个月了,还一篇文章都没写过,惭愧! 最近周末做了个天气预报小程序,在这里整理一下开发过程和注意点,给对小程序开发感兴趣的伙伴们提供点参考. 废话不多说,先上图最终效果: 下面进入正文: 第一 ...
- 番外篇!全球首个微信应用号开发教程!小程序 DEMO 视频奉上!
大家好,我是博卡君.经过国庆节的七天假期,相信很多朋友都已经研究出自己的小程序 demo 了吧?我最近也利用休息时间关注了一下网上关于小程序开发的讨论,今天就利用这个番外篇谈谈自己对小程序的一些想法吧 ...
- QQ小程序开发与发布小教程
QQ小程序QQApp,和微信小程序类似,可以直接在手机QQ中直接打开,应用内应用,省去了安装手机APP,非常方便.官方的介绍:QQ小程序为QQ体系下的应用开放平台,可为不同类型的产品提供框架,并在QQ ...
- WPF触控程序开发(二)——整理的一些问题
上一篇(WPF触控程序开发)介绍了几个比较不错的资源,比较基础.等到自己真正使用它们时,问题就来了,现把我遇到的几个问题罗列下,大家如有遇到其他问题或者有什么好的方法还望赐教. 问题1.如何获取触控点 ...
- 记账本微信小程序开发二
新建一个微信小程序项目 熟悉软件各种操作.
- 微信小程序开发2-第一个小程序开发准备
1.首先在官网上注册一个账号( https://mp.weixin.qq.com/ )申请一个AppID(类似于人的身份证,小程序也需要身份证) 注册过程不多说 2.安装开发工具( https://m ...
- 小程序开发二三事--数据请求head的设置
wx.request(OBJECT) 发起请求的方法有很多,默认为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT: 一般在 ...
随机推荐
- CentOS7安装.NET Core运行环境
安装.NET Core ->首先需要删除以前安装的版本 -> 获取安装脚本 curl -sSL https://raw.githubusercontent.com/dotnet/cli/r ...
- 【leetcode】215. Kth Largest Element in an Array
Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...
- PHP中对象的传值方式
对象的传值方式: 为什么对于对象,值传递和引用传递,这个情况下,他们似乎没有区别??? 这要从对象的数据的存储方式来理解: $o1 = new C1(); //这里创建一个对象o1,其存储结果如图所示 ...
- angularjs 指令间相互调用
<div ng-app="app"> <div ng-controller="myctl"> <button superman s ...
- DIH增量、定时导入并检索数据--转载
原文地址:http://www.ifunit.com/984/solr%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%BA%94%EF%BC%89dih%E5%A2%9E%E9%87%8 ...
- 简单配置AAA认证与telnet图解
不罗嗦,直接上图
- ZJOI2012网络 题解报告【LCT】
题目描述 有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相同颜色的边不超过两条. 图中不存在同色的环,同色的环指相同颜色的边构成的环. 在这 ...
- Linux内核分析4
周子轩原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 使用库函数API和C代码 ...
- mysql数据库----索引补充
1.索引 索引是表的目录,在查找内容之前可以先在目录中查找索引位置,以此快速定位查询数据.对于索引,会保存在额外的文件中. 2.索引种类 普通索引:仅加速查询 唯一索引:加速查询 + 列值唯一(可以有 ...
- uCOS-II之移植20160823
首先我们看一下uC/OS-II的框架图: 1.配置文件修改 +------------------------------------------ |core: os_core.c | os: os ...