最后
全网独播-价值千万金融项目前端架构实战
从两道网易面试题-分析JavaScript底层机制
RESTful架构在Nodejs下的最佳实践
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一线互联网企业如何初始化项目-做一个自己的vue-cli
思维无价,看我用Nodejs实现MVC
代码优雅的秘诀-用观察者模式深度解耦模块
前端高级实战,如何封装属于自己的JS库
VUE组件库级组件封装-高复用弹窗组件
事件传参
- 通过 data-* 自定义属性传参
如果要在组件触发事件处理函数的时候,传递参数,可以为组件提供 data-* 自定义属性传参。
<button bindtap='btnHandler’ data-info=“{{123}}”>事件传参
其中,info 会被当作参数名,数值 123 会被当作参数值。
2.通过事件参数 event.target.dataset.参数名,能够获取 data-* 自定义属性传递到事件处理函数中的参数。
btnHandler: function(event){
console.log(event.target.dataset.info)
}
什么是wxs
wxs(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
wxs 基础语法
- 使用 module.exports 向外共享成员
通过 module.exports 属性,可以对外共享本模块的私有变量与函数。
var foo = “‘hello world’ from wxs”; // 定义私有变量 foo
var bar = function (d) { // 定义私有函数 bar
return d;
}
module.exports = { // 通过 modules.exports 向外共享私有成员
FOO: foo, // 向外共享私有变量 foo
bar: bar, // 向外共享私有函数 bar
};
module.exports.msg = “some msg”; // 额外向 module.exports 中挂载 msg 变量
- 使用 require 引入其它 wxs 模块
假设有两个 wxs 模块,路径分别为 /pages/tools.wxs 和 /pages/logic.wxs,如果要在 logic.wxs 中引
入 tools.wxs 脚本
// 使用 require 导入 tools.wxs 脚本
var tools = require(“./tools.wxs”);
// 得到的 tools 对象,可以直接访问到 tools.wxs 中向外暴露的变量和方法
注意:
① 只能引用 .wxs 文件模块,且必须使用相对路径。
② wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多
次引用,使用的都是同一个 wxs 模块对象。
③ 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
- 内嵌 wxs 脚本的示例代码
var some_msg = “hello world”;
module.exports = {
msg : some_msg,
}
{{foo.msg}}
输出:
hello world
上面例子声明了一个名字为 foo 的模块,将 some_msg 变量暴露出来,供当前页面使用。
4.wxml 内引用外联的 wxs 脚本
在 wxml 中如果要引入外联的 wxs 脚本,必须为 标签添加 module 和 src 属性。
module 用来为 标签指定模块名,作为当前页面访问这个模块的标识名称;
src 用来指定当前 标签要引入的脚本路径,必须是相对路径;
要引入的wxs文件的wxml文件
{{tools.msg}}
{{tools.bar(tools.FOO)}}
最后
全网独播-价值千万金融项目前端架构实战
从两道网易面试题-分析JavaScript底层机制
RESTful架构在Nodejs下的最佳实践
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一线互联网企业如何初始化项目-做一个自己的vue-cli
思维无价,看我用Nodejs实现MVC
代码优雅的秘诀-用观察者模式深度解耦模块
前端高级实战,如何封装属于自己的JS库
VUE组件库级组件封装-高复用弹窗组件