1、黑马程序员：微信小程序详解概念介绍相信最近各位同学已经被各种关于微信小程序的介绍刷屏了, 大家应该也关心这个新兴起的东西, 但是对于我们 Android 开发的同学, 或者对于我们 iOS 开发的同学, 可能很难马上上手去做, 也很难去理解这是一个什么东西, 那这篇文章就从理论上简单的向大家说明以下几个问题1. 微信小程序是什么2. 微信小程序开发所使用的技术栈, 以及对它的细致讲解3. 微信提供的小程序开发框架相信通过这篇文章, 起码大家对于微信小程序会有一个更直观的认识, 也能上手进行一些简单的开发接下来看第一个部分的内容, 微信小程序是什么, 在这之前先看一下官方的解释我们提供了一种新的
2、开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。微信小程序是什么首先微信小程序这五个字中最重要的有两个词, 一个是小, 一个是程序, 我们分别来看这两个词所表达的意思程序首先是程序一词, 微信小程序所提供的体验是原生的, 而不是 H5, 理论上微信小程序提供的是完全原生的体验 那微信是如何实现的呢? 总体上微信借助了 React Native 的四项, 那 React Native 在下面我会简称为 RN, 关于 RN 具体的介绍请参照 React Native 中文网, 而微信小程序基本上就是基于 RN 的框架设计原理自己鼓捣了一个轮子
3、 , 为什么我这么说, 我有没有证据? 请参照微信小程序框架原理也就是说, 微信就是一个云操作系统, 你可以开发程序, 运行在微信中 , 你的这个程序是完全类似于原生的体验, 就像你使用 Android 的 SDK 开发一个程序, 运行在 Android 手机中一样, 而你为微信开发一个程序, 可以运行在 Android 上, iOS 上, 所有有微信的地方, 你的程序都可以运行看到这里, 就会有很多同学觉得, 我靠, 那我的 Android 白学了, 那我的 iOS 白学了, 其实是不然的, 接下来我们再来看看微信小程序中的小字小虽然微信小程序能够提供近似原生的体验, 但是大家不用慌张, 微
4、信小程序还远不可能代替原生应用, 有如下两个原因首先, 微信再大再完整, 也只是一个程序, 在微信里面玩这种大型游戏, 想想就觉得难受其次, 微信运行在 iOS 和 Android 中, 本身微信就是受限的, 苹果也不可能让微信把自己的命给革了, 所以微信小程序本身也会受到很多限制但是客户端开发者还是有必要了解一些微信小程序的开发, 这样也能做到知己知彼技术栈这个章节简单的介绍一下微信小程序所使用到的一些知识, 并且对这些知识进行一些简单的了解, 大概有如下的几个方面 HTML CSS JSHTMLHTML 类似于我们经常用到的 layout, 是一种类似于 XML 的文档语言, 使用标签来描
5、述一个页面的结构来看一个简单的 HTML 例子1. 2. 3. 4. 5. HelloWorld6. 7. 8. 9.10. 这是一个超链接11. 12. 上述例子中的一些概念 html, head, body 叫做标签 , 标签有标签的名称 img 是一个图片标签, 通过 img 的属性 src 可以设置图片的路径 , 通过路径找到图片 a 标签是链接标签, 通过 href 来设置链接到的目标, 而 a 标签开闭标签之间的叫做标签内容, a 标签的内容是标签显示在页面中的文本这就是一个常见的 html 结构 , 可以复制并且查看, 通过这个例子 , 大家基本上就已经能够掌握 HTML 的语法
6、了 , 和我们的 layout 非常类似, 但是要注意想 a 标签这样的标签写法, 和我们平常的写法略有不同HTML 掌握到这里已经差不多了, 不用太过深究, 这些标签在微信小程序的开发中基本上没用, 微信有一套自己的标签组件, 但是一定要理解这种写法才行CSS刚才我们已经见过 HTML 的写法了, 下面来简单的看一下 CSS 的一些基本特点 首先, HTML 用来 描述页面结构, 这一点很重要, 也就是说, HTML 主要的作用是描述页面上有什么元素, 大致的排列, 大致的顺序, 而不关心页面长相 那元素(或者我们称之为控件)的长相, 例如什么字体大小, 什么颜色等, 这些长相或者叫表现上的
7、东西, 通过 CSS 来描述, 包括相对的位置等, 都是 CSS 来描述为了说明 CSS 的作用和写法, 我们对刚才的程序做一个扩展1. 2. 3. 4. 5. HelloWorld6.7. 8. .img_simple 9. border: 1px solid #ccc;10. padding: 5px11. 12. 13.14. 15. 16. 17.18. 这是一个超链接19. 20. 细心的同学可能会发现, 多出来了一个 style 标签, style 标签中写的好像还不是 XML, 那这个就是我们的 CSS, 类似 JSON, CSS 中通过冒号来表示 key-value 的分隔,
8、通过分号来表示不同属性之间的分隔了解了 CSS 的写法以后, 接下来我们细致的探讨一下 CSS 的原理 如果要给某个标签添加修饰(长相)属性, 需要先找到这个标签 CSS 主要的组成部分有以下三个 o 选择器o 位置属性o 元素属性我们一个一个来解读一下:选择器选择器就是通过某种方式找到一个标签, 例如我们上面的写法, 首先给 img 标签添加一个 class 属性 img_simple, 然后在 CSS 中.img_simple 选中了这个标签, 就可以给这个标签添加 CSS 属性了, 这也类似于我们平常所写的 findViewById位置属性在 Android 中我们使用布局和一些位置属性
9、来确定一个元素的位置, 那 CSS 中如果要确定一个元素位置的话, 通常只使用位置属性即可, 而位置属性就是类似于我们Android 中的 layout_marginLeft paddingLeft 等元素属性元素属性就是类似于我们 Android 开发中常用到的 textColor textSize 等属性微信小程序的开发并不直接使用 HTML, 但是基本上却直接使用 CSS, 所以 CSS 还是有必要学习一下的, 受限于篇幅, 在这里不展开继续讨论 CSS 的一些具体细节了, 但是提供给大家几篇非常优秀的文章, 便于大家更细致的了解 CSSCSS 入门最好的手册 CSS 中的 Flex 布
10、局语法 CSS3 简介JavaScript这个部分我准备详细的介绍一下, 同时和 Java 做一个对比变量和数据类型1. var i = 10;2. var s = “hello“;3. var bool = true;4. var arr = 1, 2, 3;5. var arr = new Array(1, 2, 3);JS 中变量的声明和 Java 有显著的不同 JS 中使用 var 关键字来声明变量, 不能使用具体的变量类型 o 因为变量没有数据类型, 在运行时可以随时改变变量的数据类型 JS 中也有数据类型的概念, =后面的是什么类型的数据一般就是什么类型 o 数值型, 这一点和 J
11、ava 不同, Java 中有 int 和 float 之分, 但是 JS 中没有o 字符串型, js 中没有字符型这个数据类型, 同时 js 声明字符串的时候可以使用双引号也可以使用单引号o 布尔型o 数组, 数组有两种声明方式 , 它们是完全等价的 不同于 Java, JS 中只有两种作用域, 一种是全局作用域 , 一种是函数作用域, 在 JS中并不是每个花括号之间都是一个作用域, 这一点需要注意函数1. function funName(arg1, arg2) 2. / function body3. return value;4. 5.6. funName(10, 20);很显然 JS
12、 中定义函数的方式和 java 不同 JS 中没有 private 和 private 等限定符, 无论是变量还是函数都没有 JS 的函数参数不声明, 将变量名表示出来即可, 因为 JS 中并没有变量类型的概念, 变量可以是任何类型 JS 中调用函数的方式和 Java 一模一样, 函数名(参数 1, 参数 2), 先牢记这一点, 很重要 这种函数的定义方式在 JS 中叫做函数字面量, 简而言之就是字面上表示一个函数的方式JS 中的函数也是一种数据类型, 这一点和 Java 有巨大的不同, 在 JS 中函数是一等公民, 可以传递可以赋值, 同时函数还是一个类型, 如下1. var funName
13、 = function(arg1, arg2) 2. / function body3. return value;4. 5.6. funName(10, 20);如上定义了一个匿名函数, 语法和定义一个普通函数有略微的区别 匿名函数就是声明了一个函数变量, 而变量的值就是一个函数声明, 但是这个声明不加函数名 匿名函数的声明方式和字面量声明函数基本上是等价的, 只有一个细微的差别, 就是这种方式声明的函数, 在声明后面的代码才可以使用此函数, 而字面量没有这个限制 这种函数的声明很显著的说明了一个问题, JS 中的函数是一种数据类型, 但是 Java中的函数不是, Java 中的函数只有字面
14、量的定义方式, 并不是一个值 其实字面量的方式创建函数, 最终 JS 引擎处理的过程也是通过将其转为这种方式进行存储下面对函数做一个扩展1. function funName(arg1, arg2) 2. / function body3. return value;4. 5.6. var fun = funName;7.8. fun(10, 20); JS 中无论何种方式声明函数, 其都是一个值, 而值是可以赋值给其它变量的 函数调用和函数赋值是不同的 o 函数的调用是通过函数名()的方式, 记得后面有括号o 而函数当做变量使用的时候, 对其进行赋值是直接使用函数名o 这一点要牢记对象众所周
15、知的, JS 中没有类型的概念(不准确), 但是这不妨碍 JS 是一种面向对象的语言, JS 中依然有继承和聚合, JS 实现面向对象的方式和 Java 不同, JS 是一个面向原型的语言, 这一点属于高级 JS 技巧的部分, 不需要特别的关注, 但是要知道, JS 中无法声明一个类型, JS 中的对象更类似于 Java 中的 Map 的概念上面我们提过 JS 中数组的定义方式, 下面来看看如何定义一个 JS 中的对象1. var obj = 2. property1: “nihao“,3. property2: 10,4. property3: true5. 6.7. var obj = n
16、ew Object();8. obj.property1 = “nihao“;9. obj.property2 = 10;10. obj.property3 = true;通过这种方式, 你会发现, 这和 JSON 很像, 同时又像 Java 中的 Map 集合 对象中是一些键值对, 每一个键值对又是一个变量的声明, 是 JS 中对象的属性 对象有两种声明方式, 第一种叫做对象字面量, 第二种方式是正常的声明 无论何种声明方式, 在使用阶段, 如果赋值的目标属性存在, 则修改其值, 如果不存在, 则创建并赋值但是, 同学们可能不理解 JS 中的函数这么简单, 如何实现那么复杂的功能, 那我们接
17、下来看一下如何给一个对象添加一个函数1. var obj = 2. property1: “nihao“,3. property2: 10,4. property3: true,5. sayName : function(arg1, arg2) 6. return value;7. 8. 9.10. var obj = new Object();11. obj.property1 = “nihao“;12. obj.property2 = 10;13. obj.property3 = true;14. obj.sayName = function(arg1, arg2) 15. return
18、value;16. 17.18. obj.sayName();这就是给一个对象添加方法的方式, 签名已经介绍过, 在 JS 中函数是一种数据类型, 可以复制给变量, 同时我们也介绍过, 对象中的属性其实就是变量, 那很好理解, 给对象添加一个方法, 就是给对象中一个变量赋值上一个函数类型的数据而已总结以上就是 JS 简单的语法基础, 这个部分着重关注的是一些和 Java 的不同, 更具体的语法请参照手册, 非常简单, 对大家来说, 简单看几眼, 也掌握的八九不离十了HTML, CSS, JavaScript 的手册微信小程序接下来就要进入微信小程序的学习阶段了, 微信小程序并不难, 但是由于我
19、们并没有接触过前端的开发, 所以可能不太好理解, 练习一个小案例, 会有更深的印象在开始之前, 有一点需要强调, 虽然微信小程序使用了大量的前端开发的技术, 但是微信小程序是原生的, 并且这些代码无法在浏览器中执行环境1. 获取微信小程序的 AppID 由于现在微信小程序还是内侧阶段, 所以大家应该都没有内侧资格 , 包括我也没有, 所以这一步可以省略2. 安装 IDE 1. 下载 Windows64 位 IDE 下载 Windows32 位 IDE 下载2. 一路下一步即可3. 新建项目 1. 打开已经安装的程序 2. 在手机上使用微信扫描二维码登录 3.点击加号创建一个新的项目 3. 填写
20、信息, 第一个输入框点无 AppId 4. 点击添加项目, 到此为止已经成功创建了一个微信小程序的工程编辑器的选择在 JS 的领域 , 一般情况下不会使用集成开发环境, 也就是我们常说的 IDE, 类似 Eclipse, AndroidStudio, IntelliJ IDEA 等前端开发者更多的会去选择 Atom, Sublime, EditPlus 等附带一些快捷功能的编辑器, 这是因为 JS 是一个动态语言, 并且本身无需编译执行我们在做微信小程序的开发过程中, 可以使用微信提供的工具中的编辑器进行开发, 也可以选择任何一个你想用的编辑器, 直接编辑文本即可微信提供的工具中所附带的编辑器
21、是 VS Code 的核心编辑器核心概念一个微信小程序其实类似于一个 Android 应用, 开发模式也很类似, 所使用到的组件也很类似, 接下来简单的阐述一下开发一个微信小程序的过程1. 创建工程2. 编写 app.js 文件, 类似于 Android 中的 Application 类3. 编写 app.json 配置文件, 类似于我们 Android 中的 Manifest 清单文件, 用于配置工程, 注册页面4. 编写具体的页面公共文件小程序中的公共文件主要指的是三个 app.js, app.json, app.wxss, 分别来看一下这三个文件分别的作用app.js 类似于 Andro
22、id 中的 Manifest 清单文件, 用于获取程序的声明周期事件, 声明全局共享的方法和数据app.json 我们使用 app.json 文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等app.wxss 小程序公共样式表, 类似于我们 Android 中的 Manifest 里的 application 节点配置的theme分层微信小程序开发的核心概念中, 分层是一个很重要的部分, 现在先来回顾一下 Android 中的分层 逻辑层, 也就是平常我们所写的 Activity 视图层, 也就是我们平常所写的 layout 文件在进行下面的列举
23、之前, 先简单解释一下小程序开发中的模块, 或者在我们Android 中称之为组件之所以小程序中叫做模块, 是因为小程序并不像 Android 那样复杂, 并没有 Service, Provider, BroadcastRevicer 等组件, 模块只是一个页面 , 类似于 Android 中的 Activity上面也就是我们 Android 中常说的系统提供的 MVC 分层, 在微信小程序提供的开发框架(Framework)中, 也借鉴了很多现有的 JS 框架(React, Vue), 由于 JS 本身的一些特性, 以及微信小程序的量级也比较轻, 所以在工程化上, 微信小程序做的更彻底一些,
24、 分层也更明确微信团队对现有的大部分程序做了一些分析, 发现常见的逻辑层次有: 数据逻辑, 页面（数据呈现）以及（页面间的）导航 比如我们拿新浪微博 APP 举例： 数据逻辑：我关注的人，我的粉丝，微博用户所发的微博，以及这些微博数据的组织，比如按关注人分组等等这类跟数据相关的部分。 页面：对数据的呈现，比如我关注的人的微博列表，某个用户的微博主页，长微博文章页等等。 导航：页面间的跳转。比如从微博列表页面可以进入到微博详情页，点击微博发帖人头像可以进入个人主页等等。由于这些思考, 微信给出了一个开发框架, 这个框架名字叫做 MINA, 这个框架在页面部分有如下的部分:逻辑层js 文件视图层w
25、xml 文件存放 HTML 代码, 但是这个部分的 HTML 并不是原生的 HTML 代码, 而是微信提供了自己的一套标签体系 wxss 文件存放 CSS 代码, 此处的 CSS 代码基本上就是原生的 CSS, 可以支持 CSS3简单介绍了一下核心的一些概念, 下面通过一个小例子, 来示例如何开发微信小程序豆瓣电影界面流程1. 建立工程文件和配置文件 o 创建 app.js 全局对象, 在全局对象中提供获取豆瓣服务器数据的方法o 配置清单o 在全局提供访问豆瓣服务器的方法2. 新建电影列表页面 1. 创建 wxml 文件来编写页面结构2. 创建 wxss 文件来描述页面中元素的样式3. 创建
26、js 文件从豆瓣的服务器中获取数据, 并显示在界面上豆瓣开放 API豆瓣网是一个著名的网站, 其中有电影相关的信息, 我们这个例子所完成的功能就是拉取豆瓣服务器中的热映电影信息, 然后通过列表的方式呈现出来获取豆瓣服务器数据的方法豆瓣电影提供了开放 API, 调用一个接口便可以获取请求地址 https:/ 参数封装在一个 json 字符串中, 包含在请求体中发送 支持的参数有: start 从哪一条开始 count 数据的总长度点此处查看详细文档工程结构 根目录, 根目录中存放一些工程文件, 和全局文件 , 一般情况下有如下三个 o app.js 中有 App 函数, 用于获取整个小程序的实例
27、, 生命周期等, 类似于Android 中的 Application 类o app.json 是整个小程序的注册文件, 类似于 Anroid 中的 Manifesto app.wxss 是整个正序的公共 CSS, 类似于 Android 中 Application 的Theme pages 目录, pages 目录用于存放所有的页面 o movies 文件夹, 热映电影列表 movies.js 电影数据获取逻辑写在这个文件中, 类似于 Android 中的 Activity movies.wxml 电影页面的空间结构文件, 类似于 Android 中的Layout movies.wxss 存放
28、电影页面的 CSS, 也就是 Layout 的装饰小程序开发中, 每一个页面都对应三个文件, js, wxml, wxss, 这是一开始就要创建好的创建工程在这个步骤中, 主要是为了创建工程文件, 以及一些配置文件, 类似于我们 Android 中的Application, manifest 等app.js先来看一下 app.js, 这个文件主要用途就是获取小程序的实例, 获取小程序的声明周期1. App(2. onLaunch: function() 3.4. 5. )app.json这个文件主要用于配置小程序, 有如下一些配置, 每个配置对应超链接是详细的介绍属性 类型 必填 描述page
29、s Array 是 设置页面路径, 配置方式类似于 manifest 中配置 Activitywindow Object 否 设置默认的窗口表现, 类似于 Application 的 themetabBar Object 否 设置底部 tab 的表现networkTimeout Object 否 设置网络超时时间debug Boolean 否 设置否是开启调试模式接下来来看一下这个示例的配置文件代码1. 2. “pages“ : 3. “pages/movies/movies“4. ,5.6. “window“ : 7. “backgroundTextStyle“:“light“,8. “na
30、vigationBarBackgroundColor“: “#000000“,9. “navigationBarTitleText“: “热映电影“,10. “navigationBarTextStyle“:“white“11. ,12.13. “networkTimeout“: 14. “request“: 10000,15. “connectSocket“: 10000,16. “uploadFile“: 10000,17. “downloadFile“: 1000018. ,19.20. “debug“: true21. 可以是用生成工具来生成配置文件由以上得知, 这个程序只有一个页面,
31、 就是 pages 中配置的 movies 页面,“pages/movies/movies“ 这个配置的含义是 , pages 目录下, 有一个 movies 目录, movies 中是具体的页面代码, 一共有三个文件, 分别是 movies.wxml, movies.wxss, movies.jsapp.wxssapp.wxss 是全局的样式表文件, 全局所有页面都会应用到这个样式表中所描述的样式1. page 2. font-family: -apple-system-font, Helvetica Neue, Helvetica, Microsoft YaHei, sans-serif;
32、3. height: 100%;4. width: 100%;5. background-color: #fff;6. display: flex;7. flex-direction: column;8. 这个文件主要描述了全局所有的页面的基本主题, 包括字体, 宽高, 背景颜色等, 具体的CSS 语法请参照手册, 这个文件中的语法就是标准的 CSS3 语法movies 页面每一个页面对应的都有三个文件 js 文件 , 其中存放 js 代码, 用于获取页面的生命周期, 请求网络等 wxml 文件, 其中是 html 的语法, 但是不是标准的 html, 是微信自己的一套标签体系, 用来描述页面
33、的结构, 控件之间的关系等 wxss 文件 , 其中是标准的 css 语法, 用来描述页面上的控件的长相, 类似于字体, 颜色等js 文件下面来看一下这个电影列表的 js 文件1. / 调用 Page 方法, 传入一个匿名对象, 这个对象中可以包含页面的生命周期回调函数, 可以包含默认的用于显示的数据2. Page(3. / 用于显示的数据4. data: 5. items: 6. ,7.8. / 当页面加载完成时被调用9. onLoad: function() 10. / 页面加载完成的时候, 请求网络数据, 并设置给页面11.12. var page = this;13.14. getDo
34、ubanMovies(function(res) 15. / 通过这个方法, 可以将数据设置给页面16. page.setData(items: res.data.subjects);17. , function() 18.19. );20. 21. )22.23. / 获取网络数据, 传入两个函数, 分别是成功和失败的回调24. function getDoubanMovies(onSuccess, onFailed) 25. var API_URL = “https:/ var params = 27. count : 2028. ;29.30. / wx.request 是微信提供的网络
35、请求框架, 小程序开发的时候只能使用wx 提供的 api, 而不能使用 ajax 调用31. wx.request(32. url: API_URL + in_theaters,33. data: params,34. header: Content-Type: application/json,35. success: onSuccess,36. fail: onFailed37. )38. 和 Android 开发时最大的不同是, 小程序中可以将数据提供给layout(wxml, html), 在 layout 中写简单的 js 代码来获取数据并显示接下来, 页面已经获取到数据了, 一起来
36、看一下如何将这些数据显示在页面上wxml 文件在看代码之前, 大家一定要知道一件事, 通过在 js 中调用 Page.setData()方法, 可以将一个对象传给 wxml 文件, 在 wxml 文件中可以获取这个传入的数据, 并且可以通过 html中的代码 这种方式来在 wxml 文件中包含简单的 js 代码, 接下来简单的看一下如下代码1. 2. 3. 4. 5. 6. item.title7. item.original_title(item.year)8. 导演： item.name 9. 10. 11. item.rating.average12. 13. 14. 15. 以上就是整
37、个布局文件, 这里面使用了很多组件, 类似于 Android 中的控件, 微信小程序提供了很多组件, 便于我们进行开发, 基本能够满足日常的开发需求, 组件列表请查看官方组件文档 scroll-view, 类似 Android 中的 ScrollView block, 是语句控制标签 view, 是类似于 Android 中的四大布局, 但是这个地方只有一个布局这个地方不是特别容易理解, 请参照微信官方说明来仔细练习一下, 并且通过这个代码的运行, 思考一下这个地方wxss 文件这个文件不是很重要, 这个文件主要用于描述布局中的元素的长相, 这个也是前端开发中的惯用技巧, 和我们在 Andro
38、id 开发的时候直接在 layout 描述页面长相不同, 前端开发中布局和样式是分离的, 便于修改和控制这个部分内容比较多, CSS 本身也比较复杂 , 酌情了解就可以1. .container_scroll 2. display: flex;3. flex: 1;4. flex-direction: column;5. 6.7. .item 8. display: flex;9. padding: 20rpx 40rpx;10. border-bottom: 1rpx solid #eee;11. cursor: pointer;12. 13.14. .item .poster 15. wi
39、dth: 128rpx;16. height: 128rpx;17. margin-right: 20rpx;18. 19.20. .item .meta 21. flex: 1;22. 23.24. .item .meta .title,25. .item .meta .sub-title 26. display: block;27. margin-bottom: 15rpx;28. 29.30. .item .meta .title 31. font-size: 32rpx;32. 33.34. .item .meta .sub-title 35. font-size: 22rpx;36. color: #c0c0c0;37. 38.39. .item .meta .artists
