第一部分:目录结构介绍
1.微信小程序目录结构
微信小程序默认的目录结构,下面一一介绍: 1.1 小程序的文件格式介绍
在项目中我们可以看到四种文件类型
1.1 pages目录介绍1pages:主要存放小程序的页面文件,其中每个文件夹为一个页面,每个页面包含四个文件,.wxml文件是界面文件,.js是事件交互文件,用于处理界面的点击事件等功能;.wxss为界面美化文件,让界面显示的更加美观;.json为配置文件,用于修改导航栏显示样式等,小程序每个页面必须有.wxml和.js文件,其他两种类型的文件可以不需要。 注意:文件名称必须与页面的文件夹名称相同,如index文件夹,文件只能是index.wxml、index.wxss、index.js和index.json. 1.2 utils该文件件主要用于存放全局的一些.js文件,公共用到的一些事件处理代码文件可以放到该文件夹下,用于全局调用。
1.3 app.js、app.json、app.wxssapp.js : 系统的方法处理文件,主要处理程序的声明周期的一些方法;例如:程序刚开始运行时事件处理等 app.json : 系统全局配置文件,设置导航头的颜色,字体大小,下面有没有tabbar等功能,具体页面的配置在页面的json文件中单独修改; app.wxss : 全局的界面美化代码
第二部分:开发工具菜单介绍
1.开发工具界面
2.菜单区介绍2.1 编辑默认为编辑状态显示,下面的编译为手动编译功能,通常情况下修改文件后保存会刷新界面显示,如果修改的是.js文件,保存时会自动进行编译和刷新界面显示 2.2 调试
通过界面我们可以看出编辑状态的菜单栏与chrome浏览器的调试界面几乎相同,包括控制台、源码、网络等,并且支持断电调试,功能几乎与前端开发调试类似,不再介绍, 调试的时候,菜单栏下面会多出一个后台和缓存按钮: 后台 : 是模拟程序运行到后台(按Home键回到主页面,不是退出程序)时的执行情况,进入后台时再次点击会进入前台执行。 缓存 : 数据的本地缓存,可以在这里进行清除缓存等操作。 2.3 项目菜单
3.界面显示栏
界面显示栏包括上下两部分,上面设置运行环境,下面显示运行效果,各部分介绍: 1 选择运行的环境,上面的手机型号不具体指该手机,单指相同的分辨率,例如iphone6 指375 * 667分辨率的所有机型 2 模拟网络运行环境,包括wifi、4G、3G、2G,默认为wifi运行环境 3 界面效果展示区,主要显示程序的运行效果 注意:切换运行的手机分辨率时记得要手动编译以下,否则界面显示不正确 4.目录结构栏和编辑栏目录结构已经介绍过了,不在多做介绍; 编辑区显示当前正在编辑的文件,如果是正在编辑的文件,名字显示为淡绿色,并且未保存的文件,文件名后面会有一个绿色的点,注意如果修改过文件后没有保存,程序不能正确运行
|
微信小程序学习记录《一》:目录结构介绍,开发工具菜单介绍 ... ...
发布:2018-01-29 14:58浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序开发工具 常用快捷键2018-06-09
- 微信小程序架构分析《一》调试技巧,模块构成,理念分析2018-02-07
- 微信小程序架构分析《二》:view 模块和 service 模块的构成2018-02-07
- 微信小程序架构分析《三》:实现过程以及实时更新2018-02-07
- 梁兴臣:微信小程序开发三宗罪和解决方案2018-02-07
- 微信小程序使用Promise实践2018-02-07
- 微信小程序开发系列分析《一》视图层2018-02-07
- 微信小程序开发系列分析《二》数据层2018-02-07
- 微信小程序官方文档个人分析心得2018-02-07
- 微信小程序的原型设计尝鲜2018-02-07