WXS|WXS脚本语言
WXS
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
以下是一些使用 WXS 的简单示例:
WXS、WXS语言、WXS脚本语言、微信小程序
页面渲染
<!--wxml--> <wxs module="m1"> var msg = "hello world"; module.exports.message = msg; </wxs> <view> {{m1.message}} </view>
页面输出:
hello world
数据处理
// 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
框架
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。
响应的数据绑定
框架的核心是一个响应的数据绑定系统。
整个系统分为两块视图层(View)和逻辑层(App Service)
框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
通过这个简单的例子来看:
<!-- This is our View --> <view> Hello {{name}}! </view> <button bindtap="changeName"> Click me! </button>
// This is our App Service. // This is our data. var helloData = { name: 'WeChat' } // Register a Page. Page({ data: helloData, changeName: function(e) { // sent data change to view this.setData({ name: 'MINA' }) } })
开发者通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定,所以在页面一打开的时候会显示 Hello WeChat!
当点击按钮的时候,视图层会发送 changeName 的事件给逻辑层,逻辑层找到对应的事件处理函数
逻辑层执行了 setData 的操作,将 name 从 WeChat 变为 MINA,因为该数据和视图层已经绑定了,从而视图层会自动改变为 Hello MINA! 。
页面管理
框架 管理了整个小程序的页面路由,可以做到页面间的无缝切换,并给以页面完整的生命周期。开发者需要做的只是将页面的数据,方法,生命周期函数注册进 框架 中,其他的一切复杂的操作都交由 框架 处理。
基础组件
框架 提供了一套基础的组件,这些组件自带微信风格的样式以及特殊的逻辑,开发者可以通过组合基础组件,创建出强大的微信小程序 。
丰富的 API
框架 提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
基础组件
框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
什么是组件:
组件是视图层的基本组成单元。
组件自带一些功能与微信风格的样式。
一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。
<tagname property="value"> Content goes here ... </tagname>
注意:所有组件与属性都是小写,以连字符-连接
属性类型
类型 | 描述 | 注解 |
---|---|---|
Boolean | 布尔值 | 组件写上该属性,不管该属性等于什么,其值都为true,只有组件上没有写该属性时,属性值才为false。如果属性值为变量,变量的值会被转换为Boolean类型 |
Number | 数字 | 1, 2.5 |
String | 字符串 | "string" |
Array | 数组 | [ 1, "string" ] |
Object | 对象 | { key: value } |
EventHandler | 事件处理函数名 | "handlerName" 是 Page中定义的事件处理函数名 |
Any | 任意属性 |
共同属性类型
所有组件都有的属性:
属性名 | 类型 | 描述 | 注解 |
---|---|---|---|
id | String | 组件的唯一标示 | 保持整个页面唯一 |
class | String | 组件的样式类 | 在对应的 WXSS 中定义的样式类 |
style | String | 组件的内联样式 | 可以动态设置的内联样式 |
hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
data-* | Any | 自定义属性 | 组件上触发的事件时,会发送给事件处理函数 |
bind* / catch* | EventHandler | 组件的事件 | 详见事件 |
特殊属性
几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰,请参考各个组件的定义。
组件列表
基础组件分为以下七大类:
视图容器(View Container):
组件名 | 说明 |
---|---|
view | 视图容器 |
scroll-view | 可滚动视图容器 |
swiper | 滑块视图容器 |
基础内容(Basic Content):
组件名 | 说明 |
---|---|
icon | 图标 |
text | 文字 |
progress | 进度条 |
表单(Form):
标签名 | 说明 |
---|---|
button | 按钮 |
form | 表单 |
input | 输入框 |
checkbox | 多项选择器 |
radio | 单项选择器 |
picker | 列表选择器 |
picker-view | 内嵌列表选择器 |
slider | 滚动选择器 |
switch | 开关选择器 |
label | 标签 |
导航(Navigation):
组件名 | 说明 |
---|---|
navigator | 应用链接 |
多媒体(Media):
组件名 | 说明 |
---|---|
audio | 音频 |
image | 图片 |
video | 视频 |
地图(Map):
组件名 | 说明 |
---|---|
map | 地图 |
画布(Canvas):
组件名 | 说明 |
---|---|
canvas | 画布 |
客服会话:
组件名 | 说明 |
---|---|
contact-button | 进入客服会话按钮 |
API
框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
说明:
wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
如未特殊约定,其他 API 接口都接受一个OBJECT作为参数。
OBJECT中可以指定success, fail, complete来接收接口调用结果。
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
API列表:
网络 API 列表:
API | 说明 |
---|---|
wx.request | 发起网络请求 |
wx.uploadFile | 上传文件 |
wx.downloadFile | 下载文件 |
wx.connectSocket | 创建 WebSocket 连接 |
wx.onSocketOpen | 监听 WebSocket 打开 |
wx.onSocketError | 监听 WebSocket 错误 |
wx.sendSocketMessage | 发送 WebSocket 消息 |
wx.onSocketMessage | 接受 WebSocket 消息 |
wx.closeSocket | 关闭 WebSocket 连接 |
wx.onSocketClose | 监听 WebSocket 关闭 |
媒体 API 列表:
API | 说明 |
---|---|
wx.chooseImage | 从相册选择图片,或者拍照 |
wx.previewImage | 预览图片 |
wx.startRecord | 开始录音 |
wx.stopRecord | 结束录音 |
wx.playVoice | 播放语音 |
wx.pauseVoice | 暂停播放语音 |
wx.stopVoice | 结束播放语音 |
wx.getBackgroundAudioPlayerState | 获取音乐播放状态 |
wx.playBackgroundAudio | 播放音乐 |
wx.pauseBackgroundAudio | 暂停播放音乐 |
wx.seekBackgroundAudio | 控制音乐播放进度 |
wx.stopBackgroundAudio | 停止播放音乐 |
wx.onBackgroundAudioPlay | 监听音乐开始播放 |
wx.onBackgroundAudioPause | 监听音乐暂停 |
wx.onBackgroundAudioStop | 监听音乐结束 |
wx.chooseVideo | 从相册选择视频,或者拍摄 |
文件 API 列表:
API | 说明 |
---|---|
wx.saveFile | 保存文件 |
wx.getSavedFileList | 获取已保存的文件列表 |
wx.getSavedFileInfo | 获取已保存的文件信息 |
wx.removeSavedFile | 删除已保存的文件信息 |
wx.openDocument | 打开文件 |
数据 API 列表:
API | 说明 |
---|---|
wx.getStorage | 获取本地数据缓存 |
wx.getStorageSync | 获取本地数据缓存 |
wx.setStorage | 设置本地数据缓存 |
wx.setStorageSync | 设置本地数据缓存 |
wx.getStorageInfo | 获取本地缓存的相关信息 |
wx.getStorageInfoSync | 获取本地缓存的相关信息 |
wx.removeStorage | 删除本地缓存内容 |
wx.removeStorageSync | 删除本地缓存内容 |
wx.clearStorage | 清理本地数据缓存 |
wx.clearStorageSync | 清理本地数据缓存 |
位置 API 列表:
API | 说明 |
---|---|
wx.getLocation | 获取当前位置 |
wx.chooseLocation | 打开地图选择位置 |
wx.openLocation | 打开内置地图 |
wx.createMapContext | 地图组件控制 |
设备 API 列表:
API | 说明 |
---|---|
wx.getNetworkType | 获取网络类型 |
wx.onNetworkStatusChange | 监听网络状态变化 |
wx.getSystemInfo | 获取系统信息 |
wx.getSystemInfoSync | 获取系统信息 |
wx.onAccelerometerChange | 监听加速度数据 |
wx.startAccelerometer | 开始监听加速度数据 |
wx.stopAccelerometer | 停止监听加速度数据 |
wx.onCompassChange | 监听罗盘数据 |
wx.startCompass | 开始监听罗盘数据 |
wx.stopCompass | 停止监听罗盘数据 |
wx.setClipboardData | 设置剪贴板内容 |
wx.getClipboardData | 获取剪贴板内容 |
wx.makePhoneCall | 拨打电话 |
wx.scanCode | 扫码 |
界面 API 列表:
API | 说明 |
---|---|
wx.showToast | 显示提示框 |
wx.showLoading | 显示加载提示框 |
wx.hideToast | 隐藏提示框 |
wx.hideLoading | 隐藏提示框 |
wx.showModal | 显示模态弹窗 |
wx.showActionSheet | 显示菜单列表 |
wx.setNavigationBarTitle | 设置当前页面标题 |
wx.showNavigationBarLoading | 显示导航条加载动画 |
wx.hideNavigationBarLoading | 隐藏导航条加载动画 |
wx.navigateTo | 新窗口打开页面 |
wx.redirectTo | 原窗口打开页面 |
wx.switchTab | 切换到 tabbar 页面 |
wx.navigateBack | 退回上一个页面 |
wx.createAnimation | 动画 |
wx.createContext | 创建绘图上下文 |
wx.drawCanvas | 绘图 |
wx.stopPullDownRefresh | 停止下拉刷新动画 |
WXML节点信息 API 列表:
API | 说明 |
---|---|
wx.createSelectorQuery | 创建查询请求 |
selectorQuery.select | 根据选择器选择单个节点 |
selectorQuery.selectAll | 根据选择器选择全部节点 |
selectorQuery.selectViewport | 选择显示区域 |
nodesRef.boundingClientRect | 获取布局位置和尺寸 |
nodesRef.scrollOffset | 获取滚动位置 |
nodesRef.fields | 获取任意字段 |
selectorQuery.exec | 执行查询请求 |
开放接口:
API | 说明 |
---|---|
wx.login | 登录 |
wx.getUserInfo | 获取用户信息 |
wx.chooseAddress | 获取用户收货地址 |
wx.requestPayment | 发起微信支付 |
wx.addCard | 添加卡券 |
wx.openCard | 打开卡券 |
不能直接操作 Page.data
避免在直接对 Page.data 进行赋值修改,请使用 Page.setData 进行操作才能将数据同步到页面中进行渲染
怎么获取用户输入
能够获取用户输入的组件,需要使用组件的属性bindblur将用户的输入内容同步到 AppService。
<input id="myInput" bindblur="bindBlur" />
var inputContent = {} Page({ data: { inputContent: {} }, bindBlur: function(e) { inputContent[e.currentTarget.id] = e.detail.value } })
为什么脚本内不能使用window等对象
页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件
为什么 zepto/jquery 无法使用
zepto/jquery 会使用到window对象和document对象,所以无法使用。
wx.navigateTo无法打开页面
一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面。请避免多层级的交互方式,或者使用wx.redirectTo
样式表不支持级联选择器
WXSS支持以.开始的类选择器。如:
.normal_view { color: #000000; padding: 10px; }
可以使用标签选择器,控制同一类组件的样式。如:使用input标签选择器控制<input/>的默认样式。
input { width: 100px; }
本地资源无法通过 WXSS 获取
background-image:可以使用网络图片,或者 base64,或者使用<image/>标签
如何修改窗口的背景色
使用 page 标签选择器,可以修改顶层节点的样式
page { display: block; min-height: 100%; background-color: red; }
HTTPS 请求不成功
tls 仅支持 1.2 及以上版本
部分 Android 机型需要 tls1.0 或者 tls1.1,所以请确保服务器的 tls 版本为 1.0、1.1、1.2
网络请求的 referer
网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本。
为什么 map 组件总是在最上层
map、canvas、video、textarea 是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。 原生组件暂时还无法放在 scroll-view 上,也无法对原生组件设置 css 动画。
扫二维码手机查看该文章
- 上一篇:微信小程序开发工具全新上线
- 下一篇:微信公众号“公众平台助手”发布