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


Posted in Javascript onNovember 14, 2019

这篇文章主要介绍了如何在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, };

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 #Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 #Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 #Javascript
vue实现修改图片后实时更新
Nov 14 #Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 #Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 #jQuery
vue-cli3.X快速创建项目的方法步骤
Nov 14 #Javascript
You might like
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
Python编码爬坑指南(必看)
2016/06/10 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
什么是Python中的顺序表
2020/06/02 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
Myholidays美国:在线旅游网站
2019/08/16 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
求职简历的自我评价
2014/01/31 职场文书
探亲假请假条
2014/04/11 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
流动人口婚育证明
2014/10/19 职场文书
故意伤害辩护词
2015/05/21 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL