微信小程序详解文档格式.docx
《微信小程序详解文档格式.docx》由会员分享，可在线阅读，更多相关《微信小程序详解文档格式.docx（20页珍藏版）》请在冰豆网上搜索。
看到这里,就会有很多同学觉得,我靠,那我的Android白学了,那我的iOS白学了,其实是不然的,接下来我们再来看看微信小程序中的小字
小
虽然微信小程序能够提供近似原生的体验,但是大家不用慌X,微信小程序还远不可能代替原生应用,有如下两个原因
首先,微信再大再完整,也只是一个程序,在微信里面玩<
炉石传说>
这种大型游戏,想想就觉得难受
其次,微信运行在iOS和Android中,本身微信就是受限的,苹果也不可能让微信把自己的命给革了,所以微信小程序本身也会受到很多限制
但是客户端开发者还是有必要了解一些微信小程序的开发,这样也能做到知己知彼
技术栈
这个章节简单的介绍一下微信小程序所使用到的一些知识,并且对这些知识进展一些简单的了解,大概有如下的几个方面
∙HTML
∙CSS
∙JS
HTML
HTML类似于我们经常用到的layout,是一种类似于XML的文档语言,使用标签来描述一个页面的结构
来看一个简单的HTML例子
1.<
!
DOCTYPEhtml>
2.<
html>
3.<
head>
4.<
metacharset="
utf-8"
>
5.<
title>
HelloWorld<
/title>
6.<
/head>
7.<
body>
8.<
imgsrc="
hello_world.gif"
/>
9.
10.<
ahref="
s:
//baidu."
这是一个超<
/a>
11.<
/body>
12.<
/html>
上述例子中的一些概念
∙html,head,body叫做标签,标签有标签的名称
∙img是一个图片标签,通过img的属性src可以设置图片的路径,通过路径找到图片
∙a标签是标签,通过href来设置到的目标,而a标签开闭标签之间的叫做标签内容,a标签的内容是标签显示在页面中的文本
这就是一个常见的html结构,可以复制并且查看,通过这个例子,大家根本上就已经能够掌握HTML的语法了,和我们的layout非常类似,但是要注意想a标签这样的标签写法,和我们平常的写法略有不同
HTML掌握到这里已经差不多了,不用太过深究,这些标签在微信小程序的开发中根本上没用,微信有一套自己的标签组件,但是一定要理解这种写法才行
CSS
刚刚我们已经见过HTML的写法了,下面来简单的看一下CSS的一些根本特点
首先,HTML用来描述页面结构,这一点很重要,也就是说,HTML主要的作用是描述页面上有什么元素,大致的排列,大致的顺序,而不关心页面长相
那元素（或者我们称之为控件）的长相,例如什么字体大小,什么颜色等,这些长相或者叫表现上的东西,通过CSS来描述,包括相对的位置等,都是CSS来描述
为了说明CSS的作用和写法,我们对刚刚的程序做一个扩展
6.
style>
8..img_simple{
9.border:
1pxsolid#ccc;
10.padding:
5px
11.}
/style>
13.
14.<
15.<
16.<
imgclass="
img_simple"
src="
17.
18.<
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）{
如上定义了一个匿名函数,语法和定义一个普通函数有略微的区别
∙匿名函数就是声明了一个函数变量,而变量的值就是一个函数声明,但是这个声明不加函数名
∙匿名函数的声明方式和字面量声明函数根本上是等价的,只有一个细微的差异,就是这种方式声明的函数,在声明后面的代码才可以使用此函数,而字面量没有这个限制
∙这种函数的声明很显著的说明了一个问题,JS中的函数是一种数据类型,但是Java中的函数不是,Java中的函数只有字面量的定义方式,并不是一个值
∙其实字面量的方式创建函数,最终JS引擎处理的过程也是通过将其转为这种方式进展存储
下面对函数做一个扩展
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.}
7.varobj=newObject（）;
8.obj.property1="
9.obj.property2=10;
10.obj.property3=true;
通过这种方式,你会发现,这和JSON很像,同时又像Java中的Map集合
∙对象中是一些键值对,每一个键值对
升级会员 