如何在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 相关文章推荐
JS实现根据出生年月计算年龄
Jan 10 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php自动跳转中英文页面
2008/07/29 PHP
删除数组元素实用的PHP数组函数
2008/08/18 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
php微信开发之图片回复功能
2018/06/14 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
JavaScript知识点整理
2015/12/09 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
python解析xml模块封装代码
2014/02/07 Python
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
基于python的字节编译详解
2017/09/20 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
python web框架中实现原生分页
2019/09/08 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
玩具公司的创业计划书
2013/12/31 职场文书
学校安全工作制度
2014/01/19 职场文书
五年级语文教学反思
2014/01/30 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
培训后的感想
2015/08/07 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL