如何在wxml中直接写js代码(wxs)

这篇文章主要介绍了如何在wxml中直接写js代码(wxs),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

我们在h5开发中，很多时候要在html中写到js代码，这个很容易实现。但是在微信小程序开发中，是不能直接在wxml中写js代码的，因此就有了wxs。在wxml中用wxs代码，有以下几种方式（在小程序文档中写的很清楚，我只不过是总结下）

第一种：直接在wxml文件中使用<wxs>标签

<wxs module="dateModule">
 var now = getDate();
 module.exports = {
  date: now
 }
</wxs>
<view>当前时间：{{dateModule.date}}</view>

第二种：类似于js，写一外部wxs文件，然后wxml中引用。对于这个，我直接引用官方文档中的例子

// pages/dateTool.wxs
var now = getDate();
var format = function(lastDate) {
 var date = getDate(lastDate);
 return date.toLocaleString();
}
module.exports = {
 date: now,
 format: format
}
<!-- page/index/index.wxml -->
<wxs src="../dateTool.wxs" module="dateTool"></wxs>
<view>{{dateTool.date}}</view>

第三种，在一个wxs文件中引用另一个wxs文件

// /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";
// /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" />

wxs语法和js很像，但是一定要注意，在外部写完wxs文件后要给它的module对象中的exports属性设置值

module.exports = { Key1:value1, key2: value2, };

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 教程之WXML

    系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML WXML WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 用以下一些简单的例子来看看WXML具有什么能力: 数据绑定 <!--wxml--> <text> {{message}

  • 微信小程序引入模块中wxml、wxss、js的方法示例

    先描述下目录结构,见下图 UI页面见下图 其中ok按键是引入的log模块,log模块非page页 indexButton是index页本身拥有的组件,index页直接导入Log模块中的组件,css,事件响应函数. 显示效果如下 app.json的内容如下 下面附上 index.js.index.wxml.index.wxss的代码 下面附上 log.js.log.wxml.log.wxss的代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 微信小程序实现通过js操作wxml的wxss属性示例

    微信小程序实现通过js操作wxml的wxss属性示例

    本文实例讲述了微信小程序实现通过js操作wxml的wxss属性.分享给大家供大家参考,具体如下: 微信小程序如何通过js操作html的css属性: 在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行操作. 如何在微信小程序中在wxml中操作wxss的属性. 实现思路: 通过利用数据绑定实现动态改变样式, 1.在wxxml标签内嵌css属性上绑定js的date值 2.通过js中绑定css属性的date值改变wxml标签内嵌的css属性

  • 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 ​官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla

  • 详解微信小程序入门五: wxml文件引用、模版、生命周期

    详解微信小程序入门五: wxml文件引用、模版、生命周期

    实例一: include方式引用header.wxml文件 文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用. 微信小程序里面,是包含引用功能的--include.import.这两个引用文件的标签,使用基本差不多,这里先说一下include. 微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到引用位置,所以我们需要重新对其渲染. 实例说明 这里将默认创建的用户头像信息提取出

  • 实现微信小程序的wxml文件和wxss文件在webstrom的支持

    实现微信小程序的wxml文件和wxss文件在webstrom的支持

    微信小程序的wxml文件和wxss文件在webstrom的支持 ebstrom默认不支持wxml文件和wxss文件,所以要进入设置里面手动添加支持. 对wxml文件的支持: 文件 -> 设置 -> 编辑器 -> 文件类型, 然后选择XML文件,然后点击下面的绿色添加按钮,如下图添加通配符设置,点击确认即可,然后点击确定按钮即可配置成功,就可看到webstrom支持wxml文件了 文件 -> 设置 -> 编辑器 -> 文件和代码模板, 点击上面的绿色添加按钮,如下图所示填

  • 如何在wxml中直接写js代码(wxs)

    这篇文章主要介绍了如何在wxml中直接写js代码(wxs),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 我们在h5开发中,很多时候要在html中写到js代码,这个很容易实现.但是在微信小程序开发中,是不能直接在wxml中写js代码的,因此就有了wxs.在wxml中用wxs代码,有以下几种方式(在小程序文档中写的很清楚,我只不过是总结下) 第一种:直接在wxml文件中使用<wxs>标签 <wxs module="dateMod

  • 如何在vue中使用video.js播放m3u8格式的视频

    如何在vue中使用video.js播放m3u8格式的视频

    @[toc] 注意: "vue": "^2.6.11", "video.js": "^7.10.2", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.7.0" 一.安装 yarn add video.js yarn add videojs-contrib-hls // 这是播放hls流需要的插件 y

  • 分离vue文件中css、js代码的简单技巧

    目录 场景 方法 index.vue 基础代码 index.scss 基础代码 index.js 基础代码 拓展 代码 总结 场景 1.因为早期是iOS开发,形成的MVC习惯,个人喜欢css.js代码独立放一个文件里面,也就是分离样式模块和业务处理模块 2.写复杂界面.复杂业务的时候,界面.样式.业务代码都放.vue文件里面,代码量很大,几千上万行的,难受,割了吧(简单页面可忽略) 3.基于vue2 cli3项目 方法 挺简单的,就是利用下ES6的import和export 例如mockData

  • 如何在JavaScript中运行.NET Core代码详情

    目录 一.前言 二.DotNetJS 三.Demo 1. 创建项目 2. 实现C#代码 3. 实现JS代码 4. 运行效果 四.结论 一.前言 在.NET Core中运行JavaScript代码,目前已经有很多实现方案. 但是,如果你希望在纯JavaScript环境中运行.NET Core代码呢? 那么,DotNetJS可能对你有所帮助. 二.DotNetJS DotNetJS可以将C#项目编译为与任何环境兼容的单文件JavaScript库,无论是Web浏览器,Node.js还是自定义限制空间,

  • 一文详解如何在IDEA中配置Node.js

    目录 一.下载Node.js 二.安装Node.js 三.配置Node.js 四.测试Node.js 总结 一.下载Node.js 官网下载链接:Node.js  或者点击这里下载 点击下图红色标注区域,即可下载msi文件 二.安装Node.js 打开msi文件 一路点击“Next”(建议自定义文件安装路径) 安装完成 三.配置Node.js 打开IDEA 如下图,进入设置 在语言和框架中找到Node.js 选择节点解释器(在安装的Node.js里找到相应的node.exe) 此时IDEA会自动

  • javascript中直接写php代码的方法

    一.在javascript中嵌入php代码javascript若是通过js文件包含进来的,那么js文件中也可以直接写php代码,只不过包含js文件是扩展名要改成php,如: 复制代码 代码如下: <script herf="js/demo.js.php"></script> 二.javascript函数参数的默认值c语言中可以通过这样来设置默认参数: 复制代码 代码如下: void foo(int a, int b = 1, bool c = false); 但

  • 获取内联和链接中的样式(js代码)

    复制代码 代码如下: var head = document.getElementById( "box" ); // alert( head.style.background ) // alert( head.style.cssFloat || head.style.styleFloat ) // 获取float不一样 // head.style.fontSize = "30px" head.style.color = "#f00"; // (t

  • Eclipse中实现JS代码提示功能（图文教程）

    用Eclipse写JS代码时没有提示,很烦,心累: 找个各种方法以及插件,试了一下,个人感觉AngularJS Eclipse 插件很强,好用,不多说,先装上: 然后重启Eclipse ,右键你的项目 convert to Tern Project 也行 根据自己的需要变动,直接OK,接下来就是见证奇迹的时刻: 如果要变动就右键项目 总结 以上所述是小编给大家介绍的Eclipse中实现JS代码提示功能(图文教程),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常

  • 网页广告中JS代码的信息监听示例

    在一些网页广告中提供的JS代码可以进行代码注入,然后监视各种元素, 下面的例子是监视百度输入框的输入的值,然后显示出来, 复制代码 代码如下: ;(function() { function myfn() { var ssk=document.getElementById("kw"); var ssz=ssk.value; alert(ssz); } var btn = document.getElementById("su"); btn.addEventListe

  • 如何在vue3中同时使用tsx与setup语法糖

    如何在vue3中同时使用tsx与setup语法糖

    目录 前言 Tsx与setup语法糖的优势 遇到的问题 最后 前言 想这样做的原因是在vue3里使用tsx开发时,props的声明显得异常麻烦,不禁想到defineProps的便利,但同时在vue3里tsx文件里tsx语法的书写必须在setup函数或者render函数里,无法正常的使用defineProps等一系列的宏.为了能够更加便利,使用了下文的方法. Tsx与setup语法糖的优势 目前,在vue3中使用tsx已经越来越流行且便捷,对于webpack与vite构建的项目,都有很好的插件支持

随机推荐