微信小程序开发教程(二)创建第一个微信小程序
在安装完“微信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以及目录信息等。
微信小程序开发教程(二)创建第一个微信小程序相关推荐
- 转载收藏之用 - 微信公众平台开发教程(三):微信公众平台开发验证
要对接微信公众平台的"开发模式",即对接到自己的网站程序,必须在注册成功之后(见Senparc.Weixin.MP SDK 微信公众平台开发教程(一):微信公众平台注册),等待官方 ...
- 微信小程序开发教程第七章:微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
- 微信公众号开发教程(二)消息接收与响应处理
作者:陈惠,叩丁狼教育高级讲师.原创文章,转载请注明出处. 上一篇文章我们已经实现了URL接入,接下来就可以利用微信官方的开发文档来实现不同的案例.(注意:若还没有进行接入操作,请参考开发教程(一)) ...
- Abp vnext Web应用程序开发教程 1 —— 创建服务器端
文章目录 关于本教程 下载源代码 创建解决方案 创建书籍实体 BookType枚举 将图书实体添加到DbContext 将图书实体映射到数据库表 添加数据库迁移 添加样本种子数据 更新数据库 创建应用 ...
- 基于python的微信公众号开发教程_基于python的微信公众号开发教程
应广大python学员的期盼,九宝老师精心制作的"基于python的微信公众号开发"视频教程即将上线. 该课程秉承九宝培训一贯的"简单.高效.快速"的讲课原则, ...
- Abp vnext Web应用程序开发教程 3 —— 创建、更新和删除书籍
文章目录 关于本教程 下载源代码 创建新书 创建模态表单 添加"新书"按钮 更新书 EditModal.cshtml.cs 从BookDto映射到CreateUpdateBookD ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(二十二):如何安装 Nuget(dll) 后使用项目源代码调试...
最近碰到开发者问:我使用 nuget 安装了 Senparc.Weixin SDK,但是有一些已经封装好的过程想要调试,我又不想直接附加源代码项目,这样就没有办法同步更新了,我应该怎么办? 这其实是一 ...
- 微信小游戏开发教程-游戏实现1
微信小游戏开发教程-游戏实现1 概述 微信开发者工具官方提供一个飞机大战的游戏Demo,这里我们不再使用这个demo,我们以FlappyBird为例,为了让读者更加容易理解. 源码 https://g ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(十八):Web代理功能
在Senparc.Weixin.dll v4.5.7版本开始,我们提供了Web代理功能,以方便在受限制的局域网内的应用可以顺利调用接口. 有关的修改都在Senparc.Weixin/Utilities ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(十六):AccessToken自动管理机制
在<Senparc.Weixin.MP SDK 微信公众平台开发教程(八):通用接口说明>中,我介绍了获取AccessToken(通用接口)的方法. 在实际的开发过程中,所有的高级接口都需 ...
最新文章
- 彻底厘清真实世界中的分布式系统
- 2016年计算机视觉和图像处理相关的国际会议一览表
- Hibernate HQL基础 投影查询
- udp和tcp是服务器响应,HTTP,TCP,UDP的理解和使用
- ipad和iphone切图_如何从iPhone和iPad上的Mail应用程序删除电子邮件帐户
- 秦汉考场科目三路线图_海淀驾校科目三校内考场总结
- mysql查到库怎么进入表_mysql如何进入数据库查看所有表
- Linux内核线程(一)
- 基于java疫情防控管理系统
- 菜鸟的B4A(B4X)开发成长日志
- 月夜无声,谁与我醉今宵
- latch 深入理解(转载)
- 微信开放平台授权java_微信开放平台授权登录(java版)
- DPDK内存管理总结
- Hi3536调试记录,内核启动
- Vue3源码阅读指南——计算属性(effectcomputed)
- Nginx 访问日志增长暴增出现尖刀的详细分析
- 【朝花夕拾】Android自定义View之(一)手把手教你看懂View绘制流程——向源码要答案
- 成都java培训要多少钱
- 力士乐触摸屏维修VCP20.2DUN-003-PB-NN-PW