微信小程序详解

微信小程序详解---文章来自郑州传智播客双元课堂产品部李老师概念介绍相信最近各位同学已经被各种关于微信小程序的介绍刷屏了,大家应该也关心这个新兴起的东西,但是对于我们Android开发的同学,或者对于我们iOS开发的同学,可能很难马上上手去做,也很难去理解这是一个什么东西,那这篇文章就从理论上简单的向大家说明以下几个问题1.微信小程序是什么2.微信小程序开发所使用的技术栈,以及对它的细致讲解3.微信提供的小程序开发框架相信通过这篇文章,起码大家对于微信小程序会有一个更直观的认识,也能上手进行一些简单的开发接下来看第一个部分的内容,微信小程序是什么,在这之前先看一下官方的解释我们提供了一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。微信小程序是什么首先微信小程序这五个字中最重要的有两个词,一个是小,一个是程序,我们分别来看这两个词所表达的意思程序首先是程序一词,微信小程序所提供的体验是原生的,而不是H5,理论上微信小程序提供的是完全原生的体验那微信是如何实现的呢?总体上微信借助了ReactNative的四项,那ReactNative在下面我会简称为RN,关于RN具体的介绍请参照ReactNative中文网,而微信小程序基本上就是基于RN的框架设计原理自己鼓捣了一个轮子,为什么我这么说,我有没有证据?请参照微信小程序框架原理也就是说,微信就是一个云操作系统,你可以开发程序,运行在微信中,你的这个程序是完全类似于原生的体验,就像你使用Android的SDK开发一个程序,运行在Android手机中一样,而你为微信开发一个程序,可以运行在Android上,iOS上,所有有微信的地方,你的程序都可以运行看到这里,就会有很多同学觉得,我靠,那我的Android白学了,那我的iOS白学了,其实是不然的,接下来我们再来看看微信小程序中的小字小虽然微信小程序能够提供近似原生的体验,但是大家不用慌张,微信小程序还远不可能代替原生应用,有如下两个原因首先,微信再大再完整,也只是一个程序,在微信里面玩炉石传说这种大型游戏,想想就觉得难受其次,微信运行在iOS和Android中,本身微信就是受限的,苹果也不可能让微信把自己的命给革了,所以微信小程序本身也会受到很多限制但是客户端开发者还是有必要了解一些微信小程序的开发,这样也能做到知己知彼技术栈这个章节简单的介绍一下微信小程序所使用到的一些知识,并且对这些知识进行一些简单的了解,大概有如下的几个方面HTMLCSSJSHTMLHTML类似于我们经常用到的layout,是一种类似于XML的文档语言,使用标签来描述一个页面的结构来看一个简单的HTML例子1.!DOCTYPEhtml2.html3.head4.metacharset=utf-85.titleHelloWorld/title6./head7.body8.imgsrc=hello_world.gif/9.10.ahref=这是一个超链接/a11./body12./html上述例子中的一些概念html,head,body叫做标签,标签有标签的名称img是一个图片标签,通过img的属性src可以设置图片的路径,通过路径找到图片a标签是链接标签,通过href来设置链接到的目标,而a标签开闭标签之间的叫做标签内容,a标签的内容是标签显示在页面中的文本这就是一个常见的html结构,可以复制并且查看,通过这个例子,大家基本上就已经能够掌握HTML的语法了,和我们的layout非常类似,但是要注意想a标签这样的标签写法,和我们平常的写法略有不同HTML掌握到这里已经差不多了,不用太过深究,这些标签在微信小程序的开发中基本上没用,微信有一套自己的标签组件,但是一定要理解这种写法才行CSS刚才我们已经见过HTML的写法了,下面来简单的看一下CSS的一些基本特点首先,HTML用来描述页面结构,这一点很重要,也就是说,HTML主要的作用是描述页面上有什么元素,大致的排列,大致的顺序,而不关心页面长相那元素(或者我们称之为控件)的长相,例如什么字体大小,什么颜色等,这些长相或者叫表现上的东西,通过CSS来描述,包括相对的位置等,都是CSS来描述为了说明CSS的作用和写法,我们对刚才的程序做一个扩展1.!DOCTYPEhtml2.html3.head4.metacharset=utf-85.titleHelloWorld/title6.7.style8..img_simple{9.border:1pxsolid#ccc;10.padding:5px11.}12./style13.14./head15.body16.imgclass=img_simplesrc=hello_world.gif/17.18.ahref=这是一个超链接/a19./body20./html细心的同学可能会发现,多出来了一个style标签,style标签中写的好像还不是XML,那这个就是我们的CSS,类似JSON,CSS中通过冒号来表示key-value的分隔,通过分号来表示不同属性之间的分隔了解了CSS的写法以后,接下来我们细致的探讨一下CSS的原理如果要给某个标签添加修饰(长相)属性,需要先找到这个标签CSS主要的组成部分有以下三个o选择器o位置属性o元素属性我们一个一个来解读一下:选择器选择器就是通过某种方式找到一个标签,例如我们上面的写法,首先给img标签添加一个class属性img_simple,然后在CSS中.img_simple选中了这个标签,就可以给这个标签添加CSS属性了,这也类似于我们平常所写的findViewById位置属性在Android中我们使用布局和一些位置属性来确定一个元素的位置,那CSS中如果要确定一个元素位置的话,通常只使用位置属性即可,而位置属性就是类似于我们Android中的layout_marginLeftpaddingLeft等元素属性元素属性就是类似于我们Android开发中常用到的textColortextSize等属性微信小程序的开发并不直接使用HTML,但是基本上却直接使用CSS,所以CSS还是有必要学习一下的,受限于篇幅,在这里不展开继续讨论CSS的一些具体细节了,但是提供给大家几篇非常优秀的文章,便于大家更细致的了解CSSCSS入门最好的手册CSS中的Flex布局语法CSS3简介JavaScript这个部分我准备详细的介绍一下,同时和Java做一个对比变量和数据类型1.vari=10;2.vars=hello;3.varbool=true;4.vararr=[1,2,3];5.vararr=newArray(1,2,3);JS中变量的声明和Java有显著的不同JS中使用var关键字来声明变量,不能使用具体的变量类型o因为变量没有数据类型,在运行时可以随时改变变量的数据类型JS中也有数据类型的概念,`='后面的是什么类型的数据一般就是什么类型o数值型,这一点和Java不同,Java中有int和float之分,但是JS中没有o字符串型,js中没有字符型这个数据类型,同时js声明字符串的时候可以使用双引号也可以使用单引号o布尔型o数组,数组有两种声明方式,它们是完全等价的不同于Java,JS中只有两种作用域,一种是全局作用域,一种是函数作用域,在JS中并不是每个花括号之间都是一个作用域,这一点需要注意函数1.functionfunName(arg1,arg2){2.//functionbody3.returnvalue;4.}5.6.funName(10,20);很显然JS中定义函数的方式和java不同JS中没有private和private等限定符,无论是变量还是函数都没有JS的函数参数不声明,将变量名表示出来即可,因为JS中并没有变量类型的概念,变量可以是任何类型JS中调用函数的方式和Java一模一样,函数名(参数1,参数2),先牢记这一点,很重要这种函数的定义方式在JS中叫做函数字面量,简而言之就是字面上表示一个函数的方式JS中的函数也是一种数据类型,这一点和Java有巨大的不同,在JS中函数是一等公民,可以传递可以赋值,同时函数还是一个类型,如下1.varfunName=function(arg1,arg2){2.//functionbody3.returnvalue;4.}5.6.funName(10,20);如上定义了一个匿名函数,语法和定义一个普通函数有略微的区别匿名函数就是声明了一个函数变量,而变量的值就是一个函数声明,但是这个声明不加函数名匿名函数的声明方式和字面量声明函数基本上是等价的,只有一个细微的差别,就是这种方式声明的函数,在声明后面的代码才可以使用此函数,而字面量没有这个限制这种函数的声明很显著的说明了一个问题,JS中的函数是一种数据类型,但是Java中的函数不是,Java中的函数只有字面量的定义方式,并不是一个值其实字面量的方式创建函数,最终JS引擎处理的过程也是通过将其转为这种方式进行存储下面对函数做一个扩展1.functionfunName(arg1,arg2){2.//functionbody3.returnvalue;4.}5.6.varfun=funName;7.8.fun(10,20);JS中无论何种方式声明函数,其都是一个值,而值是可以赋值给其它变量的函数调用和函数赋值是不同的o函数的调用是通过函数名()的方式,记得后面有括号o而函数当做变量使用的时候,对其进行赋值是直接使用函数名o这一点要牢记对象众所周知的,JS中没有类型的概念(不准确),但是这不妨碍JS是一种面向对象的语言,JS中依然有继承和聚合,JS实现面向对象的方式和Java不同,JS是一个面向原型的语言,这一点属于高级JS技巧的部分,不需要特别的关注,但是要知道,JS中无法声明一个类型,JS中的对象更类似于Java中的Map的概念上面我们提过JS中数组的定义方式,下面来看看如何定义一个JS中的对象1.varobj={2.property1:nihao,3.property2:10,4.property3:true5.}6.7.varobj=newObject();8.obj.property1=nihao;9.obj.property2=10;10.obj.property3=true;通过这种方式,你会发现,这和JSON很像,同时又像Java中的Map集合对象中是一些键值对,每一个键值对又是一个变量的声明,是JS中对象的属性对象有两种声明方式,第一种叫做对象字面量,第二种方式是正常的声明无论何种声明方式,在使用阶段,如果赋值的目标属性存在,则修改其值,如果不存在,则创建并赋值但是,同学们可能不理解JS中的函数这么简单,如何实现那么复杂的功能,那我们接下来看一下如何给一个对象添加一个函数1.varobj={2.property1:nihao,3.property2:10,4.property3:true,5.sayName:function(arg1,arg2){6.returnvalue;7.}8.}9.10.varobj=newObject();11.obj.property1=nihao;12.obj.property2=10;13.obj.property3=true;14.obj.sayName=function(arg1,arg2){15.returnvalue;16.}17.18.obj.sayName();这就是给一个对象添加方法的方式,签名已经介绍过,在JS中函数是一种数据类型,可以复制给变量,同时我们也介绍过,对象中的属性其实就是变量,那很好理解,给对象添加一个方法,就是给对象中一个变量赋值上一个函数类型的数据而已总结以上就