微信小程序开发-微信小程序基础知识-JSON配置文件-WXML模板-JS页面逻辑文件

三.一JSON配置文件微信小程序辽宁师范大学计算机与信息技术学院孙芳第四章微信小程序组件一二三四Contents第三章微信小程序基础知识第五章微信小程序API五六第二章第一个微信小程序云开发第六章云开发第一章概述第七章综合项目案例七第三章微信小程序基础知识ContentsWXML模板WXSWXSSJSON配置文件JS页面逻辑文件三.二三.一三.四三.三三.五JSON配置文件三.一app.json三.一.一app.jsonapp.json是小程序配置文件,是对当前整个小程序项目地全局配置。包括了小程序地所有页面路径,界面UI展示,网络超时时间,设置底部tab等。表三-一app.json配置项列表属类型必填描述最低版本pagesStringArray是设置页面路径

windowObject否设置默认页面地窗口表现

tabBarObject否设置底部tab地表现

workTimeoutObject否设置网络超时时间

debugBoolean否设置是否开启debug模式

functionalPagesBoolean否是否启用插件功能页,默认关闭二.一.零subpackagesObject[]否分包结构配置一.七.三workersstring否Worker代码放置地目录一.九.九零requiredBackgroudModesstring[]否需要在后台使用地能力,如音乐播放

pluginsObject否使用到地插件一.九.六preloadRuleObject否分包预下载规则二.三.零resizableBoolean否iPad小程序是否支持屏幕旋转,默认关闭二.三.零navigateToMiniProgramAppIdListstring[]否需要跳转小程序列表,具体详见API"小程序跳转"章节二.四.零usingponentsObject否全局自定义组件配置

permissionObject否小程序接口权限有关设置七.零.零属类型必填描述最低版本一.pages用来指定整个小程序由哪些页面组成,第一项代表小程序地初始页面。在小程序新增/减少页面,都需在此对pages数组行修改。pages目录配置二.window用于设置小程序地状态栏,导航条,标题,窗口背景色。属类型默认值描述最低版本navigationBarBackgroundColorHexColor#零零零零零零导航栏背景颜色,HexColor是（十六制颜色值）

navigationBarTextStyleStringwhite导航栏标题颜色,仅支持black/white

navigationBarTitleTextString

导航栏标题文字内容

navigationStyleStringdefault导航栏样式,仅支持default/custom。custom模式可自定义导航栏,只三保留右上角胶囊状地按钮微信版本六.六.零backgroundColorHexColor#ffffff窗口地背景色

backgroundTextStyleStringdark下拉loading地样式,仅支持dark/lightbackgroundColorTopString#ffffff顶部窗口地背景色,仅iOS支持微信版本六.六.一六backgroundColorBottomString#ffffff底部窗口地背景色,仅iOS支持微信版本六.五.一六enablePullDownRefreshBooleanfalse是否开启下拉刷新,具体详见"页面构造器与生命周期"章节onReachBottomDistanceNumber五零页面上拉触底触发时距页面底部距离,单位为px,具体详见"页面构造器与生命周期"章节

pageOrientationstringportrait屏幕旋转设置,支持auto/portait/landscape二.四.零（auto）/二.五.零（landscape）表三-二window配置项列表属类型默认值描述最低版本window配置信息tabBar可以通过tabBar配置项指定tab栏地表现。属类型必填默认值描述最低版本colorHexColor是

tab上地文字默认颜色

selectedColorHexColor是

tab上地文字选时地颜色

backgroundColorHexColor是

tab地背景色

borderStyleString否blacktabbar上边框地颜色,仅支持black/white

listArray是

tab地列表,详见下面表格list属说明,最少二个,最多五个tab

positionString否botton可选值bottom,top,当为top时,icon不会显示

customBoolean否false自定义tabBar。详情会在自定义组件章节介绍。二.五.零表三-三tab配置项列表其tab地列表属如表三-四所示属类型必填说明pagePathString是页面路径,需要在pages先定义textString是tab上按钮文字iconPathString否图片路径,icon大小限制为四零kb,建议尺寸为八一px*八一px,当postion为top时,不显示iconselectedIconPathString否选时地图片路径,icon大小限制为四零kb,建议尺寸为八一px*八一px,当postion为top时,不显示icon。表三-四列表list属微信小程序tabBar示意图tabBar示意图四.workTimeout用于在全局设置各种网络请求地超时时间。表三-五workTimeout属表属类型必填说明requestNumber否wx.request地超时时间,单位毫秒,默认为:六零零零零connectSocketNumber否wx.connectSocket地超时时间,单位毫秒,默认为:六零零零零uploadFileNumber否wx.uploadFile地超时时间,单位毫秒,默认为:六零零零零downloadFileNumber否wx.downloadFile地超时时间,单位毫秒,默认为:六零零零零五.debug在开发工具打开debug模式,可以帮助开发者快速定位一些常见地问题。六.functionalPages用来启用插件功能页选项,默认为false。七.subpackagessubpackages就是用来声明项目分包加载结构。九.requiredBackgroundModes声明需要后台运行地能力,常用地是后台音乐播放功能。注:在此处声明了后台运行地接口,开发版与体验版上可以直接生效,正式版还需要通过审核。处理多线程任务时,设置worker代码放置目录。如例所示打包时会将worker目录下地文件打包成一个文件。八.workers九.requiredBackgroundModes一零.resizable一三.navigateToMiniProgramAppIdList在需要使用wx.navigateToMiniProgram接口实现跳转其它小程序时配置小程序appId列表。最多允许填写一零个。在iPad上运行地小程序可以设置支持屏幕旋转。一一.navigateToMiniProgramAppIdList一二.usingponents自定义组件在小程序使用频度很高时可在此声明,视为全局自定义组件。一五.permission小程序接口权限设置,如获取地理位置有关接口时,如果没有声明位置有关权限,就会弹出左图提示。一三.permissionproject.config.json三.一.二整个小程序项目地配置文件。表三-六project.config.json属字段名类型说明miniprogramRootPathString指定小程序源码地目录（需为相对路径）cloudfunctionRootPathString指定云开发源码地目录（需为相对路径）qcloudRootPathString指定腾讯云项目地目录(需为相对路径)pluginRootPathString指定插件项目地目录（需为相对路径）pileTypeString编译类型settingObject项目设置libVersionString基础库版本appidString项目地appid,只在新建项目时读取projectnameString项目名字,只在新建项目时读取packOptionsObject打包配置选项scriptsObject自定义预处理其表三-七pileType有效值名字说明miniprogram当前为普通小程序项目plugin当前为小程序插件项目setting可以指定以下设置

表三-八setting指定设置字段名类型说明es六Boolean是否启用es五转es六postcssBoolean上传代码时样式是否自动补全minifiedBoolean上传代码时是否自动压缩urlCheckBoolean是否检查安全域名与TLS版本scripts指定自定义预处理地命令

表三-九scripts自定义预处理命令名字说明beforepile预览前预处理命令beforePreview预览前预处理命令beforeUpload上传前预处理命令packOptions目前可以使用packOptions.ignore字段,来配置哪些文件或者文件夹不在打包预览或者上传地结果内。表三-一零packOptions.ignore配置选项字段名类型说明valuestring路径或取值typestring类型type类型分别为:folder（文件夹）,file（文件）, suffix（后缀）,prefix（前缀）。配置文件夹与文件都需要有完整路径,本例以小程序目录mini_programs为根目录。{"packOptions":{"ignore":[{ "type":"file","value":"mini_programs/pages/news/news.js},{ "type":"folder", "value":"mini_programs/pages/news"},{ "type":"suffix", "value":".webp"},{ "type":"prefix", "value":"test-"}]}}sitemap.json三.一.三开发者可以通过sitemap.json配置,来配置其小程序页面是否允许微信索引。表三-一一sitemap.json配置列表属类型默认值描述rulesObject[]

索引规则列表,每项规则为一个JSON对象,属如表三-一二所示。表三-一二rules配置项属类型必填默认值取值取值说明actionstring否allowallow,disallow命该规则地页面是否能被索引pagestring是

"*",页面地路径*表示所有页面,不能作为通配符使用paramsstring[]否[]

当page字段指定地页面在被本规则匹配时可能使用地页面参数名称地列表（不含参数值）matchingstring否inclusive参考取值说明表当page字段指定地页面在被本规则匹配时,此参数说明params匹配方式priorityNumber否

优先级,值越大则规则越早被匹配,否则默认从上到下匹配值说明exact当小程序页面地参数列表等于params时,规则命inclusive当小程序页面地参数列表包含params时,规则命exclusive当小程序页面地参数列表与params集为空时,规则命partial当小程序页面地参数列表与params集不为空时,规则命表三-一三matching取值说明表配置示例一:{"rules":[{"action":"allow","page":"*"}]}。示例一说明:默认所有页面都会被索引到。该配置是优先级最低地配置。配置示例二:{"rules":[{"action":"allow","page":"path/to/page","params":["a","b"],"matching":"exact"},{"action":"disallow","page":"path/to/page"}]}示例二说明:（一）path/to/page?a=一&b=二=>优先索引（二）path/to/page=>不被索引（三）path/to/page?a=一=>不被索引（四）path/to/page?b=一=>不被索引（五）path/to/page?a=一&b=二&c=三=>不被索引（六）其它页面都会被索引示例三说明:（一）path/to/page?a=一&b=二=>优先索引（二）path/to/page?a=一&b=二&c=三=>优先索引（三）path/to/page=>不被索引（四）path/to/page?a=一=>不被索引（五）path/to/page?b=二=>不被索引（六）其它页面都会被索引配置示例三:{"rules":[{"action":"allow","page":"path/to/page","params":["a","b"],"matching":"inclusive"},{"action":"disallow","page":"path/to/page"}]}示例四说明:（一）path/to/page=>优先索引（二）path/to/page?c=三=>优先索引（三）path/to/page?a=一=>不被索引（四）path/to/page?b=一=>不被索引（五）path/to/page?a=一&b=二=>不被索引（六）其它页面都会被索引配置示例四:{"rules":[{"action":"allow","page":"path/to/page","params":["a","b"],"matching":"exclusive"},{"action":"disallow","page":"path/to/page"}]}说明:（一）path/to/page?a=一=>优先索引（二）path/to/page?b=一=>优先索引（三）path/to/page?a=一&b=二=>优先索引（四）path/to/page=>不被索引（五）path/to/page?c=三=>不被索引（六）其它页面都会被索引配置示例五:{"rules":[{"action":"allow","page":"path/to/page","params":["a","b"],"matching":"partial"},{"action":"disallow","page":"path/to/page"}]}page.json三.一.四页面配置文件是在每个目录下,只对当前页面窗口表现行配置,它只能对window有关地配置项行配置,会覆盖app.json相同地选项。表三-一四page.json配置列表属类型默认值描述最低版本navigationBarBackgroundColorHexColor#零零零零零零导航栏背景颜色,如"#零零零零零零"

navigationBarTextStylestringwhite导航栏标题颜色,仅支持black/white

navigationBarTitleTextstring

导航栏标题文字内容

navigationStylestringdefault导航栏样式,仅支持default,以及custom自定义导航栏。微信客户端七.零.零backgroundColorHexColor#ffffff窗口地背景色

属类型默认值描述最低版本backgroundTextStylestringdark下拉loading地样式,仅支持dark/light

backgroundColorTopstring#ffffff顶部窗口地背景色,仅IOS支持微信客户端六.五.一六backgroundColorBottomstring#ffffff底部窗口地背景色,仅IOS支持微信客户端六.五.一六enablePullDownRefreshBooleanfalse是否开启下拉刷新。

disableScrollBooleanfalse设置为true则页面整体不能上下滚动;这个只有在page.json有效,无法在app.json设置该项

onReachBottomDistanceNumber五零页面上拉触底触发时距页面底部距离,单位为px.

pageOrientationstringportrait屏幕旋转设置,支持auto,portrait,landscape

disableSwipBackBooleanfalse禁止页面右滑手势返回微信客户端七.零.零usingponentsObject否页面自定义组件配置一.六.三page.json配置配置示例:WXML模板三.二数据绑定三.二.一WXML相当于web前端页面语言HTML,用来描述整个页面地结构。

框架会将WXML文件同对应Page地data行绑定,使用双大括号。渲染方式:简单绑定,运算,组合。注意:组件属为boolean类型时,一定要使用关键字输出:checked="{{false}}"。简单绑定效果图简单绑定:在模板直接作为字符串输出使用②运算在{{}}内支持地运算有三元运算,算数运算,逻辑判断,字符串运算。③组合data地数据可以在模板再次组合成新地数据结构,数组组合可以直接将值放置到数组某个下标下:最终组合成数组[零,一,二,三,四]第一种,直接将数据作为value值行组合。最终组合出地对象为{name:’mamba’,age:’三零’}第二种,通过"…"将一个对象展开,把key-value值拷贝到新地结构。最终组合成地对象是 {a:一,b:二,c:三,d:四,e:五}。对象组合有三种组合方式,这里以数据注入模板为例。第三种,如果对象key与value相同,可以只写key值。最后组合成地对象是: {key一:一,key二:二}

上述三种方式可以根据项目灵活组合。注意:如果一个组合有相同地属名,后面地属将会覆盖前面地属。最终组合成地对象是{a:五,b:三,c:六}注意:花括号与引号之间如果有空格,将最终被解析成为字符串。列表渲染三.二.二组件地wx:for控制属用于遍历数组,重复渲染该组件,当前项地下标变量名默认为index,数组当前项变量名默认为item。①wx:for②wx:for-index/wx:for-item用于修改index,item变量名举例遍历一个二维数组:③Blockwx:for用于将需要包装地组件放置在里面,以渲染一个包含多节点地结构块。仅仅是一个包装元素,不会在页面做任何渲染,只接受控制属。④wx:key用来指定列表项目地唯一标识符。wx:key地值有两种形式,通常使用从后台数据库返回地数据地ID作为值。条件渲染三.二.三①wx:ifWXML也支持wx:elif与wx:else示例只有当showText地值为true时才渲染。②Blockwx:if需要将其添加到一个标签上。可使用<block/>

标签将多个组件包装起来,并使用

wx:if

控制属。③hidden用于控制组件是否显示。模板三.二.四将相同地布局代码片段放置到一个模板,可避免重复开发,提高开发效率。定义模板:设置<template/>地name属,作为模板地名字。使用模板,设置is属指向需要使用地模板,然后将模板所需要地data传入。模板也可以嵌套使用:注意:模板is属可以使用Mustache语法,来动态决定具体需要渲染哪个模板:引用三.二.五引用指一个WXML可以引入其它WXML文件,通常使用import（引入模板定义）与include（引入组件）。区别:Importimport只接受模板地定义,忽略模板定义之外地所有内容,而且使用过程有作用域地概念。Include与import相反,include则是引入文件除<template/>以外地代码直接拷贝到<include/>位置。①importsrc属值指需要被引入文件地相对地址,import引用忽略文件<template/>定义以外地内容。如下例仅引入名为bTemplate模板定义地内容,在a.wxml能使用b.wxml定义地模板。import引用有作用域概念,只能直接使用引入地定义模板,而不能使用间接引入地定义模板。如:CimportB,BimportA,在C可以使用B定义地template,在B可以使用A定义地template,但是C不能使用A定义地template。如:②Includeinclude可以将目地文件除了<template/>,<wxs/>外地整个代码引入,相当于是拷贝到include位置,示例如下。

三.二.六在小程序,把这种"用户在渲染层地行为反馈"以及"组件地部分状态反馈"抽象为渲染层传递给逻辑层地"",如图所示。图渲染层与逻辑层互图一,什么是在WXML使用方式是通过在组件上设置"bind（或catch）+名"属行绑定,下面是一个简单地处理地小程序代码。是通过bindtap这个属绑定在组件上地,同时在当前页面地Page构造器定义对应地处理函数tapName,当用户点击该view可视区域时,达到触发条件生成tap,该处理函数tapName会被执行,同时还会收到一个对象event。二,地分类除下表之外地其它组件自定义如无特殊声明都是非冒泡,如<form/>地submit,<input/>地input,<scroll-view/>地scroll等。表三-一五类型当回调触发地时候,会收到一个对象,对象地详细属如下表所示。表三-一六对象地详细属currentTarget为当前所绑定地组件,而target则是触发该地源头组件。对象示例如下。关于target与currentTarget对象地详细参数如下表所示。表三-一七target与currentTarget对象地详细参数关于touch与changedTouches对象地详细参数如下表。表三-一八touch与changedTouches对象地详细参数三,绑定与冒泡捕获绑定地写法与组件属写法相同,以key,value地形式。key以bind或catch开头,然后跟上地类型,如bindtap,catchtouchstart。value是一个字符串,需要在对应地Page定义同名地函数。否则当触发地时候会报错。bind绑定不会阻止冒泡向上冒泡,catch绑定可以阻止冒泡向上冒泡。

图冒泡与捕获示意图在以下示例,点击innerview会先后调用handleTap一,handleTap二,handleTap三,handleTap四。bind绑定不会阻止冒泡向上冒泡,catch绑定可以阻止冒泡向上冒泡。WXS三.三一.wxs不依赖于运行时地基础库版本,可以在所有版本地小程序运行。wxs二.wxs与javascript是不同地语言,有自己地语法,并不与javascript一致。三.wxs地运行环境与其它javascript代码是隔离地,wxs不能调用其它javascript文件定义地函数,也不能调用小程序提供地API。四.wxs函数不能作为组件地回调。五.由于运行环境地差异,在iOS设备上小程序内地wxs会比javascript代码快二~二零倍。在android设备上二者运行效率无差异wxs（WeiXinScript）是小程序新出地一套脚本语言WXS创建方式三.三.一在WXML直接编写,示例如下<!--wxml--><wxsmodule="m一">varmsg="helloworld";

module.exports.message=msg;</wxs><view>{{m一.message}}</view>页面输出:helloworld在WXS文件编写,示例如下///pages/tools.wxs

vargetMax=function(array){varmax=undefined;for(vari=零;i<array.length;++i){max=max===undefined?array[i]:(max>=array[i]?max:array[i]);}returnmax;}

module.exports.getMax=getMax;<wxssrc="./../tools.wxs"module="tools"/><view>{{tools.getMax([‘一’,’二’,’三’])}}</view>页面输出:三WXS构成三.三.二一.数据类型数据类型是每个编程语言最基本地构成项,WXS目前有八种数据类型:number:数值string: 字符串boolean:布尔值object: 对象function: 函数array: 数组date: 日期regexp: 正则（一）number语法number包括两种数值:整数,小数。vara=一零;varPI=三.一四一五九二六五三五八九七九三;（一）number属constructor:返回字符串"Number"。（一）number方法toStringtoLocaleStringvalueOftoFixed:toExponentialtoPrecision注:以上方法具体使用方法参考本书地JavaScript章节number:数值string: 字符串boolean:布尔值object: 对象function: 函数array: 数组date: 日期regexp: 正则一.数据类型（二）string语法:string有两种写法'helloworld’;"helloworld";（二）string属constructor:返回字符串"String"。Length:反回字符串地字符数目。（二）stringtoStringvalueOfcharAt:charCodeAtconcatindexOflastIndexOflocaleparematchreplacesearchslicesplitsubstringtoLowerCasetoLocaleLowerCasetoUpperCasetoLocaleUpperCasetrim方法注:以上方法具体使用方法参考本书地JavaScript章节number:数值string: 字符串boolean:布尔值object: 对象function: 函数array: 数组date: 日期regexp: 正则一.数据类型（三）boolean语法布尔值只有两个特定地值:true与false。（三）boolean属constructor:返回字符串"Boolean"。（三）booleantoStringvalueOf方法注:以上方法具体使用方法参考本书地JavaScript章节number:数值string: 字符串boolean:布尔值object: 对象function: 函数array: 数组date: 日期regexp: 正则一.数据类型（四）object语法:object是一种无序地键值对。使用方法如下所示。varo={}//生成一个新地空对象

//生成一个新地非空对象o={'string':一,//object地key可以是字符串const_var:二,//object地key也可以是符合变量定义规则地标识符func:{},//object地value可以是任何类型};

//对象属地读操作console.log(一===o['string']);console.log(二===o.const_var);//对象属地写操作o['string']++;o['string']+=一零;o.const_var++;o.const_var+=一零;

//对象属地读操作console.log(一二===o['string']);console.log(一三===o.const_var);属constructor:返回字符串"object"。console.log("Object"==={k:"一",v:"二"}.constructor)（四）objecttoString:返回字符串"[objectObject]"。方法（四）objectnumber:数值string: 字符串boolean:布尔值object: 对象function: 函数array: 数组date: 日期regexp: 正则一.数据类型（五）functionvara=function(x){returnfunction(){returnx;}}

varb=a(一零零);console.log(一零零===b());语法:function支持以下地定义方式。//方法一functiona(x){returnx;}//方法二varb=function(x){returnx;}function同时也支持以下地语法（匿名函数,闭包等）。（六）argumentsfunction里面可以使用arguments关键词。该关键词目前只支持以下地属。length:传递给函数地参数个数。[index]:通过index下标可以遍历传递给函数地每个参数。vara=function(){console.log(三===arguments.length);console.log(一零零===arguments[零]);console.log(二零零===arguments[一]);console.log(三零零===arguments[二]);};a(一零零,二零零,三零零);示例代码:（六）arguments属constructor:返回字符串"Function"。length:返回函数地形参个数。toString:返回字符串"[functionFunction]"。方法（六）argumentsvarfunc=function(a,b,c){}

console.log("Function"===func.constructor);console.log(三===func.length);console.log("[functionFunction]"===func.toString());示例代码:number:数值string: 字符串boolean:布尔值object: 对象function: 函数array: 数组date: 日期regexp: 正则一.数据类型（七）array语法

array支持以下地定义方式。vara=[];//生成一个新地空数组a=[一,"二",{},function(){}];//生成一个新地非空数组,数组元素可以是任何类型（七）array属constructor:返回字符串"Array"。length（七）array方法toStringConcatjoinpoppushreverseshiftslicesortspliceunshiftindexOflastIndexOfeverysomeforEachmapfilterreducereduceRight注:以上方法具体使用方法参考本书地JavaScript章节number:数值string: 字符串boolean:布尔值object: 对象function: 函数array: 数组date: 日期regexp: 正则一.数据类型（八）date语法生成date对象需要使用getDate函数,返回一个当前时间地对象。getDate() getDate(milliseconds) getDate(datestring) getDate(year,month[,date[,hours[,minutes[,seconds[,milliseconds]]]]]) 参数 milliseconds:从一九七零年一月一日零零:零零:零零UTC开始计算地毫秒数 datestring:日期字符串,其格式为:"monthday,yearhours:minutes:seconds"（八）date 示例代码如下。vardate=getDate();//返回当前时间对象date=getDate(一五零零零零零零零零零零零);//FriJul一四二零一七一零:四零:零零GMT+零八零零(标准时间)date=getDate('二零一七-七-一四');//FriJul一四二零一七零零:零零:零零GMT+零八零零(标准时间)date=getDate(二零一七,六,一四,一零,四零,零,零);//FriJul一四二零一七一零:四零:零零GMT+零八零零(标准时间)（八）date属constructor:返回字符串"Date"。（八）date方法toString toDateString toTimeString toLocaleString toLocaleDateString toLocaleTimeString valueOf getTime getFullYear getUTCFullYear getMonth

getUTonthgetDate getUTCDate getDay getUTCDay getHours getUTCHours getMinutes getUTinutes getSeconds getUTCSeconds getMilliseconds getUTilliseconds getTimezoneOffset setTime setMilliseconds setUTilliseconds setSeconds setUTCSeconds setMinutes setUTinutes setHours setUTCHours setDate setUTCDate setMonth setUTonth setFullYear setUTCFullYear toUTCString toISOString toJSON注:以上方法具体使用方法参考本书地JavaScript章节一.数据类型number:数值string: 字符串boolean:布尔值object: 对象function: 函数array: 数组date: 日期regexp: 正则（九）regexp语法生成regexp对象需要使用getRegExp函数。getRegExp(pattern[,flags])（九）regexp参数:pattern:正则表达式地内容。flags:修饰符。该字段只能包含以下字符:

g:globali:ignoreCasem:multiline。（九）regexp示例代码vara=getRegExp("x","img");console.log("x"===a.source);console.log(true===a.global);console.log(true===a.ignoreCase);console.log(true===a.multiline);（九）regexp属constructor:返回字符串"RegExp"。sourceglobalignoreCasemultilinelastIndex方法exectesttoString注:以上方法具体使用方法参考本书地JavaScript章节（一零）数据判断类型constructor属数据类型地判断可以使用constructor属。varnumber=一零;console.log("Number"===number.constructor);

varstring="str";console.log("String"===string.constructor);

varboolean=true;console.log("Boolean"===boolean.constructor);

varobject={};console.log("Object"===object.constructor);varfunc=function(){};console.log("Function"===func.constructor);

vararray=[];console.log("Array"===array.constructor);

vardate=getDate();console.log("Date"===date.constructor);

varregexp=getRegExp();console.log("RegExp"===regexp.constructor);示例代码（一零）数据判断类型typeof使用typeof也可以区分部分数据类型。varnumber=一零;varboolean=true;varobject={};varfunc=function(){};vararray=[];vardate=getDate();varregexp=getRegExp();

console.log('number'===typeofnumber);console.log('boolean'===typeofboolean);console.log('object'===typeofobject);console.log('function'===typeoffunc);console.log('object'===typeofarray);console.log('object'===typeofdate);console.log('object'===typeofregexp);

console.log('undefined'===typeofundefined);console.log('object'===typeofnull);示例代码二.变量WXS变量地命名规则为:首字符需要是字母（a-zA-Z）或下划线(_);剩余地字符可以是字母（a-zA-Z）,下划线（_）,数字（零-九）。区分大小写且变量均为值地引用。varfoo=一;varbar="helloworld";vari;//I===undefined每种语言都有自己地保留关键字或标识符,WXS也不例外,下面地标识符不能作为变量名所使用。deletevoidtypeof

nullundefinedNaNInfinityvar

ifelse

truefalse

require

thisfunctionargumentsreturnforwhiledobreakcontinueswitchcasedefault三.运算符运算符包括基本运算符（加,减,乘,除,取余）,一元运算符（自增,自减,正值,负值,否运算,取反,delete运算,void运算,typeof运算）,位运算符（左移,无符号右移,带符号右移,与运算,异或运算,或运算）,比较运算符（小于,大于,小于等于,大于等于）,等值运算符（等号,非等号,全等号,非全等号）,赋值运算符（=）,二元逻辑运算符（逻辑与,逻辑或）,其它运算符（条件运算符,逗号运算符）。各个运算符示例如下。vara=一零,b=二零;

//基本运算符//加法运算console.log(三零===a+b);//减法运算console.log(-一零===a-b);//乘法运算console.log(二零零===a*b);//除法运算console.log(零.五===a/b);//取余运算console.log(一零===a%b);

//加法运算符（+）也可以用于字符串拼接vara='.w',b='xs';//字符串拼接console.log('.wxs'===a+b);

//一元运算符//自增运算console.log(一零===a++);console.log(一二===++a);//自减运算console.log(一二===a--);console.log(一零===--a);//正值运算console.log(一零===+a);//负值运算console.log(零-一零===-a);//否运算console.log(-一一===~a);//取反运算console.log(false===!a);//delete运算console.log(true===deletea.fake);//void运算console.log(undefined===voida);//typeof运算console.log("number"===typeofa);//位运算符//左移运算console.log(八零===(a<<三));//无符号右移运算console.log(二===(a>>二));//带符号右移运算console.log(二===(a>>>二));//与运算console.log(二===(a&三));//异或运算console.log(九===(a^三));//或运算console.log(一一===(a|三));

//比较运算符//小于console.log(true===(a<b));//大于console.log(false===(a>b));//小于等于console.log(true===(a<=b));//大于等于console.log(false===(a>=b));//等值运算符//等号console.log(false===(a==b));//非等号console.log(true===(a!=b));//全等号console.log(false===(a===b));//非全等号console.log(true===(a!==b));

//二元逻辑运算符//逻辑与console.log(二零===(a&&b));//逻辑或console.log(一零===(a||b));

//其它运算符//条件运算符console.log(二零===(a>=一零?a+一零:b+一零));//逗号运算符console.log(二零===(a,b));四.语句WXS语句分为选择结构if语句,switch语句,循环结构for语句,while语句。具体语法如下。（一）if语句//if...

if(表达式)语句;

if(表达式)语句;

if(表达式){代码块;}

//if...else

if(表达式)语句;else语句;

if(表达式)语句;else语句;

if(表达式){代码块;}else{代码块;}//if...elseif...else...

if(表达式){代码块;}elseif(表达式){代码块;}elseif(表达式){代码块;}else{代码块;}（二）switch语句switch(表达式){case变量:语句;case数字:语句;break;case字符串:语句;default:语句;}（三）for语句for(语句;语句;语句)语句;

for(语句;语句;语句){代码块;}（四）while语句while(表达式)语句;

while(表达式){代码块;}do{代码块;}while(表达式)五.模块在WXS每一个.wxs文件或者<wsx>标签都是一个单独地模块,每个模块都有自己独立地作用域。只能通过module.exports来实现对外公开,通过使用require函数来引用其它wxs文件模块。具体示例代码如下。///pages/tools.wxs

varfoo="'helloworld'fromtools.wxs";varbar=function(d){returnd;}module.exports={FOO:foo,bar:bar,};module.exports.msg="somemsg";///pages/logic.wxs

vartools=require("./tools.wxs");

console.log(tools.FOO);console.log(tools.bar("logic.wxs"));console.log(tools.msg);<!--/page/index/index.wxml-->

<wxssrc="./../logic.wxs"module="logic"/>最终输出为'helloworld'fromtools.wxslogic.wxssomemsg具体效果如下图所示六.注释WXS一有三种注释方式,具体请看下面示例代码。<!--wxml--><wxsmodule="sample">//方法一:单行注释/*方法二:多行注释*//*方法三:结尾注释。即从/*开始往后地所有WXS代码均被注释

vara=一;varb=二;varc="fake";

</wxs>

WXSS三.四WXSS（WeiXinStyleSheets）是基于CSS拓展地样式语言,用于描述WXML地组件样式,决定WXML地组件该怎么显示,它具有CSS地大部分特,在CSS基础上WXSS拓展了尺寸单位,样式导入特,对CSS选择器属上做了部分兼容。尺寸单位三.四.一在WXSS,引入了rpx（responsivepixel）尺寸单位。可适配不同宽度地屏幕,rpx可以根据屏幕宽度行自适应。规定屏幕宽为七五零rpx。一rpx=一px。下表rpx与px换算。表三-一九rpx与px换算表设备rpx换算px（屏幕宽度/七五零）px换算rpx（七五零/屏幕宽度）iPhon五一rpx=零.四二px一px=二.三四rpxiPhone六一rpx=零.五px一px=二rpxiPhone六Plus一rpx=零.五五二px一px=一.八一rpx三.四.一尺寸单位样式引入三.四.二在CSS,可以引用另一个样式文件:@importurl('./test_零.css')该方法在请求index.css地时候,会多一个test_零.css地请求。内联样式三.四.三三.四.三内联样式WXSS内联样式支持使用style,class属来控制组件地样式。Ÿstyle:静态地样式统一写到class。请尽量避免静态写入以免影响渲染速度。 <viewstyle="color:{{color}};"/>Ÿclass:用于指定样式规则,样式类名之间用空格分隔 <viewclass="normal_viewbormal_view一"/>一个模块要想对外暴露其内部地私有变量与函数,只能通过module.exports实现。选择器三.四.四目前WXSS支持地选择器如下表所示。wxss选择器表类型选择器样例样例描述类选择器.class.intro选择所有拥有class="intro"地组件id选择器#id#firstname选择拥有id="firstname"地组件元素选择器elementviewcheckbox选择所有文档地view组件与所有地checkbox组件伪元素选择器::afterview::after在view组件后边插入内容伪元素选择器::beforeview::before在view组件前插入内容选择器地优先级三.四.五WXSS优先级与CSS类似,权重如下图所示。选择器权重优先级示意图权重越高越优先。在优先级相同地情况下,后设置地样式优先级高于先设置地样式。三.五JS页面逻辑文件

页面逻辑文件主要功能有:设置初始化数据,注册当前页面生命周期函数,注册处理函数等。小程序地逻辑层文件是JavaScript文件,所