首页 > 编程语言 >微信小程序WXS功能模块

微信小程序WXS功能模块

时间:2022-10-27 20:33:26浏览次数:55  
标签:wxs 微信 WXS 功能模块 引用 模块 msg tools


好久没有看微信小程序的官方文档了,最近在开发个人小程序时,才发现WXS功能。有点跟不上节奏了!

WXS模块代码可以写在WXML文件中的标签内,或者是以 .wxs为后缀的文件内。
每一个.wxs文件和标签都是一个单独的模块。拥有自己独立的作用域,一个模块里定义的变量和函数默认是私有的,如果需要对外暴露内部私有变量和函数,则通过module.exports实现。

每一个WXS模块中都有一个内置的module对象,通过它的属性exports,可以对外共享自己模块中的私有变量和函数。官网提供的代码如下:

 // /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

require函数:在 .wxs中通过require函数可以引用其他的wxs文件模块。但是:
1、只能引用.wxs文件模块,而且必须使用相对路径。
2、wxs模块都为单例,模块第一次被引用时,会自动初始化为单例对象,多个页面多个地方多次引用,使用的都是同一个模块对象。
3、若WXS在定义后一直没有被引用,那么该模块不会被解析运行。
// /pages/logic.wxs

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

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

<!-- /page/index/index.wxml -->

<wxs src="./../logic.wxs" module="logic" />


控制台打印出:
'hello world' from tools.wxs
logic.wxs
some msg

< wxs>标签

属性名

类型

说明

module

String

标签的模块名

src

String

引入.wxs文件的相对路径

其中的module属性值的首字母必须是:字母(a-zA-Z),下划线(_)。其余字符可以是字母,下划线和数字。
在WXML文件中引用WXS标签如下:

            <wxs module="foo">
var some_msg = "hello world"; module.exports = { msg : some_msg, }
</wxs>
<view>{{foo.msg}}</view>

src属性用来引用其他的wxs文件模块,但是:
1、只能引用.wxs文件模块,而且必须使用相对路径。
2、wxs模块都为单例,模块第一次被引用时,会自动初始化为单例对象,多个页面多个地方多次引用,使用的都是同一个模块对象。
3、若WXS在定义后一直没有被引用,那么该模块不会被解析运行。

WXS的出现增强了WXML的功能,可以把它理解为WXML页面的脚本,我们可以将比如检查手机格式的函数放在wxs中来使用(根据是否正确来改变相应的样式),而不用跑到在js中去检查。类似于HTML中的script脚本一样。只需要区分WXS和script即可。
wxs目前不完全支持ES6(至少let,const不能使用)
wxs文件不能被js文件引用。wxs文件能引用wxs文件。


标签:wxs,微信,WXS,功能模块,引用,模块,msg,tools
From: https://blog.51cto.com/u_12344418/5801935

相关文章

  • 微信小程序video高层级的解决
    在小程序内使用了video视频标签,底部再加上一个悬浮的Btn按钮或是页面的中间弹窗,在页面上下滑动的时候,由于video原生组件的层级太高,会把悬浮(弹窗)给覆盖掉。像video这种原生组......
  • 微信小程序开通无感支付(微信支付分)--uni-app版
    1、打开微信支付分页面:首先需要将这个小程序绑定的商户号开通微信支付分服务,然后使用navigateTominiProgram跳转微信支付分小程序,跳转时需要传参,其中appId和path是固定的(......
  • 微信小程序之获取定位api忽然失效解决方法
    这个问题困扰了我一整天才解决,一定要写篇文章记录下,下面先讲讲遇到问题后的思路。测试提出bug:小程序获取位置信息失败了,也不会弹出授权弹框,然后我在想之前明明是好的,......
  • MASA MAUI iOS如何绑定微信
    背景MAUI的出现,赋予了广大Net开发者开发多平台应用的能力,MAUI是Xamarin.Forms演变而来,但是相比Xamarin性能更好,可扩展性更强,结构更简单。但是MAUI对于平台相关的实现并不......
  • 微信商家转账零钱
     #221027除实名制外其他功能正常<?phpdeclare(strict_types=1);namespaceApp\Logic\Point;useApp\Helper\GuzzleHttp;useApp\Kernel\Mongodb\PointMongodb;......
  • python的开源微信接口
    开源微信接口文档地址:​​https://itchat.readthedocs.io/zh/latest/​​​github地址:​​​https://github.com/littlecodersh/itchat​​如下举例:importitchatitchat.......
  • Python修改步数并同步到微信
    1.前言目前有很多可以刷步数的网站,都有在更新维护且免费,有需求或者仅在乎功能的可以看看,如下:1.https://www.17bushu.com/2.https://yd.shuabu.net/3.https://www......
  • Tauri-Vue3桌面端聊天室|tauri+vite3仿微信|tauri聊天程序EXE
    基于tauri+vue3.js+vite3跨桌面端仿微信聊天实例TauriVue3Chat。tauri-chat运用最新tauri+vue3+vite3+element-plus+v3layer等技术跨桌面端仿微信|QQ聊天程序EXE。基本实......
  • #yyds干货盘点#【愚公系列】2022年10月 微信小程序-数据绑定
    前言1.小程序页面结构微信小程序的页面结构主要是分别由四个文件组成:js(逻辑处理文件):负责页面逻辑内容的处理,遵循js语言框架。json(配置文件):用来设置页面的窗口内容,......
  • 几行JS代码防止网站在QQ和微信被举报
    1<div>2<script>3//跳转提示45if(is_weixn_qq()){;67window.location.href=‘https://c.pc.qq.com/middle.html?pfurl=’+window.location.hre......