您现在的位置: 365建站网 > 365学习 > 体验微信小程序(界面与操作,调试功能,编辑器,快捷捷)

体验微信小程序(界面与操作,调试功能,编辑器,快捷捷)

文章来源:365jz.com     点击数:203    更新时间:2018-01-16 22:31   参与评论

体验微信小程序

本章会详细介绍微信小程序工具以及微信小程序结构,包括微信小程序工具操作、目录结构、常用快捷键等。


2.1 界面与操作

微信小程序开发工具的功能非常强大和便捷,其工具内部集成了代码编辑、开发调试及程序发布等功能,微信小程序开发工具界面如图21所示。

微信小程序开发工具界面基本划分为四大区域:顶部菜单区域、导航菜单区域、目录文件&模拟运行区域、编辑&调试开发区域。顶部菜单区域和导航菜单区域是固定的,目录文件&模拟运行区域和编辑&调试开发区域会根据选择导航菜单的不同功能而有所不同。


顶部菜单区域在开发小程序的过程中使用的机会并不多,其中“设置”页面用于配置开发模拟器运行程序时连接的网络代理(见图22)。“动作”页面用于刷新、后退、前进等操作。“帮助”页面用于显示开发工具的版本和版权声明等信息。导航菜单区域是开发者经常使用的功能区域。特别是其中的编辑和调试的功能对开发者来说是非常重要的功能。下面重点介绍这两个功能。

图21 开发工具主界面


图22 设置页面

2.2 编辑功能

编辑区分为两个部分,在右侧的编辑区域可以对当前项目进行编写、文件添加和删除以及重命名等基本操作。在左侧的模拟器区域可以实时预览编辑的情况,如图23所示。编辑器同时也提供了比较完善的自动补全和自动保存功能,编写代码后,工具会自动帮助用户保存当前代码为编辑状态,如果直接关闭工具或者切换项目,也不会丢失当前代码的编辑状态。但是要注意,处于编辑状态的代码只保存到工具内部,并没有写到硬盘上,只有手动保存文件后,修改的内容才会写到硬盘上,并触发实时预览。



图23 编辑区页面

2.3 调试功能

调试工具分为七大功能模块:Console、Sources、Network、Storage、AppData、WXML和Sensor,如图24所示。

图24 调试工具选择区(1) Console选项卡有以下两大功能。

① 开发人员可以在此输入和调试代码,如图25所示。


图28 Network页面(4) Storage选项卡用于显示当前项目使用wx.setStorage或者wx.setStorageSync后的数据存储情况,如图29所示。


图29 Storage页面(5) AppData选项卡的主要功能是显示当前项目在当前时刻AppData的具体数据,实时地反馈项目数据情况,可以在此处编辑数据,并及时地反馈到界面上,如图210所示。



图210 AppData页面(6) Wxml选项卡的主要功能是帮助开发者开发WXML转化后的界面。在这里可以看到真实的页面结构以及结构对应的wxss属性,同时可以通过修改对应的wxss属性,在模拟器中实时看到修改的情况。通过调试模块左上角的选择器,还可以快速找到页面中组件对应的WXML代码,如图211所示。


图211 Wxml页面(7) Sensor选项卡有两大功能。

① 开发人员可以在这里选择模拟地理位置,如图212所示。

图212 设置模拟地理位置② 开发人员可以在这里模拟移动设备表现,用于调试重力感应API,如图213


图213 调试模拟器重力感应

2.4 项目功能编辑器

项目选项卡主要用于显示和设置项目的信息,其中显示的信息包括图标、AppID、本地开发目录、最新更新时间、最近上传时间以及代码包大小,如图214所示。· 预览:指上传源码到微信服务器并成功后会生成一个二维码,开发者用最新版本的微信扫描二维码后,即可在手机上体验到最新的效果。


图214 项目设置页面· 上传:指上传源码到微信服务器后,开发者可以在微信管理后台看到本地提交情况,此功能只限于管理员微信号操作。

· 开启ES6转ES5:在微信0.10.101000以及之后版本的开发工具

中,会默认使用babel将开发者代码中的ES6语法转换为三端都能很好支持的ES5代码,帮助开发者解决因环境不同所带来的开发问题。

开发者可以在项目设置中关闭这个功能。

· 开启上传代码时样式文件自动补全:开启此功能后,开发工具会自动检测并补全缺失样式。

· 开启代码压缩上传:开启此功能后,会在上传代码时帮助开发者压缩代码,减小代码包的体积。

· 监听文件变化,自动刷新开发者工具:开启此功能后和当前项目相关文件改变时,会自动帮助开发者刷新模拟器。

· 开发环境不校验请求域名及TLS版本:开启此功能后,开发工具在开发环境中将不会校验安全域名和TLS版本。


2.5 常用快捷键

为了提高开发效率,微信小程序的编辑器中设置了很多快捷键供开发者使用,下面介绍一些常用的快捷键的功能,如表21所示。

表21


2.6 项目的目录与文件结构

在创建小程序项目时,小程序开发工具会默认生成一些文件,这些文件就是小程序的基本结构。除此之外,在开发过程中,可以根据产品需求自定义小程序的目录和文件,本章会简单介绍一下微信小程序的结构。

项目目录

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (203人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------