小程序开发：小程序的wxs的使用

1.为什么会使用到wxs：

wxs是小程序的一种小程序的脚本语言，结合wxml可以构建页面的结构，其语法类似es5，不支持类似es6以上的语法形式，可以用wxs来编写过滤器；

// wxml中允许这样的书写方式
<view wx:if="{{ role === 1 || role === 2 }}">个人中心</view>
// 涉及到es6的incluedes数组语法，在wxml中是不被允许使用的
<view wx:if="{{ [1,2,3,4,5].incluedes(3) }}">个人中心</view>

　　而且wxml中是不能使用函数的，但是如果你要在wxml的页面中使用函数的话，wxs可以做到

2.wxs的使用：

　　可以直接在wxml中直接创建(类似于在html中写js)，也可以在根目录下新建一个util存放，wxs文件后缀是 .wxs。在wxs文件中，直接声明函数就可以了，然后用module.exports导出(类似于单独写一个js文件，然后引入)

（1）书写方式

编写在 wxml 文件中的 <wxs> 标签内
编写在以 .wxs 为后缀名的文件内

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

1、文件引入使用方法

文件名：xxx.wxs

var toHide = function (array) {var mphone = array.substring(0, 3) + '****' + array.substring(8);return mphone;
}
module.exports = {toHide,
};

使用引用：

<!-- page/index/index.wxml -->
<!-- module: 当前 <wxs> 标签的模块名。必填字段。 -->
<wxs src="./../xxx.wxs" module="tools" />
<view> {{phone.toHide(userInfo.tel)}} </view>

页面输出：

require函数

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

引用的时候，要注意如下几点：

只能引用 .wxs 文件模块，且必须使用相对路径。
wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

var toHide = require("./tools.wxs");

2、在wxml页面中使用

wxml页面

<!-- 手机号和身份证号的明文加密 -->
<wxs module="phone">var toHide = function (array) {var mphone = array.substring(0, 3) + '****' + array.substring(8);return mphone;}module.exports.toHide = toHide;
</wxs><view class="user-info-item"><view>联系电话</view><view>{{phone.toHide(userInfo.tel)}}</view>
</view>

注意：

WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
WXS 函数不能作为组件的事件回调。

小程序开发：小程序的wxs的使用相关推荐

强烈推介的几个微信小程序开发小技巧，简单又实用
前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家.如果对大家确实有帮助,别忘了点赞哦 ???? - 微信开发者工具版本:1 ...
微信小程序开发 | 小程序开发框架
小程序开发框架 7.1 小程序模块化开发 7.1.1 模块 7.1.2 模板 7.1.3 自定义组件 7.1.4插件 7.2 小程序基础样式库-WeUI 7.2.1 初识WeUI 7.2.2[案例]电 ...
强烈推荐的几个微信小程序开发小技巧，简单又实用
前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家.如果对大家确实有帮助,别忘了点赞哦 ???? - 微信开发者工具版本:1 ...
微信程序开发小程序入门
1.小程序简介微信官方文档小程序的生命周期 // app.js App({ onLaunch() { // 展示本地存储能力 const logs = wx.getStorag ...
用什么服务器开发小程序,开发小程序用什么服务器系统
开发小程序用什么服务器系统内容精选换一换按照翻译方式的不同,高级语言通常可以分为两类:一类是编译翻译,一类是解释翻译,分别对应着编译型语言和解释型语言.编译型语言典型的如C.C++语言,都属于编 ...
微信“小程序”开发小指南
最近两天程序员界最火的应该就是微信"小程序",抽空试了一下,感觉上手很容易,微信提供的各种组件.API都很全,但是要做的与众不同又性能优良也是不太容易的.本文将首先谈一下我们的小程 ...
微信小程序开发—小程序开发入门
我参加CSDN博客之星评选啦,感谢大家前往投票支持! 投票地址:http://blog.csdn.net/vote/list.html?keyword=anda0109#search 本篇将为大家详细 ...
微信小程序开发.小程序入门（上）
1.小程序简介微信小程序,小程序的一种,英文名Wechat Mini Program, 是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用户扫一扫或 ...
微信小程序小程序模板小程序开发小程序商城小程序流量变现社区小程序开发小程序
小程序大家都知道,其实小程序这个是个很低的门槛,只要你会搭建基本的网站,基本的代码修改无需编程就可以拥有一份属于的小程序,不仅仅是小程序还可以通过流量主来收益,目前小程序开通流量主的门槛是1000用户 ...
微信程序开发.小程序入门
一.小程序简介微信小程序,小程序的一种,英文名Wechat Mini Program, 是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用户扫一扫或 ...

小程序开发：小程序的wxs的使用

1.为什么会使用到wxs：

2.wxs的使用：

小程序开发：小程序的wxs的使用相关推荐

最新文章

热门文章