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

更新日期: 2018-08-28阅读量: 2356标签: 小程序

熟悉微信小程序开发框架的开发者,肯定会对其视图层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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

如何探测小程序返回到webview页面?

项目是小程序(wepy), 部分页面使用webview(vue). 经常会遇见一个场景: 当小程序navigateTo到一些页面对用户的收藏状态,做了修改后, 用户点击返回按钮回到上一个页面

微信小程序页面返回按键控制

今天在开发公司内部的小程序项目时,遇到了一个问题,就是控制手机返回按键的问题,本来我以为很快就可以解决的,没想到最后我用了快一天的时间,才给做好,而且还不是我最初想到的方法。

web view内嵌的h5页面与小程序直接相互跳转的实现

在小程序中使用web-view组件嵌套的H5页面,如何实现和小程序页面之间的相互跳转呢?下面就简单介绍下如何实现的,希望能帮助到您

微信小程序跳转小程序

以前小程序跳小程序直接通过api调用跳转即可,但在2018.11.1下午微信公众平台通知需做navigateToMiniProgramAppIdList配置,否则无法提交审核,配置要跳转的微信小程序id ,最多不能超过10个。

小程序保存图片到本地

保存图片到本地相册,需要用户允许相册权限;但是有时客户手滑或者是特别原因点击了拒绝授权,我们需要打开权限列表,让客户手动打开此项权限;

小程序超过2M限制的方法_分包加载

起初小程序上线时,微信限制了代码包不能超过1MB,后来功能变大变成了2M了,限制大小是出于对小程序启动速度的考虑,<br>希望用户在使用任何一款小程序时,都能获得一种“秒开”体验

微信小程序用户授权

对于小程序未授权的用户,官方取消wx.getUserInfo方法的直接调用,首次授权必须主动触发自定义按钮,才可调起官方授权组件。思路步骤:wx.getSetting查看是否授权,已授权使用wx.getUserInfo获取用户信息,保存

微信小程序之异步处理

小程序中存在大量异步调用的接口,例如最常用的wx.login()、wx.getUserInfo()、wx.setStorage()、wx.getStorage()、wx.request(),虽然官方对部分接口也做出了同步版本,例如wx.setStorageSync、wx.getStorageSync(),但是在实际开发中始终要面对异步处理这个问题

小程序的节流与防抖

在屏幕滚动与拖拽的时候,经常会用到一些持续触发的事件,而这类事件不可控触发频率非常高,大大影响了性能,而我们想要让其变得可控,就可以用到节流和防抖两种方案。

微信小程序wx.getUserInfo授权获取用户信息

这个接口只能获得一些非敏感信息,例如用户昵称,用户头像,经过用户授权允许获取的情况下即可获得用户信息,至于openid这些,需要调取wx.login来获取。

点击更多...

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