微信小程序云开发教程-微信小程序框架的介绍
同学们大家好，我是小伊同学，今天我们来学习微信小程序框架。
微信小程序实质上是一款基于web技术的应用程序，他和我们平常所接触到的前端网页是大同小异的。相同点在于他们使用的开发语言，代码结构以及代码的运行机制是一样。但是他们也存在一些不同之处，最直观地来看，网站页面是运行在浏览器中，微信小程序是运行在微信中。此外，微信小程序能够做到与微信紧密相融，使得在一些功能上的开发更为方便。比如获取用户身份，因为微信账号实际上已经标识了用户身份，只需要调取微信的信息就能很方便地知道用户是谁。此外还有包括手机位置信息，使用手机存储等，借助微信这一平台，小程序都能达到近乎原生APP的操作体验。
我们要学习微信小程序的开发，首先就要来了解一下一般的前端开发是什么样的。
前端的开发一般采用的是 HTML+ CSS + JS 这样的组合，使用了三种开发语言，那么他们都是干什么用的呢？
假设做一个网站或者小程序是建造一间房子，那么html搭建了房子的骨架，通过html我们可以给房子设置一些墙、柱子和门窗。这些我们称之为组件，顾名思义，是房子的组成部件。那么在实际的前端中，这些柱子和门窗就是图片、链接、输入框和按钮等这些组成一个页面的基本元素，有了这些也就有了这个页面的框架。
而CSS是用来对房间进行装修美化的，就像是把墙面涂上不同的颜色，确定好门窗的摆放位置，是一切看起来非常的赏心悦目。在实际的前端中，就是给每个页面元素加上样式，包括大小、颜色、位置、形状等等。通过css，我们的页面才有了漂亮的视觉效果。
js的作用则是让门和窗户动起来，给组件添加需要的动态效果，比如对鼠标点击的响应，动态地改变展示数据等功能。
通过html+css+js这三部分的配合，最终构成了一个完整的前端。那么小程序也是如此，在小程序中，html变为了wxml，css变成了wxss，这是因为在一些语法和用法上，小程序与普通的前端存在一些差别，但是他们每一部分负责的工作和他们之间的关系都没有变化，大家可以类比加以理解。
同时，微信小程序的框架分为两层，分别是视图层和逻辑层，框架的视图层由WXML与WXSS编写，由组件来进行展示，负责小程序的外貌；逻辑层又称为AppService，由js编写，负责小程序的行为动作。因此，我们编写的代码主要是三部分：视图层、逻辑层以及他们之间的联系互动，这一联系具体就是视图层与逻辑层之间的交互。逻辑层将数据进行处理后发送给视图层，同时接收视图层的事件反馈。视图层将逻辑层的数据展示到界面，同时将视图层的事件发送给逻辑层。
下面我们来看一下小程序的工程目录，在云开发创建的工程中，小程序的前端和后端代码均在一个目录下，即在小程序根目录下有四部分，cloudfunctions为云开发环境下的后端代码，竖线后为云环境的名称，比如这里的test，这部分代码主要由后端程序员编写，miniprogram为前端代码，前端需要编写的代码都放在这个文件夹里面。
此外还会有一个readme自述文件和一个开发工具配置文件，这两个文件均由开发工具自动创建填写，不需要我们关注，有兴趣的同学可以自己探索，下面我们主要关注miniprogram文件夹。
在一个小程序前端代码中，也即miniprogram文件夹下，一共有四种类型的文件，分别是：.json、.wxml、.wxss、.js。
json文件主要用来配置项目或者页面的属性，称为配置文件，文件内均为json格式的对象。
Wxml文件用来描述页面的结构，称为模板文件，代码类似html语言。
Wxss文件描述页面的样式，也称为样式文件，代码类似css语言。
js文件用来描述页面的逻辑，即处理页面和用户的交互，也称为脚本逻辑文件。这四种是小程序代码中比较核心的文件类型，
此外，还可以在小程序中添加一些图片文件来美化页面，但这并不是必须的，一般来说我们使用的图片主要为.png和.jpg格式。
小程序前端都放在miniprogram文件夹下，包含一个描述整体程序的app 和多个描述各自页面的page。描述整体的是以app开头的三个文件，分别为项目全局的js（全局数据和动作）、json（全局配置）和wxss（全局样式），三个文件必须放在根目录下，就是文件夹的最外层。
一个pages文件夹，用于存放小程序的页面代码，该文件夹下可以有任意数量的文件夹，每个文件夹表示一个页面，文件夹名称即为页面名称，文件夹下为该页面的全部代码，使用我们刚才说的四个类型的文件来描述这个页面，且四个文件的名称必须要和页面名称相同。
此外，在miniprogram文件夹下，还可能会有一个utils文件夹，其中放置的js文件用于存放公共的js代码，方便在不同页面调用。云开发环境下没有自动帮我们创建出来，我们的项目也不需要用到，因此在右边的目录下大家找不到。
为了统一管理图片，我们常常手动在目录下添加images文件夹。
最后，sitemap 配置文件，用来配置小程序及其页面是否允许被微信索引。
好了，本小节的内容就是这些，如果大家有什么问题，欢迎在文末留言，我们明天继续哟~
想看视频版？
关注公号“微程序学堂”，我们的视频教程即将上线
如果你自己写了好文章想投稿
请联系我们
微信小程序云开发教程-微信小程序框架的介绍相关推荐
- uniapp同步获取用户信息_微信小程序云开发教程微信小程序的API入门获取用户身份信息系列API...
同学们大家好,我是小伊同学,上一节我们介绍了一些常用API,今天我们接着来学习一组API,那就是获取用户身份信息的API. 在微信小程序中,我们往往需要获取用户的身份信息,比如昵称.头像.性别.地区等 ...
- 页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递
同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容. 在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息, ...
- ❤️微信小程序 云开发 教程合集（视频+图文）免费❤️
一.视频版 微信小程序云开发视频教程上线啦 二.图文版 (1)预备知识 1. 怎么注册开通个人微信小程序 2. 微信小程序云开发教程-互联网软件的运作模式 3.微信小程序云开发教程-云开发对微信小程序 ...
- 基于微信小程序云开发的投票小程序源码，图文投票微信小程序源码
功能介绍 投票活动十分火,商家,企业,机构偶尔都会来一场投票活动评选,本小程序支持图文投票,简单方便.随时随地完成投票,可以方便设定投票模式(按天按全程,投票数限定). 本代码前后端完整代码包投票列表 ...
- 微信小程序云开发成绩查询小程序的制作过程。
微信小程序云开发成绩查询小程序的制作过程. 如果觉得我讲的好可以点个关注. 明确自己的目的,到底要做一个怎么样的小程序. 我先上效果图: 确定后就可以开始自己布局.主要是用css 1.先看首页,首页主 ...
- 小程序云开发教程七：贴子的详情及评论功能
我们先看看界面: 我们如果要实现评论功能, 先看一下总的数据结构: 那么需要什么参数呢? 参数如下 comment: 评论内容username: 用户名time: 评论时间userId: 用户idid ...
- 小程序云开发实现微信支付，不需要搭建服务器
一.开发微信支付功能一定要架设服务器吗? 2019年的最后一天,舍得叔叔沉浸在探索的兴奋中,验证了微信小程序云开发也能优雅实现微信支付!小程序的目标是建立一个"serverless" ...
- mysql导入微信小程序云开发_微信小程序-云开发数据库上传json文件
小程序新增了云开发功能,对于个人开发者是个利好消息.可以省去购买服务器,购买域名以及繁琐配置等步骤,减轻了开发者的负担.至于如何云开发我就不在这里赘述了,请移步微信小程序云开发官方文档,说的很清楚.这 ...
- 微信小程序云开发-树洞小程序Treehole（介绍）
记录一款基于云开发的微信小程序. 树洞,顾名思义是作为匿名吐槽的平台,主要功能可以参照微信朋友圈的形式,不过采取的是匿名的方式. 主要基于微信小程序云开发,前端个人主页页面的界面使用的是ColorUi ...
最新文章
- Git-TortoiseGit完整配置流程
- dede 删除文章的同时自动删除生成的html文件夹,删除织梦自带编辑器自动加DIV的方法...
- 查看oracle连接数满了的记录,查看Oracle的连接数
- POJ2019(二维RMQ问题 ST)
- JMH：如何设置和运行JMH基准
- 程序员想知道代码是怎样跑起来的
- 7-160 验证“哥德巴赫猜想” (20 分)
- 【剑指Offer学习】【面试题40：数组中仅仅出现一次的数字】
- java并发编程面试题_阿里常用Java并发编程面试试题总结
- 基于Lua语言的wireshark插件编写
- java读取配置文件方法_java 三种读取配置文件的方式
- 数字化智慧工地，工地智能监管一体化解决方案
- 洛谷P3369 AVL树
- 分享一些自己的学习经验和技巧
- Arduino框架下ESP8266获取和风天气的第三方库实现天气时钟制作思路
- mybatis一对多 多对一
- 利用3D面部表情及口语语言的多模态方法进行抑郁症智能化识别
- 2020科目一考试口诀_2021驾考科目一技巧口诀
- cad捕捉不到标注线上的点_CAD捕捉不到正在绘制的多段线上的点怎么办
- 抖音私信名片_抖音消息卡片_抖音跳转微信_抖音私信跳转_抖音落地页