打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
学习笔记

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^)/

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
微信小程序的简单制作开发流程,人人都可以自己开发小程序
微信小程序开发入门教程
通宵吐血赶出的全球首篇微信应用号开发教程!
微信小程序教程入门篇 (1):10分钟从0开始写一个hello world,极其详细
微信小程序教程入门篇 (1):10分钟从0开始写一个hello
深圳小程序开发
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服