我们在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, };

在wxml中直接写js代码(wxs)的更多相关文章

  1. 在 WXML 中直接使用 JS 代码

    因为有在 Vue 下开发应用的习惯,希望能够直接在 wxml 中的标签里使用 JS 代码.微信小程序其实也是可以的,在使用 JS 代码的时候需要用{{}}来包裹起来. 以下是在 wxml 中使用 JS ...

  2. html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

    html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

  3. 在Java中直接调用js代码(转载)

    http://blog.csdn.net/xzyxuanyuan/article/details/8062887 JDK1.6版添加了新的ScriptEngine类,允许用户直接执行js代码. 在Ja ...

  4. 在Java中直接调用js代码

    JDK1.6版添加了新的ScriptEngine类,允许用户直接执行js代码. 在Java中直接调用js代码 不能调用浏览器中定义的js函数,会抛出异常提示ReferenceError: “alert ...

  5. 关于 OnCloseQuery: 顺序、不能关机等(所有的windows的广播消息都是逐窗口传递的)——如果一个窗体的OnCloseQuery事件中如果写了代码那么WM_QUERYENDSESSION消息就传不过去了msg.result会返回0,关机事件也就停止了

    系统关闭窗体的事件顺序为: OnCloseQuery ----> OnClose ----> OnDestroy 下面的代码说明问题: unit Unit3; interface uses ...

  6. iOS中UIWebView执行JS代码(UIWebView)

    iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被 ...

  7. HTML中直接写js 函数

    1.在HTML中直接写JS函数: <body onload="javascript:{window.location.href='http://www.baidu.com/'}&quo ...

  8. Asp.net mvc怎么在razor里写js代码

    我试图在Razor里写JS代码,但是不行 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3 ...

  9. html中可以写php代码,但是文件后缀名需要是.php而不是.html。否则php程序不会被解析执行。

    html中可以写php代码,但是文件后缀名需要是.php而不是.html.否则php程序不会被解析执行. <div class="goods_title"><?p ...

随机推荐

  1. 再读faster rcnn,有了深层次的理解

    1. https://www.wengbi.com/thread_88754_1.html (图) 2. https://blog.csdn.net/WZZ18191171661/article/de ...

  2. Android Studio启动模拟器失败

    启动Android Studio的模拟器报“Emulator: Process finished with exit code -1073741819 (0xC0000005)”错误教程: 1.进入该 ...

  3. CSS3开启硬件加速

    { transform: translateZ(0); transform: translate3d(0,0,0);}<!-- transform: translateZ(0); transfo ...

  4. eruda.js 实现线上调出控制台

    <script src="//cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script> 调用 eruda.in ...

  5. angular8 + redux 管理状态

    1. angular8.1.1 ----- package.json { "name": "angular-demo", "version" ...

  6. Delphi - cxGrid设定合并单元格

    在cxGrid中选中需要合并的字段,单击F11调出属性控制面板,展开Options,设置CellMerging的Value为True.

  7. 微擎 人人商城 对接京东vop 对接京东商品,同步商品 地址,库存,价格,上下架等。(二) 设置后台管理界面

    昨天提到了,由于vop商品池未开通,故对接工作只能暂缓,现在要做一个专门针对vop商品的后台管理, 老规矩,先上设计链路图 因为后台本来就是有比较完善的商品管理系统, 所以我们只是针对vop 进行简单 ...

  8. SCRUM的五个价值观

    转自:http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-8 承诺 – 愿意对目标做出承诺 专注– 把你的心思 ...

  9. python内建Exception类型

    1.Exception类型及分层结构如下: BaseException +-- SystemExit +-- KeyboardInterrupt +-- GeneratorExit +-- Excep ...

  10. 从一道看似简单的面试题重新理解JS执行机制与定时器

     壹 ❀ 引 最近在看前端进阶的系列专栏,碰巧看到了几篇关于JS事件执行机制的面试文章,因为我在之前一篇 JS执行机制详解,定时器时间间隔的真正含义 博文中也有记录JS执行机制,所以正好用于作为测试自 ...