原生小程序 之 wxs（微信小程序的脚本）

原生小程序 之 wxs（微信小程序的脚本）

• 作用：类似 过滤器等
  • 把小写字母 过滤为大写字母 显示
    
    

wxs 脚本的 基本使用

内嵌的 wxs 语法 （ 实现一个 小写字母 转化为大写字母显示）

• index.wxml

<!--pages/info/info.wxml-->
<view>
  info 页面
  <view>{{username}}</view>
  <view>{{m1.toUpper(username) }}</view>
</view>
<wxs module="m1">
// 过滤器 把小写字母 装为 大写字母
  module.exports.toUpper = function(str){
    return str.toUpperCase()
  }
</wxs>

• 效果
  

外嵌的 wxs 语法 （ 实现一个 大写字母 转化为小写字母显示）

• utils / tools.js

function toLower(str){
  return str.toLowerCase()
}
module.exports = {
  toLower:toLower
}

• info.wxml

<!--pages/info/info.wxml-->
<view>
  info 页面
  <view>{{cny}}</view>
  <view>{{m2.toLower(cny)}}</view>
</view>
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

• info.js

// pages/info/info.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cny:"PPOO"
  },
})

• 效果
  

处理手机号 -

• tools.wxs

function splitPhone(str){
  if ( str.length !== 11 ) return str;
  var arr = str.split("")
  console.log("arr",arr);
  arr.splice(3,0,"-")
  arr.splice(8,0,"-")
  return arr.join("")
}
module.exports = {
  splitPhone:splitPhone
}

• info.wxml

<!--pages/info/info.wxml-->
<view>
  <view> {{ tel }}</view>
  <view> {{ m2.splitPhone(tel) }}</view>
</view>
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

• 效果