前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 vue 中的 | 方法进行快速的过滤,大都是用数据遍历洗数据来实现的,说实话,很麻烦,即使提取了公共方法那也麻烦,总之要洗数据就麻烦 WXS 为何物 在上代码之前先简单的介绍一下 WXS 是什么,以及和 javascript 有什么区别,虽然官方文档中都有,但我认为博客的存在意义就是尽量减少看官们的页

Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个人对象里面包含车辆对象数组, 我们发现人名好现实,但是车辆数量不方便统计,这时使用wxs就能很好的解决 list: [{ id: 1, name: '张三', cars: [{ id: 1, name: '奔驰' }, ...... ] }, ......] // index.wxml<view c

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构 WXS中定义的函数可以在wxml文件中使用,可以用它来当过滤器使用 WXS以.wxs扩展名结尾,文件中代码写法和JS类似,不支持ES6写法 1:创建wxs模块 2: function mysub(str,start,len){ var offset=start || 0; var len= len || 10; len= Math.min(20,len); if(str.length<=len){

1.在js文件里写个界面跳转的事件处理函数gotableinfo,var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标,wx.navigateTo为小程序提供的界面路由跳转的方法,参数url为要跳转页面的连接(?后面为连接携带的参数) 2.data-index="{{index}}"为标记列表的下脚标,index的来源与wx:for="{{synctable}}"的列表渲染有关   默认

你想在页面上使用JavaScript代码吗? 对不起,小程序不支持! 最近,一个项目就有这样的需求,我也就用上了wxs 使用方法很简单: 项目中用的是取小数点2位以及5位 具体请看官方API:WXS

wxs weixin script,小程序的脚本语言:可以结合wxml构建页面结构: 说白了 就是在小程序里面写函数表达式的地方: wxml里面直接使用wxs,有错误再次刷新就能解决 <wxs module="info"> var str = '小明'; var fun = function (a,b){ return a + b } module.exports={ str : str, fun:fun } </wxs> <view>{{info.

一.wxs介绍 wxs是微信小程序自身的脚本语言,用来过滤和计算.wxs可以通过文件可模块标签来定义 文件需要.wxs后缀文件 二.实例 <wxs module="test1"> module.exports = { message:'from test1!' } </wxs> <view>{{test1.message}}</view> wxs中定义变量默认对外不可预见,我们通过 module.exports={} 对外课件. <

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. wxs可以说就是为了满足能在页面中使用js存在的,在wxml页面中,只能在插值{{ }}中写简单的js表达式,而不能调用方法,例如想取出一个字符串的最后一位,就不能调用slice()方法. 通常的解决办法是在page的data对象中先把这个字符串截取好赋给某个变量,然后在页面中使用这个变量,但是问题又来了,如果变量多了呢,是不是要定义很多次. 在html中引入像artTemplate这样的模板后,

新建一个.wxs文件 <!-- 引入.wxs文件 src为相对路径,module指定当前模块的名称 --> <wxs module="filter" src="./func.wxs"></wxs> <view>{{filter.xxx(item)}}</view>

<block wx:for="{{menu}}" wx:key="index"> <view class="cate-item {{item.isActive ? 'active': ''}}" bindtap="selectCategory" data-index="{{index}}" data-flag="0"> <view class="t

function toFix(data, val) { var numbers = ''; for (var i = 0; i < val; i++) { numbers += '0'; } var s = 1 + numbers; var spot = "." + numbers; var value = Math.round(parseFloat(data) * s) / s; var d = value.toString().split("."); if

function formatDate(value) { //不能使用 new Date() var time = getDate(value); var year = time.getFullYear(); var month = time.getMonth() + 1; var date = time.getDate(); var hour = time.getHours(); var minute = time.getMinutes(); var second = time.getSeco

重要:极乐商店域名变更:wxapp.dreawer.com/变更为store.dreawer.com/ 每周一笑 当年刚学打篮球的时候,疯狂地迷恋上了乔丹,然后迷恋上了NIKE,更熟记了NIKE的那句广告语:JUST DO IT. 然后-我从此进入了IT行业. 上周更新 小程序新功能--手机号快速填写及会员卡开卡组件开放 2017-8-25 小程序分享等能力升级 2017-8-19 微信部分功能故障,正在紧急修复中 2017-8-21 上周资教 微信小程序--真机和模拟器效果不一样解决方案 20

前言 前一段时间微信公布小程序,瞬间引来了大量的关注.博主的公司也将其定为目标之一,遂派本菜为先头兵(踩坑侠). 这次开发了一个比较完整的DEMO,模仿自某个APP首页,由于保护隐私的目的我把数据拷贝出来而不是通过接口的方式访问,请求接口的方法我会在后面详细说明. 废话不多说,先上原码:https://github.com/Darylxyx/wx-app/tree/master/tanqu-wx.有兴趣的朋友可以下一个IDE导入项目玩玩. 文档地址:https://mp.weixin.qq.co

微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, 这种在极端情况下也不太好,例如我例子里的一页的表单个数非常多的情况下,可能后面的还没看到就消失了.所以最近又重新做了一版,最终版的效果如下图:错误信息一次性全部显示,可以通过点击信息框让其消失,将自动消失时间设置的稍微长点,例如10秒,这样就能比较好的兼顾效果和使用上的便捷. 先讲讲最终版与前面2

在微信小程序的开发过程中,当你想要实现不同页面间的数据绑定,却为此抓耳饶腮时,不妨让微信小程序与filter 来一场完美的邂逅,相信会给你带来别样的惊喜~ 前段时间被安利了一个很实用的公众号-前端早读课,它简洁.大方的页面和方便.实用的功能深深地吸引着我~(^U^)ノ 恰好这段时间学了小程序,就自己仿着写了个前端早读课的小程序. 实现的功能 不同页面间的数据绑定 随机显示数组里的元素 实时显示系统的日期 鼠标点击和页面跳转等基本功能 swiper组件和template样式模板的使用 使用easy

由于微信小程序 技术生态比较闭合,导致很多 现代前端框架很多积累出的成果都没有实现(可能未来会逐一实现). 用惯了现代 再耍小程序 总感觉很不顺手. 需要结果的请直接看最后的WXS View Filter filter 理解为管道加工处理, 你扔给我一组数据 经过各种不同类型的管道加工 产出新的数据 但是又不会影响修改原数据, 最终展示给用户. 现有前端框架filter一般: time | dateTime('yyy-mm-dd') 使用 | 作为管道符 传递参数进行序列化 缺陷: 截止目前,小

  视图层:Pages主要有 wxml页面文件和模板文件.wxs脚本文件.wxss样式文件:component是抽取出来的业务单元,同样拥有wxml页面文件和模板文件.wxs脚本文件.wxss样式文件. WXML(WeiXin Markup language) 用于描述页面的结构. WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. WXSS(WeiXin Style Sheet) 用于描述页面的样式. 组件(Component)是视图的基本组成

内容简介的换行 问题:因为微信的<text></text>标签能够转义\n,所以从服务器加载来的数据我们可以直接放到这个标签中,\n就会自己换行了.问题是服务器返回来的数据多了个,即\\n,所以我们要想办法进行处理. 解决:可以用wxs来让wxml调用js函数,然后在函数里面处理文本信息 wxs的使用 作用:可以用作小程序的过滤器 使用: 方法一:在util文件夹下新建filter.wxs文件,段首可以设置text-indent,来设置首行缩进 //定义filter.wxs var

微信小程序的wxs语法 可以当做vue的计算属性和vue filter 使用.因为wxs中的函数可以写在{{   }}中 . 例如: 可用在 <view>{{ foo() }}</view> 详见官网:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/