微信小程序详解.docx
- 文档编号:531404
- 上传时间:2022-10-10
- 格式:DOCX
- 页数:20
- 大小:250.49KB
微信小程序详解.docx
《微信小程序详解.docx》由会员分享,可在线阅读,更多相关《微信小程序详解.docx(20页珍藏版)》请在冰豆网上搜索。
微信小程序详解
黑马程序员:
微信小程序详解
概念介绍
相信最近各位同学已经被各种关于微信小程序的介绍刷屏了,大家应该也关心这个新兴起的东西,但是对于我们Android开发的同学,或者对于我们iOS开发的同学,可能很难马上上手去做,也很难去理解这是一个什么东西,那这篇文章就从理论上简单的向大家说明以下几个问题
1.微信小程序是什么
2.微信小程序开发所使用的技术栈,以与对它的细致讲解
3.微信提供的小程序开发框架
相信通过这篇文章,起码大家对于微信小程序会有一个更直观的认识,也能上手进展一些简单的开发
接下来看第一个局部的内容,微信小程序是什么,在这之前先看一下官方的解释
我们提供了一种新的开放能力,开发者可以快速地开发一个小程序。
小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
微信小程序是什么
首先微信小程序这五个字中最重要的有两个词,一个是小,一个是程序,我们分别来看这两个词所表达的意思
程序
首先是程序一词,微信小程序所提供的体验是原生的,而不是H5,理论上微信小程序提供的是完全原生的体验 那微信是如何实现的呢?
总体上微信借助了ReactNative的四项,那ReactNative在下面我会简称为RN,关于RN具体的介绍请参照ReactNative中文网,而微信小程序根本上就是基于RN的框架设计原理自己鼓捣了一个轮子,为什么我这么说,我有没有证据?
请参照微信小程序框架原理
也就是说,微信就是一个云操作系统,你可以开发程序,运行在微信中,你的这个程序是完全类似于原生的体验,就像你使用Android的SDK开发一个程序,运行在Android手机中一样,而你为微信开发一个程序,可以运行在Android上,iOS上,所有有微信的地方,你的程序都可以运行
看到这里,就会有很多同学觉得,我靠,那我的Android白学了,那我的iOS白学了,其实是不然的,接下来我们再来看看微信小程序中的小字
小
虽然微信小程序能够提供近似原生的体验,但是大家不用慌X,微信小程序还远不可能代替原生应用,有如下两个原因
首先,微信再大再完整,也只是一个程序,在微信里面玩<炉石传说>这种大型游戏,想想就觉得难受
其次,微信运行在iOS和Android中,本身微信就是受限的,苹果也不可能让微信把自己的命给革了,所以微信小程序本身也会受到很多限制
但是客户端开发者还是有必要了解一些微信小程序的开发,这样也能做到知己知彼
技术栈
这个章节简单的介绍一下微信小程序所使用到的一些知识,并且对这些知识进展一些简单的了解,大概有如下的几个方面
∙HTML
∙CSS
∙JS
HTML
HTML类似于我们经常用到的layout,是一种类似于XML的文档语言,使用标签来描述一个页面的结构
来看一个简单的HTML例子
1.
DOCTYPEhtml>
2.
3.
4.
5.
6.
7.
8.
9.
10. //baidu.">这是一个超 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. DOCTYPEhtml> 2. 3.
4.
5.
6.
7.
8..img_simple{
9.border:
1pxsolid#ccc;
10.padding:
5px
11.}
12.
13.
14.
15.
16.
17.
18. //baidu.">这是一个超 19. 20. 细心的同学可能会发现,多出来了一个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_marginLeft paddingLeft等 元素属性 元素属性就是类似于我们Android开发中常用到的textColor textSize等属性 微信小程序的开发并不直接使用HTML,但是根本上却直接使用CSS,所以CSS还是有必要学习一下的,受限于篇幅,在这里不展开继续讨论CSS的一些具体细节了,但是提供应大家几篇非常优秀的文章,便于大家更细致的了解CSS CSS入门最好的手册 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.//functionbody 3.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.//functionbody 3.returnvalue; 4.} 5. 6.funName(10,20); 如上定义了一个匿名函数,语法和定义一个普通函数有略微的区别 ∙匿名函数就是声明了一个函数变量,而变量的值就是一个函数声明,但是这个声明不加函数名 ∙匿名函数的声明方式和字面量声明函数根本上是等价的,只有一个细微的差异,就是这种方式声明的函数,在声明后面的代码才可以使用此函数,而字面量没有这个限制 ∙这种函数的声明很显著的说明了一个问题,JS中的函数是一种数据类型,但是Java中的函数不是,Java中的函数只有字面量的定义方式,并不是一个值 ∙其实字面量的方式创建函数,最终JS引擎处理的过程也是通过将其转为这种方式进展存储 下面对函数做一个扩展 1.functionfunName(arg1,arg2){ 2.//functionbody 3.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: true 5.} 6. 7.varobj=newObject(); 8.obj.property1="nihao"; 9.obj.property2=10; 10.obj.property3=true; 通过这种方式,你会发现,这和JSON很像,同时又像Java中的Map集合 ∙对象中是一些键值对,每一个键值对
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 微信小 程序 详解