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

一、小程序框架

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

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. Asp.NetCore轻松学-使用Docker进行容器化托管

    前言 没有 docker 部署的程序是不完整的,在写了 IIS/Centos/Supervisor 3篇托管介绍文章后,终于来到了容器化部署,博客园里面有关于 docker 部署的文章比比皆是,作为硬 ...

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

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

  3. 贾天昊 - Nick

  4. 六大设计原则(三)DIP依赖倒置原则

    依赖倒置原则DIP(Dependence Inversion Principle) 依赖倒置原则的含义 高层模块不能依赖低层模块,二者都应该依赖其抽象. 抽象不应该依赖于细节. 细节应该依赖抽象. 什 ...

  5. maven下载及安装最详解

    maven的下载及安装 1.maven下载地址:https://maven.apache.org/download.cgi 2.将下载的安装包解压到自定义目录 3.配置环境变量 此电脑->右键属 ...

  6. 14 ,CSS 文字与文本

    1.CSS 中长度与颜色 2.CSS 中的文字属性 3.CSS 中的文本属性 14.1 CSS 中长度与颜色 长度单位 说明 in 英寸 cm 公分 mm 公里 cm 以目前字体高度为单位 ex 以小 ...

  7. win10 DVWA下载安装配置(新手学渗透)

    电脑重装系统了,需要重新装一下渗透测试的学习环境DVWA,借此机会就跟大家讲一下DVWA的安装过程,因为不同的电脑配置.环境不同,在我的电脑上按照我这个安装教程是一次性就安装好了的.如果安装的时候遇到 ...

  8. 第二周Python学习笔记

    分支结构: ①  单分支结构: 非常简单,if 条件语句,如果为true 则输出结果.否则不输出结果 ②  二分支结构: 条件结果为true则执行语句1,否则就执行语句2 If <条件>: ...

  9. 原生的 django 分页

    原始的 django 分页 # 基本 写法 class Paginator(object): def __init__(self, object_list, per_page, orphans=0, ...

  10. ReactNative之结合具体示例来看RN中的的Timing动画

    今天继续更新RN相关的博客.上篇博客详细的聊了RN中关于Flex布局的相关东西,具体请参见<ReactNative之参照具体示例来看RN中的FlexBox布局>.本篇博客继续更新RN的动画 ...