文章目录

  • 1.WXML
    • 数据绑定
      • 简单绑定
      • 运算
      • 组合
    • 列表渲染
      • wx:for
      • block wx:for
      • wx:key
    • 条件渲染
      • wx:if
      • block wx:if
      • wx:if vs hidden
    • 模板
      • 定义模板
      • 使用模板
      • 模板的作用域
    • 引用
      • import
        • import 的作用域
      • include
    • 事件
      • 什么是事件
      • 事件的使用方式
      • 事件分类
      • 事件绑定和冒泡
      • 事件的捕获阶段
      • 事件对象
        • timeStamp
        • target
        • currentTarget
        • dataset
        • touches
        • Touch 对象
        • CanvasTouch 对象
        • changedTouches
        • detail
  • 2.WSX
    • 页面渲染
    • 数据处理
    • 模块
    • .wxs 文件
      • module 对象
      • require函数
    • \ 标签
      • module 属性
      • src 属性
      • 注意
    • 变量
      • 概念
      • 变量名
      • 保留标识符
    • 注释
    • 运算符
      • 基本运算符
      • 一元运算符
      • 位运算符
      • 比较运算符
      • 等值运算符
      • 赋值运算符
      • 二元逻辑运算符
      • 其他运算符
      • 运算符优先级
    • if语句
    • switch 语句
    • for 语句
    • while 语句
    • 数据类型
      • number
      • string
      • boolean
      • object
      • function
      • arguments
      • array
      • date
      • regexp
    • 数据类型判断
      • constructor 属性
      • typeof
    • 基础类库
      • console
      • Math
      • JSON
      • Number
      • Date
      • Global
  • 3.WXSS
    • 尺寸单位
    • 样式导入
    • 内联样式
    • 选择器
    • 全局样式与局部样式

1.WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

用以下一些简单的例子来看看 WXML 具有什么能力：

数据绑定

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({data: {message: 'Hello MINA!'}
})

简单绑定

WXML 中的动态数据均来自对应 Page 的 data。

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

<view> {{ message }} </view>
Page({data: {message: 'Hello abc!'}
})

组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>
Page({data: {id: 0}
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>
Page({data: {condition: true}
})

关键字(需要在双引号之内)

  • true：boolean 类型的 true，代表真值。

  • false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>
Page({data: {a: 1,b: 2,c: 3}
})

view中的内容为 3 + 3 + d。

逻辑判断

<view wx:if="{{length > 5}}"> </view>

字符串运算

<view>{{"hello" + name}}</view>
Page({data:{name: 'abc'}
})

数据路径运算

<view>{{object.key}} {{array[0]}}</view>
Page({data: {object: {key: 'Hello '},array: ['abc']}
})

组合

也可以在 Mustache内直接进行组合，构成新的对象或者数组。

数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({data: {zero: 0}
})

最终组合成数组[0, 1, 2, 3, 4]。

对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({data: {a: 1,b: 2}
})

最终组合成的对象是 {for: 1, bar: 2}

也可以用扩展运算符 … 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({data: {obj1: {a: 1,b: 2},obj2: {c: 3,d: 4}}
})

最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

如果对象的 key 和 value 相同，也可以间接地表达。

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({data: {foo: 'my-foo',bar: 'my-bar'}
})

最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}。

**注意：**上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如：

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({data: {obj1: {a: 1,b: 2},obj2: {b: 3,c: 4},a: 5}
})

最终组合成的对象是 {a: 5, b: 3, c: 6}。

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">{{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}">{{item}}
</view>

列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({data: {array: [1, 2, 3, 4, 5]}
})

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">{{index}}: {{item.message}}
</view>
Page({data: {array: [{message: 'w3c',}, {message: 'School'}]}
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}
</view>

wx:for 也可以嵌套，下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view>
</view>

block wx:for

类似 block wx:if，也可以将 wx:for 用在``标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view>
</block>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

  1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

**注意：**当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">{{item}}
</view>

等同于

<view wx:for="{{['a','r','r','a','y']}}">{{item}}
</view>

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">{{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}" >{{item}}
</view>

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({data: {view: 'MINA'}
})

wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 `` 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}"><view> view1 </view><view> view2 </view>
</block>

注意： `` 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所有当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

模板

<!--wxml-->
<template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template><template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({data: {staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}}
})

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

使用 name 属性，作为模板的名字。然后在内定义代码片段，如：

<!--index: intmsg: stringtime: string
-->
<template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view>
</template>

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{...item}}"/>
Page({data: {item: {index: 0,msg: 'this is a template',time: '2016-09-15'}}
})

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd"><view> odd </view>
</template>
<template name="even"><view> even </view>
</template><block wx:for="{{[1, 2, 3, 4, 5]}}"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

模板的作用域

模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 模块。

引用

WXML 提供两种文件引用方式import和include。

import

import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

<!-- item.wxml -->
<template name="item"><text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
import 的作用域

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

<!-- A.wxml -->
<template name="A"><text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B"><text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

include

include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

事件

<view bindtap="add"> {{count}} </view>
Page({data: {count: 1},add: function(e) {this.setData({count: this.data.count + 1})}
})

什么是事件

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息，如 id, dataset, touches。

事件的使用方式

  • 在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
  • 在相应的Page定义中写上相应的事件处理函数，参数是event。
Page({tapName: function(event) {console.log(event)}
})
  • 可以看到log出来的信息大致如下：
{
"type":"tap",
"timeStamp":895,
"target": {"id": "tapTest","dataset":  {"hi":"WeChat"}
},
"currentTarget":  {"id": "tapTest","dataset": {"hi":"WeChat"}
},
"detail": {"x":53,"y":14
},
"touches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14
}],
"changedTouches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14
}]
}

事件分类

事件分为冒泡事件和非冒泡事件：

  1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
  2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

类型 触发条件
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发(基础库 1.5.0 开始支持，低版本需做兼容处理。)
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如](https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html)的`submit`事件，[的input事件，``的scroll事件。

事件绑定和冒泡

事件绑定的写法同组件的属性，以 key、value 的形式。

  • key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。
  • value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">outer view<view id="middle" catchtap="handleTap2">middle view<view id="inner" bindtap="handleTap3">inner view</view></view>
</view>

事件的捕获阶段

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">inner view</view>
</view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">inner view</view>
</view>

事件对象

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent 基础事件对象属性列表：

属性 类型 说明
type String 事件类型
timeStamp Integer 事件生成时的时间戳
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合

CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：

属性 类型 说明
detail Object 额外的信息

TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：

属性 类型 说明
touches Array 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件，当前变化的触摸点信息的数组

特殊事件： `` 中的触摸事件不可冒泡，所以没有 currentTarget。

type

代表事件的类型。

timeStamp

页面打开到触发事件所经过的毫秒数。

target

触发事件的源组件。

属性 类型 说明
id String 事件源组件的id
tagName String 当前组件的类型
dataset Object 事件源组件上由data-开头的自定义属性组成的集合
currentTarget

事件绑定的当前组件。

属性 类型 说明
id String 当前组件的id
tagName String 当前组件的类型
dataset Object 当前组件上由data-开头的自定义属性组成的集合

说明： target 和 currentTarget 可以参考上例中，点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。

dataset

在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

示例：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({bindViewTap:function(event){event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写}
})
touches

touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。

Touch 对象
属性 类型 说明
identifier Number 触摸点的标识符
pageX, pageY Number 距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴
clientX, clientY Number 距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴
CanvasTouch 对象
属性 类型 说明
identifier Number 触摸点的标识符
x, y Number 距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为X轴，纵向为Y轴
changedTouches

changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。

点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。

2.WSX

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

注意

  1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
  2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
  3. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
  4. wxs 函数不能作为组件的事件回调。
  5. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

以下是一些使用 WXS 的简单示例：

页面渲染

<!--wxml-->
<wxs module="m1">
var msg = "abc";module.exports.message = msg;
</wxs><view> {{m1.message}} </view>

页面输出：

abc

数据处理

// page.js
Page({data: {array: [1, 2, 3, 4, 5, 1, 2, 3, 4]}
})
<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {var max = undefined;for (var i = 0; i < array.length; ++i) {max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]);}return max;
}module.exports.getMax = getMax;
</wxs><!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

页面输出：

5

模块

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

.wxs 文件

在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。

示例代码：

// /pages/comm.wxsvar foo = "'hello world' from comm.wxs";
var bar = function(d) {return d;
}
module.exports = {foo: foo,bar: bar
};

上述例子在 /pages/comm.wxs 的文件里面编写了 WXS 代码。该 .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 `` 标签引用。

module 对象

每个 wxs 模块均有一个内置的 module 对象。

包含属性：

  • exports: 通过该属性，可以对外共享本模块的私有变量与函数。

示例代码：

// /pages/tools.wxsvar foo = "'abc' from tools.wxs";
var bar = function (d) {return d;
}
module.exports = {FOO: foo,bar: bar,
};
module.exports.msg = "some msg";
<!-- page/index/index.wxml --><wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

页面输出：

some msg
'abc' from tools.wxs

require函数

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

引用的时候，要注意如下几点：

  • 只能引用 .wxs 文件模块，且必须使用相对路径。
  • wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
  • 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

示例代码：

// /pages/tools.wxsvar foo = "'abc' from tools.wxs";
var bar = function (d) {return d;
}
module.exports = {FOO: foo,bar: bar,
};
module.exports.msg = "some msg";
// /pages/logic.wxsvar tools = require("./tools.wxs");console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);
<!-- /page/index/index.wxml --><wxs src="./../logic.wxs" module="logic" />

控制台输出：

'abc' from tools.wxs
logic.wxs
some msg

<wxs> 标签

属性名 类型 说明
module String 当前 `` 标签的模块名。必填字段。
src String 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。

module 属性

module 属性是当前 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。

module 属性值的命名必须符合下面两个规则：

  • 首字符必须是：字母（a-zA-Z），下划线（_）
  • 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

示例代码：

<!--wxml--><wxs module="foo">
var some_msg = "abc";
module.exports = {msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>

页面输出：

abc

上面例子声明了一个名字为 foo 的模块，将 some_msg 变量暴露出来，供当前页面使用。

src 属性

src 属性可以用来引用其他的 wxs 文件模块。

引用的时候，要注意如下几点：

  • 只能引用 .wxs 文件模块，且必须使用相对路径。
  • wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
  • 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

示例代码：

// /pages/index/index.jsPage({data: {msg: "'hello w3cSchool' from js",}
})
<!-- /pages/index/index.wxml --><wxs src="./../comm.wxs" module="some_comms"></wxs>
<!-- 也可以直接使用单标签闭合的写法
<wxs src="./../comm.wxs" module="some_comms" />
--><!-- 调用 some_comms 模块里面的 bar 函数，且参数为 some_comms 模块里面的 foo -->
<view> {{some_comms.bar(some_comms.foo)}} </view>
<!-- 调用 some_comms 模块里面的 bar 函数，且参数为 page/index/index.js 里面的 msg -->
<view> {{some_comms.bar(msg)}} </view>

页面输出：

'hello w3cschool' from comm.wxs
'hello W3CSCHOOL' from js

上述例子在文件 /page/index/index.wxml 中通过 <wxs> 标签引用了 /page/comm.wxs 模块。

注意

  • <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。
  • <template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的<wxs> 模块。

变量

概念

  • WXS 中的变量均为值的引用。
  • 没有声明的变量直接赋值使用，会被定义为全局变量。
  • 如果只声明变量而不赋值，则默认值为 undefined。
  • var表现与javascript一致，会有变量提升。
var foo = 1;
var bar = "hello w3cSchool";
var i; // i === undefined

上面代码，分别声明了 foo、 bar、 i 三个变量。然后，foo 赋值为数值 1 ，bar 赋值为字符串 "hello w3cSchool"。

变量名

变量命名必须符合下面两个规则：

  • 首字符必须是：字母（a-zA-Z），下划线（_）
  • 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

保留标识符

以下标识符不能作为变量名：

delete
void
typeofnull
undefined
NaN
Infinity
varif
else true
falserequirethis
function
arguments
returnfor
while
do
break
continue
switch
case
default

注释

WXS 主要有 3 种注释的方法。

示例代码：

<!-- wxml -->
<wxs module="sample">
// 方法一：单行注释/*
方法二：多行注释
*//*
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释var a = 1;
var b = 2;
var c = "fake";</wxs>

上述例子中，所有 WXS 代码均被注释掉了。

方法三 和 方法二 的唯一区别是，没有 */ 结束符。

运算符

基本运算符

示例代码：

var a = 10, b = 20;// 加法运算
console.log(30 === a + b);
// 减法运算
console.log(-10 === a - b);
// 乘法运算
console.log(200 === a * b);
// 除法运算
console.log(0.5 === a / b);
// 取余运算
console.log(10 === a % b);
  • 加法运算（+）也可以用作字符串的拼接。
var a = '.w' , b = 'xs';// 字符串拼接
console.log('.wxs' === a + b);

一元运算符

示例代码：

var a = 10, b = 20;// 自增运算
console.log(10 === a++);
console.log(12 === ++a);
// 自减运算
console.log(12 === a--);
console.log(10 === --a);
// 正值运算
console.log(10 === +a);
// 负值运算
console.log(0-10 === -a);
// 否运算
console.log(-11 === ~a);
// 取反运算
console.log(false === !a);
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);

位运算符

示例代码：

var a = 10, b = 20;// 左移运算
console.log(80 === (a << 3));
// 无符号右移运算
console.log(2 === (a >> 2));
// 带符号右移运算
console.log(2 === (a >>> 2));
// 与运算
console.log(2 === (a & 3));
// 异或运算
console.log(9 === (a ^ 3));
// 或运算
console.log(11 === (a | 3));

比较运算符

示例代码：

var a = 10, b = 20;// 小于
console.log(true === (a < b));
// 大于
console.log(false === (a > b));
// 小于等于
console.log(true === (a <= b));
// 大于等于
console.log(false === (a >= b));

等值运算符

示例代码：

var a = 10, b = 20;// 等号
console.log(false === (a == b));
// 非等号
console.log(true === (a != b));
// 全等号
console.log(false === (a === b));
// 非全等号
console.log(true === (a !== b));

赋值运算符

示例代码：

var a = 10;a = 10; a *= 10;
console.log(100 === a);
a = 10; a /= 5;
console.log(2 === a);
a = 10; a %= 7;
console.log(3 === a);
a = 10; a += 5;
console.log(15 === a);
a = 10; a -= 11;
console.log(-1 === a);
a = 10; a <<= 10;
console.log(10240 === a);
a = 10; a >>= 2;
console.log(2 === a);
a = 10; a >>>= 2;
console.log(2 === a);
a = 10; a &= 3;
console.log(2 === a);
a = 10; a ^= 3;
console.log(9 === a);
a = 10; a |= 3;
console.log(11 === a);

二元逻辑运算符

示例代码：

var a = 10, b = 20;// 逻辑与
console.log(20 === (a && b));
// 逻辑或
console.log(10 === (a || b));

其他运算符

示例代码：

var a = 10, b = 20;//条件运算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));
//逗号运算符
console.log(20 === (a, b));

运算符优先级

优先级 运算符 说明 结合性
20 ( … ) 括号 n/a
19 … . … 成员访问 从左到右
… [ … ] 成员访问 从左到右
… ( … ) 函数调用 从左到右
17 … ++ 后置递增 n/a
… -- 后置递减 n/a
16 ! … 逻辑非 从右到左
~ … 按位非 从右到左
+ … 一元加法 从右到左
- … 一元减法 从右到左
++ … 前置递增 从右到左
-- … 前置递减 从右到左
typeof … typeof 从右到左
void … void 从右到左
delete … delete 从右到左
14 … * … 乘法 从左到右
… / … 除法 从左到右
… % … 取模 从左到右
13 … + … 加法 从左到右
… - … 减法 从左到右
12 … << … 按位左移 从左到右
… >> … 按位右移 从左到右
… >>> … 无符号右移 从左到右
11 … < … 小于 从左到右
… <= … 小于等于 从左到右
… > … 大于 从左到右
… >= … 大于等于 从左到右
10 … == … 等号 从左到右
… != … 非等号 从左到右
… === … 全等号 从左到右
… !== … 非全等号 从左到右
9 … & … 按位与 从左到右
8 … ^ … 按位异或 从左到右
7 … ｜ … 按位或 从左到右
6 … && … 逻辑与 从左到右
5 … ｜｜ … 逻辑或 从左到右
4 … ? … : … 条件运算符 从右到左
3 … = … 赋值 从右到左
… += … 赋值 从右到左
… -= … 赋值 从右到左
… *= … 赋值 从右到左
… /= … 赋值 从右到左
… %= … 赋值 从右到左
… <<= … 赋值 从右到左
… >>= … 赋值 从右到左
… >>>= … 赋值 从右到左
… &= … 赋值 从右到左
… ^= … 赋值 从右到左
… ｜= … 赋值 从右到左
0 … , … 逗号 从左到右

if语句

在 WXS 中，可以使用以下格式的 if 语句 ：

  • if (expression) statement ： 当 expression 为 truthy 时，执行 statement。
  • if (expression) statement1 else statement2 : 当 expression 为 truthy 时，执行 statement1。 否则，执行 statement2
  • if … else if … else statementN 通过该句型，可以在 statement1 ~ statementN 之间选其中一个执行。

示例语法：

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

switch 语句

示例语法：

switch (表达式) {case 变量:语句;case 数字:语句;break;case 字符串:语句;default:语句;
}
  • default 分支可以省略不写。
  • case 关键词后面只能使用：变量，数字，字符串。

示例代码：

var exp = 10;switch ( exp ) {case "10":console.log("string 10");break;
case 10:console.log("number 10");break;
case exp:console.log("var exp");break;
default:console.log("default");
}

输出：

number 10

for 语句

示例语法：

for (语句; 语句; 语句)语句;for (语句; 语句; 语句) {代码块;
}
  • 支持使用 break，continue 关键词。

示例代码：

for (var i = 0; i < 3; ++i) {console.log(i);if( i >= 1) break;
}

输出：

0
1

while 语句

示例语法：

while (表达式)语句;while (表达式){代码块;
}do {代码块;
} while (表达式)
  • 当表达式为 true 时，循环执行语句或代码块。
  • 支持使用 break，continue 关键词。

数据类型

WXS 语言目前共有以下几种数据类型：

  • number ： 数值
  • string ：字符串
  • boolean：布尔值
  • object：对象
  • function：函数
  • array : 数组
  • date：日期
  • regexp：正则

number

语法

number 包括两种数值：整数，小数。

var a = 10;
var PI = 3.141592653589793;

属性

  • constructor：返回字符串 “Number”。

方法

  • toString
  • toLocaleString
  • valueOf
  • toFixed
  • toExponential
  • toPrecision

以上方法的具体使用请参考 ES5 标准。

string

语法

string 有两种写法：

'hello world';
"hello world";

属性

  • constructor：返回字符串 “String”。
  • length

除constructor外属性的具体含义请参考 ES5 标准。

方法

  • toString
  • valueOf
  • charAt
  • charCodeAt
  • concat
  • indexOf
  • lastIndexOf
  • localeCompare
  • match
  • replace
  • search
  • slice
  • split
  • substring
  • toLowerCase
  • toLocaleLowerCase
  • toUpperCase
  • toLocaleUpperCase
  • trim

以上方法的具体使用请参考 ES5 标准。

boolean

语法

布尔值只有两个特定的值：true 和 false。

属性

  • constructor：返回字符串 “Boolean”。

方法

  • toString
  • valueOf

以上方法的具体使用请参考 ES5 标准。

object

语法

object 是一种无序的键值对。使用方法如下所示：

var o = {} //生成一个新的空对象//生成一个新的非空对象
o = {'string'  : 1,  //object 的 key 可以是字符串const_var : 2,  //object 的 key 也可以是符合变量定义规则的标识符func      : {}, //object 的 value 可以是任何类型
};//对象属性的读操作
console.log(1 === o['string']);
console.log(2 === o.const_var);//对象属性的写操作
o['string']++;
o['string'] += 10;
o.const_var++;
o.const_var += 10;//对象属性的读操作
console.log(12 === o['string']);
console.log(13 === o.const_var);

属性

  • constructor：返回字符串 “Object”。
console.log("Object" === {k:"1",v:"2"}.constructor)

方法

  • toString：返回字符串 “[object Object]”。

function

语法

function 支持以下的定义方式：

//方法 1
function a (x) {return x;
}//方法 2
var b = function (x) { return x;
}

function 同时也支持以下的语法（匿名函数，闭包等）：

var a = function (x) {return function () { return x;}
}var b = a(100);
console.log( 100 === b() );

arguments

function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性：

  • length: 传递给函数的参数个数。
  • [index]: 通过 index 下标可以遍历传递给函数的每个参数。

示例代码：

var a = function(){console.log(3 === arguments.length);console.log(100 === arguments[0]);console.log(200 === arguments[1]);console.log(300 === arguments[2]);
};
a(100,200,300);

属性

  • constructor：返回字符串 “Function”。
  • length：返回函数的形参个数。

方法

  • toString：返回字符串 “[function Function]”。

示例代码：

var func = function (a,b,c) { }console.log("Function" === func.constructor);
console.log(3 === func.length);
console.log("[function Function]" === func.toString());

array

语法

array 支持以下的定义方式：

var a = [];      //生成一个新的空数组a = [1,"2",{},function(){}];  //生成一个新的非空数组，数组元素可以是任何类型

属性

  • constructor：返回字符串 “Array”。
  • length

除constructor外属性的具体含义请参考 ES5 标准。

方法

  • toString
  • concat
  • join
  • pop
  • push
  • reverse
  • shift
  • slice
  • sort
  • splice
  • unshift
  • indexOf
  • lastIndexOf
  • every
  • some
  • forEach
  • map
  • filter
  • reduce
  • reduceRight

以上方法的具体使用请参考 ES5 标准。

date

语法

生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。

getDate()
getDate(milliseconds)
getDate(datestring)
getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])
  • 参数milliseconds: 从1970年1月1日00:00:00 UTC开始计算的毫秒数datestring: 日期字符串，其格式为：“month day, year hours:minutes:seconds”

示例代码：

var date = getDate(); //返回当前时间对象date = getDate(1500000000000);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
date = getDate('2017-7-14');
// Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间)
date = getDate(2017, 6, 14, 10, 40, 0, 0);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)

属性

  • constructor：返回字符串 “Date”。

方法

  • toString
  • toDateString
  • toTimeString
  • toLocaleString
  • toLocaleDateString
  • toLocaleTimeString
  • valueOf
  • getTime
  • getFullYear
  • getUTCFullYear
  • getMonth
  • getUTCMonth
  • getDate
  • getUTCDate
  • getDay
  • getUTCDay
  • getHours
  • getUTCHours
  • getMinutes
  • getUTCMinutes
  • getSeconds
  • getUTCSeconds
  • getMilliseconds
  • getUTCMilliseconds
  • getTimezoneOffset
  • setTime
  • setMilliseconds
  • setUTCMilliseconds
  • setSeconds
  • setUTCSeconds
  • setMinutes
  • setUTCMinutes
  • setHours
  • setUTCHours
  • setDate
  • setUTCDate
  • setMonth
  • setUTCMonth
  • setFullYear
  • setUTCFullYear
  • toUTCString
  • toISOString
  • toJSON

以上方法的具体使用请参考 ES5 标准。

regexp

语法

生成 regexp 对象需要使用 getRegExp函数。

getRegExp(pattern[, flags])
  • 参数：pattern: 正则表达式的内容。flags：修饰符。该字段只能包含以下字符:g: globali: ignoreCasem: multiline。

示例代码：

var a = getRegExp("x", "img");
console.log("x" === a.source);
console.log(true === a.global);
console.log(true === a.ignoreCase);
console.log(true === a.multiline);

属性

  • constructor：返回字符串 “RegExp”。
  • source
  • global
  • ignoreCase
  • multiline
  • lastIndex

除constructor外属性的具体含义请参考 ES5 标准。

方法

  • exec
  • test
  • toString

以上方法的具体使用请参考 ES5 标准。

数据类型判断

constructor 属性

数据类型的判断可以使用 constructor 属性。

示例代码：

var number = 10;
console.log( "Number" === number.constructor );var string = "str";
console.log( "String" === string.constructor );var boolean = true;
console.log( "Boolean" === boolean.constructor );var object = {};
console.log( "Object" === object.constructor );var func = function(){};
console.log( "Function" === func.constructor );var array = [];
console.log( "Array" === array.constructor );var date = getDate();
console.log( "Date" === date.constructor );var regexp = getRegExp();
console.log( "RegExp" === regexp.constructor );

typeof

使用 typeof 也可以区分部分数据类型。

示例代码：

var number = 10;
var boolean = true;
var object = {};
var func = function(){};
var array = [];
var date = getDate();
var regexp = getRegExp();console.log( 'number' === typeof number );
console.log( 'boolean' === typeof boolean );
console.log( 'object' === typeof object );
console.log( 'function' === typeof func );
console.log( 'object' === typeof array );
console.log( 'object' === typeof date );
console.log( 'object' === typeof regexp );console.log( 'undefined' === typeof undefined );
console.log( 'object' === typeof null );

基础类库

console

console.log 方法用于在 console 窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。

Math

属性

  • E
  • LN10
  • LN2
  • LOG2E
  • LOG10E
  • PI
  • SQRT1_2
  • SQRT2

以上属性的具体使用请参考 ES5 标准。

方法

  • abs
  • acos
  • asin
  • atan
  • atan2
  • ceil
  • cos
  • exp
  • floor
  • log
  • max
  • min
  • pow
  • random
  • round
  • sin
  • sqrt
  • tan

以上方法的具体使用请参考 ES5 标准。

JSON

方法

  • stringify(object): 将 object 对象转换为 JSON 字符串，并返回该字符串。
  • parse(string): 将 JSON 字符串转化成对象，并返回该对象。

示例代码：

console.log(undefined === JSON.stringify());
console.log(undefined === JSON.stringify(undefined));
console.log("null"===JSON.stringify(null));console.log("111"===JSON.stringify(111));
console.log('"111"'===JSON.stringify("111"));
console.log("true"===JSON.stringify(true));
console.log(undefined===JSON.stringify(function(){}));console.log(undefined===JSON.parse(JSON.stringify()));
console.log(undefined===JSON.parse(JSON.stringify(undefined)));
console.log(null===JSON.parse(JSON.stringify(null)));console.log(111===JSON.parse(JSON.stringify(111)));
console.log("111"===JSON.parse(JSON.stringify("111")));
console.log(true===JSON.parse(JSON.stringify(true)));console.log(undefined===JSON.parse(JSON.stringify(function(){})));

Number

属性

  • MAX_VALUE
  • MIN_VALUE
  • NEGATIVE_INFINITY
  • POSITIVE_INFINITY

以上属性的具体使用请参考 ES5 标准。

Date

属性

  • parse
  • UTC
  • now

以上属性的具体使用请参考 ES5 标准。

Global

属性

  • NaN
  • Infinity
  • undefined

以上属性的具体使用请参考 ES5 标准。

方法

  • parseInt
  • parseFloat
  • isNaN
  • isFinite
  • decodeURI
  • decodeURIComponent
  • encodeURI
  • encodeURIComponent

以上方法的具体使用请参考 ES5 标准。

3.WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

  • 尺寸单位
  • 样式导入

尺寸单位

  • rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {padding:15px;
}

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:{{color}};" />
  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />

选择器

目前支持的选择器有：

选择器 样例 样例描述
.class .intro 选择所有拥有 class=“intro” 的组件
#id #firstname 选择拥有 id=“firstname” 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

微信小程序学习记录——4.框架-视图层相关推荐

  1. 微信小程序学习记录——3.框架-逻辑层

    文章目录 1.逻辑层简介 2.注册程序 App() onLaunch,onShow参数 getApp() 3.场景值 4.注册页面 Page() 生命周期 生命周期中的函数 初始化数据 页面相关事件处 ...

  2. 微信小程序学习记录【1】【项目结构构成、官方文档构成、基本配置】

    微信小程序学习记录[1][项目结构构成.基本配置]文章目录 项目结构构成 官方文档结构 基本配置 1. 小程序配置 1.1 app.json 1.2 page(页面名).json 1.3 sitema ...

  3. json 微信小程序 筛选_微信小程序学习记录

    全局配置 app.json 文件用来对微信小程序进行全局配置. pages 类型为 String Array 是 页​面路径列表,创建目录和更改时会自动更改文件. 用于指定小程序由哪些页面组成,每一项 ...

  4. 微信小程序学习记录（一）

    如何定义一个全局变量: 1,在根目录下app.js中添加 App({globalData: {g_isPlayingMusic : false,g_currentMusicPostId :null,d ...

  5. 微信小程序学习记录（二）MQTT连接阿里云

    准备 微信小程序开发工具 MQTT.js库:https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js点开链接,右击页面内容另存到电脑. 开始 将MQTT.js复制到 ...

  6. 微信小程序学习记录——5.组件

    文章目录 1.视图容器 view scroll-view swiper swiper-item movable-view movable-area movable-view cover-view co ...

  7. 微信小程序学习记录（一）小实战——加法计算器

    小实战--加法计算器 在[app.json]文件下添加计算器页面: "pages": ["pages/calc/calc",//新建计算器页面"pag ...

  8. 微信小程序学习记录2(js中数组和对象)

    1.数组 1.数组的创建: 推荐方式: var array =[] 2.js的数组可以装不同类型的变量 例如: array=['张三',123,aabb] 3.利用下标索引 4.数组的一些方法: .l ...

  9. 微信小程序学习（三）：在微信开发者工具中，使用WeUI前端美化框架，微信小程序

    微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用 网上有很多的方法,我绝大多数都没看懂,这里就是最简单 ...

最新文章

  1. Ubuntu 无界面使用selenium chrome + headless
  2. iphonex如何关机_iphonex常用手势操作有哪些 iphonex常用手势操作介绍【详解】
  3. 64位进程和32位进程通信问题，接收端收不到 SendMessage发送的消息
  4. 纪事日记–可自定义的数据存储
  5. python数码时钟代码_Python+Pyqt实现简单GUI电子时钟
  6. mysql 传统数据恢复_mysql 数据恢复实例
  7. 信息学奥赛一本通（1020：打印ASCII码）
  8. 轻量级HTTP服务器Nginx(Nginx性能优化技巧)
  9. 【Flink】Flink消费Kafka数据时指定offset的五种方式
  10. php部分---注册审核
  11. 百度文库、豆丁免费下载对应的下载券资源文件
  12. ipad上的html编辑器,iPad Pro变生产力工具，你还缺这个轻量级浏览器端代码编辑器...
  13. udp简单通讯示例---心跳示例
  14. UE4超过20万个动画角色的优化实战
  15. pythondocker——外部无法访问，报错：该网页无法正常运作
  16. 学计算机专业异构超算,中国科学技术大学超级计算中心
  17. Fedora安装 win7 32b 安装fedora x64 dvd
  18. 《淘宝技术这十年》读书笔记 (三). 创造技术TFS和Tair
  19. 记录金蝶系统页面获取的值为Null解决办法
  20. Linux下Tomcat的安装部署

热门文章

  1. JavaScript： JSON基本概念带题解
  2. 金蝉素数java代码分析_JAVA 水题
  3. 图像尺寸与Rect适配
  4. android开发隐藏图片,用美图看看安卓版教你如何隐藏私人图片（图文）
  5. 教你保护相册里的「小秘密」，如何在 iPhone 和 iPadOS 中隐藏照片
  6. php映射脚本,代替php脚本
  7. 如何读取csv文件并将其转化为tsv文件
  8. 14.嵌入式控制器EC实战 SMBus读取电池信息并控制充放电
  9. 华为机试真题 Python 实现【最短木板长度】【100%通过率】【2022.11 Q4 新题】
  10. cad2011 2010闪退问题