如何在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中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
vue-router的两种模式的区别
May 30 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 empty函数 使用说明
2009/08/10 PHP
php 静态变量的初始化
2009/11/15 PHP
PHP的PSR规范中文版
2013/09/28 PHP
使用URL传输SESSION信息
2015/07/14 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
秘书英文求职信
2014/04/16 职场文书
借条格式范本
2015/05/25 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技