如何在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 相关文章推荐
accesskey 提交
Jun 26 Javascript
Javascript的构造函数和constructor属性
Jan 09 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
微信小程序云开发获取文件夹下所有文件(推荐)
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中的string类型使用说明
2010/07/27 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
用js简单提供增删改查接口
2019/05/12 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
python函数形参用法实例分析
2015/08/04 Python
Python构建XML树结构的方法示例
2017/06/30 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
文化建设工作方案
2014/05/12 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
任命书怎么写
2015/03/02 职场文书