微信小程序视图层处理增强之WXS

时间: 2018-08-28阅读: 2303标签: 小程序

熟悉微信小程序开发框架的开发者,肯定会对其视图层WXML中缺失的一个功能耿耿于怀,那就是没有办法在视图层对数据进行格式化处理。比如我们从后端获取到一个包含了时间戳数据的数组,然后需要在界面上把这些日期都格式化显示为2017-01-01这种格式的日期形式,在vue, Angular之类的前端Web框架中,一般在视图层都提供了如filter之类相应比较好用的方案。 
而在现有的微信小程序代码中?你能怎么做?估计我们的做法要么是在Page代码中遍历一次数组,做一下格式化;要么,只能让后端返回已经格式化好的数据了。 
对于追求程序代码优雅的程序员来说,这简直就是心中一个巨大的疙瘩!微信小程序团队估计没少受这方面的吐槽。因此,这次WXS的推出算是满足了对这种需求的渴望吧。 
WXS算是专供WXML调用的有独立作用域的js模块(不是全功能的js,感觉有所限制)。举个例子,在这之前,我们是没有办法在WXML的数据绑定括号{{}}中调用JS函数的,所以在WXML层面就缺少了进一步做数据处理的能力。 
下列代码是不工作的:

<!-- wxml文件 -->
<view>{{testFunc(name)}}</view>

// some-page.js
Page({
    data: {
        name: "一斤代码"
    },

    testFunc: function (name) {
          return "Hello," + name
    }
})


而有了WXS之后,我们就可以实现我们预期的功能了:

<!-- wxml文件 -->
<view>{{myModule.testFunc(name)}}</view>

<wxs module="myModule">
    function testFunc(name) {
        return "Hello," + name
    }
    module.exports.testFunc = testFunc
</wxs>

// some-page.js
Page({
    data: {
        name: "一斤代码"
    }
})


WXS可以直接定义在wxml文件的标签体中,也可以写在独立的.wxs后缀名的文件中,然后在wxml文件中通过的形式引入。 
如要要在WXS代码中去引用其他独立.wxs文件,可以通过 require()函数来引入,基本上都是我们熟悉的方式:

var formatUtil = require("./format-util.wxs");
var now = getDate()

formatUtil.formatDate(now)


所以,WXS在功能方面,并没有什么复杂的东西,唯一需要特别注意一些的,就是它的作用域了: 
模块只能在定义模块的 WXML 文件中被访问到。使用 或 时, 模块不会被引入到对应的 WXML 文件中。 
标签中,只能使用定义该 的 WXML 文件中定义的 模块。

来源:https://blog.csdn.net/tianxintiandisheng/article/details/82086275

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1036

微信小程序WXS之谜

微信创造了 WXS ,除了提高性能,还有什么原因?WXS(WeiXin Script)是微信创造的一套脚本语言,它的官方说法是:“WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致”。

微信小程序框架推荐_分享好用的小程序前端开发框架

选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。

小程序开发实践总结

从微信发布小程序以来,各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。前前后后也开发了四五个小程序了。总觉得要留下点什么,既是记录那些年我们踩过的坑,也是希望大家别再掉坑。

腾讯出品的微信小程序有哪些?

腾讯wifi一键连;识花君;企鹅医典;vgo微海报;腾讯AI体验中心;食物健康测评;腾讯地图+;微信辟谣助手;腾讯文档;多媒体AI平台;微云;微信发票助手

微信小程序推广方式_最有效的小程序推广模式

当小程序开发完成后,就需要进行推广操作。当然推广的前提是核心功能是否能够满足用户需求,下面总结一些具体的运作方式。和大多数APP的搜索个性一样,用户搜索小程序名称就能进入小程序界面。我们需要做好关键词优化,通过搜索-微信指数

网页程序迁移至微信小程序web-view详解

小程序之前开放了webview功能,可以说是网页应用的一大福音了,但是微信的webview有一些坑,这篇文章就是列举一下我在开发过程中遇到的一些问题以及我找到的一些解决方案。

小程序获取用户信息

其实获取用户信息,一种是获取权限的,一种是不用获取权限,前者获取到的信息更多,包含一些敏感信息,包括给getaccessToken接口需要传的参数,后者就是简单获取一些头像、昵称等信息

小程序分享海报的实现

小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成;后端的方式开发难度大,由于生成图片耗用内存比较大对服务端也是不小的压力;

支付宝小程序个人开发者,但暂未开放支付接口

支付宝小程序今日正式面向个人开发者开放公测。这是继微信之后,业内第2家面向个人开发者开放的小程序平台。有开发能力的个人用户可访问支付宝小程序平台,扫码验证个人身份以后即可开始支付宝小程序账号申请并进行代码开发。

使用scss开发小程序(各种小程序平台通用)

微信小程序的wxss、阿里旗下淘宝、支付宝小程序的acss等等语法很类似原生css,但是在web开发里用惯了动态css语言,再写回原生css很不习惯,尤其是父子样式的嵌套写法非常繁琐。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!