关闭

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

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

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

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

小程序之生成朋友圈图片

微信的小程序是没有分享到朋友圈的功能的。小程序目前只能分享到群里或者发给好友。但是业务需要方便推广,需要分享到朋友圈。得出了以下思路:利用小程序canvas绘制图片,将背景图和二维码绘制成一张图片。

微信小程序picker组件两列关联使用方式

在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变

小程序的节流与防抖

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

mpvue开发微信小程序基础知识

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。mp 即 mini program 的缩写。

微信小程序Socket的实现_基于socket-io

在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。

从VantComponent 谈小程序维护

在开发小程序的时候,我们总是期望用以往的技术规范和语法特点来书写当前的小程序,所以才会有各色的小程序框架,例如 mpvue、taro 等这些编译型框架

小程序web-view关闭后,页面音频没有关闭

在web-view的src中,引入了一个HTML5页面,这个页面有个自动播放的音频。在小程序中,点击右上角关闭小程序后,web-view页面中的音频依然会播放。

你也许并不需要小程序框架

市面上不停的会有大的公司推出自己的小程序的研发库 / 框架,功能十分强大,也为小程序的开发带来了便利。但在一些积极的反馈中,我们也看到不一样的声音:

Mpx 小程序框架技术揭秘

与目前业内的几个小程序框架相比较而言,mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说,是没有任何“包袱”,围绕着原生小程序这个 core 去做不同功能的 patch 工作

点击更多...

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