评论

微信小程序云开发教程-微信小程序框架的介绍

微信小程序云开发教程

同学们大家好,我是小伊同学,今天我们来学习微信小程序框架。



  微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的。相同点在于他们使用的开发语言代码结构以及代码的运行机制是一样。但是他们也存在一些不同之处,最直观地来看,网站页面是运行在浏览器中,微信小程序是运行在微信中。此外,微信小程序能够做到与微信紧密相融,使得在一些功能上的开发更为方便。比如获取用户身份,因为微信账号实际上已经标识了用户身份,只需要调取微信的信息就能很方便地知道用户是谁。此外还有包括手机位置信息,使用手机存储等,借助微信这一平台,小程序都能达到近乎原生APP的操作体验。



  我们要学习微信小程序的开发,首先就要来了解一下一般的前端开发是什么样的。



  前端的开发一般采用的是 HTML+ CSS + JS 这样的组合,使用了三种开发语言,那么他们都是干什么用的呢?


  假设做一个网站或者小程序是建造一间房子,那么html搭建了房子的骨架,通过html我们可以给房子设置一些墙、柱子和门窗。这些我们称之为组件,顾名思义,是房子的组成部件。那么在实际的前端中,这些柱子和门窗就是图片、链接、输入框和按钮等这些组成一个页面的基本元素,有了这些也就有了这个页面的框架。


  而CSS是用来对房间进行装修美化的,就像是把墙面涂上不同的颜色,确定好门窗的摆放位置,是一切看起来非常的赏心悦目。在实际的前端中,就是给每个页面元素加上样式,包括大小、颜色、位置、形状等等。通过css,我们的页面才有了漂亮的视觉效果。


  js的作用则是让门和窗户动起来,给组件添加需要的动态效果,比如对鼠标点击的响应,动态地改变展示数据等功能。


  通过html+css+js这三部分的配合,最终构成了一个完整的前端。那么小程序也是如此,在小程序中,html变为了wxmlcss变成了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 配置文件,用来配置小程序及其页面是否允许被微信索引。


点赞 0
收藏
评论
登录 后发表内容