微信小程序：新功能WXS解读（2017.08.30新增）

注意（来自官方文档）

wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。

wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。

wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。

wxs 函数不能作为组件的事件回调。

由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

举个例子，在`wxs`出来之前，如果我们要连接一个数组的内容并显示在`wxml`中，我们需要通过循环连接数组的每一项：

.wxml

<view>
<block wx:for="{{names}}" wx:key="item">
{{item}}
</block>
</view>

.js

Page({
data: {
names:[
'Tom',
'Peter',
'Gray',
'Lisa'
]
},
})

或者先在js中连接好，放在data中，再显示在wxml中：
.wxml

<view>
{{content}}
</view>

.js

Page({
data: {
content:"",
names:[
'Tom',
'Peter',
'Gray',
'Lisa'
]
},
onLoad(options){
let content = this.data.names.join(" ")
this.setData({
content
})
}
})

有了wxs后，我们可以直接在wxml完成：

.wxml

<wxs module="util">
var joinArray = function (array) {
return array.join(' ')
}
module.exports = {
joinArray: joinArray
}
</wxs>
<view>
{{util.joinArray(names)}}
</view>

或者将工具函数保存为单独的文件，通过引入来使用：
/src/wxs/common.wxs

var joinArray = function (array) {
return array.join(' ')
}
module.exports = {
joinArray: joinArray
}

/pages/index/index.wxml

<wxs src="../../src/wxs/common.wxs" module="util" />
<view>
{{util.joinArray(names)}}
</view>

引入的时候，wxs标签src填写相对路径（绝对路径无效），module指定名字。

我们也可以将页面中的一些常量放在wxs中:

var MAX_COUNT = 19
module.exports = {
MAX_COUNT: MAX_COUNT
}

总结：

WXS增强了wxml的功能，相当于页面中的脚本语言，我们可以将比如检查手机格式的函数放在wxs中来使用（根据是否正确来改变相应的样式），而不用跑到在js中去检查。

需要注意的地方：

wxs目前似乎并不支持ES6（至少let不能使用）
wxs文件不能被js文件引用。wxs文件能引用wxs文件。

参考：
微信小程序WXS官方文档

微信小程序：新功能WXS解读（2017.08.30新增）相关推荐

python开发小程序拼团_微信小程序新功能，正合适开发拼团类小程序|明智科技...
1.分享微信小程序的任何一个页面都可以增加分享功能,用户可以把小程序便捷的分享给通讯录的好友和微信群.但不能分享到朋友圈. 也可以进一步理解为小程序开发者可以创造一种诱导用户分享给好友和微信群的应用 ...
微信 php收藏功能实现,关于微信小程序收藏功能的实现
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下需求点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...
小程序能打开html页面,小程序新功能直接打开网页
原标题:小程序新功能直接打开网页喜讯小程序终于又开放新功能了,小程序的功能越来越强大了. 我想这个功能不管对对商家还是对开发人员都是非常好的功能,因为可以打开网页代表他可以链接更多,小程序最多可以关 ...
智慧物业小程序_物业小程序物业微信小程序目前功能最全的物业小程序
原标题:物业小程序物业微信小程序目前功能最全的物业小程序以物业管理为核心,打造智慧社区云微信小程序管理平台,已入驻腾讯海纳社区,物业微信小程序,解决传统物业管理难,乱差的问题,利用微信小程序提供一整 ...
微信小程序要这样去解读
微信小程序要这样去解读九个月之前张小龙的一次公开演讲第一次提到应用号,今天终于以小程序的名字正式对外小范围公测,只有200个邀请名额,我知道你肯定没有被翻牌子,我也没有.不管是朋友圈.订阅号.服务号 ...
视频教程-10分钟实现微信小程序支付功能-微信开发
10分钟实现微信小程序支付功能码农一枚,非著名全栈开发人员.分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑. 多年全栈开发经验,擅长小程序,java,安卓,web前端开发. 邱石 ¥19. ...
三步教你开通微信小程序直播功能
3月8日,微信官方举办了 "女神节"微信小程序直播的活动,联合近千品牌小程序直播首秀,当天,每个用户平均观看直播时间超过了8分钟,人均点赞数达到了280次,分享次数最高的直播间达到 ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
python个人微信支付接口_Python实现微信小程序支付功能
正文由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...

微信小程序：新功能WXS解读（2017.08.30新增）

注意（来自官方文档）

举个例子，在`wxs`出来之前，如果我们要连接一个数组的内容并显示在`wxml`中，我们需要通过循环连接数组的每一项：

微信小程序：新功能WXS解读（2017.08.30新增）相关推荐

最新文章

热门文章

微信小程序：新功能WXS解读（2017.08.30新增）

注意（来自官方文档）

举个例子，在wxs出来之前，如果我们要连接一个数组的内容并显示在wxml中，我们需要通过循环连接数组的每一项：

微信小程序：新功能WXS解读（2017.08.30新增）相关推荐

最新文章

热门文章

举个例子，在`wxs`出来之前，如果我们要连接一个数组的内容并显示在`wxml`中，我们需要通过循环连接数组的每一项：