微信小程序详解

黑马程序员：微信小程序详解

概念介绍

相信最近各位同学已经被各种关于微信小程序的介绍刷屏了, 大家应该也关心这个新兴起的东西, 但是对于我们Android开发的同学, 或者对于我们iOS开发的同学, 可能很难马上上手去做, 也很难去理解这是一个什么东西, 那这篇文章就从理论上简单的向大家说明以下几个问题

1.微信小程序是什么

2.微信小程序开发所使用的技术栈, 以及对它的细致讲解

3.微信提供的小程序开发框架

相信通过这篇文章, 起码大家对于微信小程序会有一个更直观的认识, 也能上手进行一些简单的开发

接下来看第一个部分的内容, 微信小程序是什么, 在这之前先看一下官方的解释我们提供了一种新的开放能力，开发者可以快速地开发一个小程序。小程序

可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

微信小程序是什么

首先微信小程序这五个字中最重要的有两个词, 一个是小, 一个是程序, 我们分别来看这两个词所表达的意思

程序

首先是程序一词, 微信小程序所提供的体验是原生的, 而不是H5, 理论上微信小程序提供的是完全原生的体验

那微信是如何实现的呢? 总体上微信借助了React Native的四项, 那React Native在下面我会简称为RN, 关于RN具体的介绍请参照React Native 中文网, 而微信小程序基本上就是基于RN的框架设计原理自己鼓捣了一个轮子, 为什么我这么说, 我有没有证据? 请参照微信小程序框架原理

也就是说, 微信就是一个云操作系统, 你可以开发程序, 运行在微信中, 你的这个程序是完全类似于原生的体验, 就像你使用Android的SDK开发一个程序, 运行在Android手机中一样, 而你为微信开发一个程序, 可以运行在Android上, iOS上, 所有有微信的地方, 你的程序都可以运行

看到这里, 就会有很多同学觉得, 我靠, 那我的Android白学了, 那我的iOS白学了, 其实是不然的, 接下来我们再来看看微信小程序中的小字

小

虽然微信小程序能够提供近似原生的体验, 但是大家不用慌张, 微信小程序还远不可能代替原生应用, 有如下两个原因

首先, 微信再大再完整, 也只是一个程序, 在微信里面玩<炉石传说>这种大型游戏, 想想就觉得难受

其次, 微信运行在iOS和Android中, 本身微信就是受限的, 苹果也不可能让微信把自己的命给革了, 所以微信小程序本身也会受到很多限制

但是客户端开发者还是有必要了解一些微信小程序的开发, 这样也能做到知己知彼

技术栈

这个章节简单的介绍一下微信小程序所使用到的一些知识, 并且对这些知识进行一些简单的了解, 大概有如下的几个方面

HTML

CSS

JS

HTML

HTML类似于我们经常用到的layout, 是一种类似于XML的文档语言, 使用标签来描述一个页面的结构

来看一个简单的HTML例子

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.这是一个超链接

11.

12.

上述例子中的一些概念

•html, head, body叫做标签, 标签有标签的名称

•img是一个图片标签, 通过img的属性src可以设置图片的路径, 通过路径找到图片

•a标签是链接标签, 通过href来设置链接到的目标, 而a标签开闭标签之间的叫做标签内容, a标签的内容是标签显示在页面中的文本

这就是一个常见的html结构, 可以复制并且查看, 通过这个例子, 大家基本上就已经能够掌握HTML的语法了, 和我们的layout非常类似, 但是要注意想a标签这样的标签写法, 和我们平常的写法略有不同

HTML掌握到这里已经差不多了, 不用太过深究, 这些标签在微信小程序的开发中基本上没用, 微信有一套自己的标签组件, 但是一定要理解这种写法才行

CSS

刚才我们已经见过HTML的写法了, 下面来简单的看一下CSS的一些基本特点

首先, HTML用来描述页面结构, 这一点很重要, 也就是说, HTML主要的作用是描述页面上有什么元素, 大致的排列, 大致的顺序, 而不关心页面长相

那元素(或者我们称之为控件)的长相, 例如什么字体大小, 什么颜色等, 这些长相或者叫表现上的东西, 通过CSS来描述, 包括相对的位置等, 都是CSS来描述

为了说明CSS的作用和写法, 我们对刚才的程序做一个扩展

1.

2.

3.

4.

5.

6.

7.

13.

14.

15.

16.

17.

18.这是一个超链接

19.

20.

细心的同学可能会发现, 多出来了一个style标签, style标签中写的好像还不是XML, 那这个就是我们的CSS, 类似JSON, CSS中通过冒号来表示key-value的分隔, 通过分号来表示不同属性之间的分隔

了解了CSS的写法以后, 接下来我们细致的探讨一下CSS的原理

•如果要给某个标签添加修饰(长相)属性, 需要先找到这个标签