昨天学习了一些简单的概念,今天开始实际操作,通过搭建简单的计算器来学习小程序的架构

一、小程序框架

程序框架如上图所示。由此可见,框架的基本构成为:

1. app.js 、 app.wxss

2. app.json

3. project.config.json

4. utils 文件夹

5. pages 文件夹

1. app.js 和 app.wxss 是小程序的全局配置文件,负责配置全局的通用样式、通用方法

2. app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。示例如下:

pages 字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。定义在第一个的页面目录为小程序进入后的起始页面

window 字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等

3. project.config.json 中配置的是对开发工具进行的个性化设置,有此配置文件、将更方便开发者在更换电脑后 保留原有的开发习惯

在开发者修改工具配置时,程序将自动获取、写入此文件中

4. utils文件夹中放置的是一些常用的js 、css 文件,可以在页面中引入使用

5. pages 文件夹中放置的是每个单独页面的布局、样式、方法信息

微信小程序之菜鸟入门教学(二)的更多相关文章

  1. 微信小程序从零开始开发步骤(二)创建小程序页面

    上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是 要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录 选中page,右击鼠标,从硬盘打 ...

  2. 微信小程序把玩(三十二)Image API

    原文:微信小程序把玩(三十二)Image API 选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx. ...

  3. 微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载

    微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 1.不同类型文件的选取 1.1 常用的图片 视频 对于大部分开发者来说,需要上传的文件形式主要为图片,微信为此提供了接口. wx.ch ...

  4. 微信小程序之菜鸟选手入门教学(一)

    1. 小程序的优缺点优点:不需下载.卸载 使用方便缺点:嵌套在微信中,属于微信的子应用2. 使用的技术实际上是Hybrid技术的应用Hybrid App (混合模式移动应用),使用网页语言和程序语言共 ...

  5. 史诗手册!微信小程序新手自学入门宝典!

    一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...

  6. 微信小程序从零开始开发步骤(二)

    上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录 选中page,右击鼠标,从硬盘打开 ...

  7. 微信小程序开发之普通链接二维码

    本文主要介绍扫普通链接二维码打开小程序, 详情请看官方文档https://mp.weixin.qq.com/debug/wxadoc/introduction/qrcode.html 配置普通链接二维 ...

  8. 微信小程序 发现之旅(二)—— 自定义组件

    组件化的项目开发中,组件应当划分为三个层次:组件.模块.页面 微信小程序已经为开发者封装好了基础组件,页面文件(pages)也有了详细的规定 而模块就需要自行开发,并且要和页面文件区分开,这就涉及到自 ...

  9. ESA2GJK1DH1K微信小程序篇: 测试微信小程序扫描Air202上面的二维码绑定设备,并通过MQTT控制设备

    前言 一,微信小程序篇小程序下载(该功能为小程序篇基础功能源码) 实现功能概要 微信小程序通过扫描GPRS上的二维码,绑定GPRS设备.然后使用小程序通过GPRS远程控制开发板上的继电器, 远程显示单 ...

随机推荐

  1. 带着新人看java虚拟机03

    分享一篇博客:https://blog.csdn.net/yfqnihao/article/details/8289363,本篇有部分参考这篇博客!!! 还是继续说一下java虚拟机,为什么呢?因为我 ...

  2. k8s使用helm打包chart并上传到腾讯云TencentHub

    本文只涉及Helm的Chart操作,不会对其他知识进行过多描述.至于安装这块,麻烦自行百度吧,一大堆呢. 在容器化的时代,我们很多应用都可以部署在docker,很方便,而再进一步,我们还有工具可以对d ...

  3. Dapper 链式查询 扩展

    Dapper 链式查询扩展 DapperSqlMaker   Github地址:https://github.com/mumumutou/DapperSqlMaker  欢迎大佬加入 Demo: 查询 ...

  4. 结合JDK源码看设计模式——适配器模式

    定义: 将一个类的接口转换成客户期望的另外一个接口(重点理解适配的这两个字),使得接口不兼容的类可以一起工作适用场景: 已经存在的类,它的方法和需求不匹配的时候 在软件维护阶段考虑的设计模式 详解 首 ...

  5. 模板方法模式 Template method 行为型 设计模式(二十六)

    模板方法模式 Template method 上图为网上百度的一份简历模板截图   相信大家都有求职的经历,那么必然需要简历,写简历的时候,很可能你会网上检索一份简历模板,使用此模板的格式,然后替换为 ...

  6. 对于一个WEB前端初学者,学前端应该注意,有什么技巧

    web前端经验总结需要注意的地方和技巧如下: 1.编程思维 学习web前端开发核心在于一个“编程思维”,因为每段代码都不一样,都需要分别去看,所以只要你掌握了学习web前端的编程思维,那么写程序对于你 ...

  7. ggsci: error while loading shared libraries: libnnz11.so

    [oracle@localhost goldengate]$ ./ggsci ./ggsci: error while loading shared libraries: libnnz11.so: c ...

  8. kubernetes 客户端KubeClient使用及常用api

    KubeClient是kubernetes 的C#语言客户端简单易用,KubeClient是.NET Core(目标netstandard1.4)的可扩展Kubernetes API客户端, gith ...

  9. Scala实现Try with resources自动关闭IO

    在处理数据库连接或者输入输出流等场景时,我们经常需要写一些非常繁琐又枯燥乏味的代码来关闭数据库连接或输入输出流. 例如数据库操作: def update(sql: String)(conn: Conn ...

  10. webpack4升级指南

    webpack4升级指南 鉴于图书项目编译速度极慢的情况(项目里面module太多了,编译慢很正常)且最近需求不多(很少出现的空挡期).所以我觉得搞一波webpack升级,看看有没有帮助.webpac ...