2018年,我希望自己通过自学掌握小程序开发,因为对编程很感兴趣,也很想将自己的设计方案变成产品。关于学习,最大的心得就是将自己所学的东西讲给别人让别人听懂,这是掌握知识最快最好的方法。
首次接触小程序,绕不开的就是开发者工具,关于这一点在微信开发者平台有完整的安装教程和配置方法。下面总结了初次接触小程序必备的学习知识点,大纲如下:
1.代码结构
2.配置文件
3.版本规划
4.开发者工具
01
代码结构
谈到小程序的代码结构,我们不妨从书籍这一具象物体进行延展。书籍必备的几大元素分别是:封面,目录,内容,排版和书写所用的工具。
/Image by 欢颜
综上所述我们可以将小程序的代码结构分为以下几大部分:
app.js:用来注册一个微信小程序,就好比每一本书籍都需要一个特定的封面去书柜上架,以此来表现它的唯一性;
app.json:主要是配置微信小程序全局信息(网络请求的超时时间,窗口的表现,各个页面的注册路径),正如每一本书都需要一个目录去阐述章节之间的关联和每一章节所应包含的信息;
app.wxss:配置微信小程序的全局样式,我们总能从《海子诗选》里读出诗歌应有的浪漫,总能从《老人与海》中读出故事的跌宕起伏,他们除了内容上的差异外,在文章的排版和字号的处理上也有明显的差别,而app.wxss正是去设置于每个小程序所独有的风格样式;
pages:储存所有小程序的页面,每个页面主要由四部分组成:js文件(处理逻辑和页面交互),json文件(页面的配置信息),wxml文件(元素和页面内容)
,wxss文件(设置页面元素的样式);
utils文件:存放一些工具类函数
02
基础配置文件介绍
首次接触小程序时,我们会发现小程序的配置文件主要包含两部分:app.json的全局配置文件和页面配置文件。
/Image by 欢颜
对于单个page页面,同样包含window的配置信息,如果单个页面的window配置项与全局重复,则覆盖全局的配置项。与此同时页面也可以通过disableScroll这个选项去设置是否开启滚动。
03
版本规划
首次接触小程序时,我们会发现小程序的配置文件主要包含两部分:app.json的全局配置文件和页面配置文件。
/Image by 欢颜
我们在开发小程序的过程中主要会经历五个版本的迭代过程,预览版(主要用于预览调试),开发版本(我们将本地的代码上传成具有版本号的小程序应用,拥有开发者权限的成员就可以通过开发者助手看到开发版本),体验版本(小程序管理后台可以直接将开发版本转换成体验版本,让更多具有权限的朋友体验测试),审核版本(当开发者将小程序提交平台审核后,此版本形成),最后则是线上版本,小程序正式发布。
04
开发者工具讲解
小程序开发者工具只要分为四大块:工具栏,模拟器,编辑器和调试器。
/Image by 欢颜
前三个部分很容易理解,这里我重点讲解一下调试器,
/Image by 欢颜
右边我们会发现有一个调试器模块,调试器模块主要由七部分组成:
1.Console 主要打印小程序页面的调试log信息;
2.Sources 展示所有脚本文件,可以对脚本文件进断点调试;
2.Network 展示我们各个网络请求的状态信息,以及请求资源的响应数据;
3.Storage 通调用wx.setStorage和wx.setStorageSync这些函数设置缓存的时候可以动态的去修改缓存数据;
4.AppData 是微信小程序页面真实展示的数据,来测试小程序在不同设备的兼容情况;
5.Wxml 展示页面上各个组件元素,可以对组件元素进行样式属性的修改;
6.Sensor 主要包含地理位置信息和设备旋转角度的展示,我们可以动态的设置相关信息。
“
每一段学习历程都值得被记录,输入→消化→再分享,\(^o^)/
”
联系客服