微信小程序自定义模块

这篇具有很好参考价值的文章主要介绍了微信小程序自定义模块。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

自定义wxs并引入

新建一个tools.wxs

微信小程序自定义模块

 创建一些function,并使用moule.exports ={}导出

微信小程序自定义模块

 使用 <wxs>标签 并填写正确src 书写module名称

之后在其他标签内,使用 {{自定的module名称.自定义的一个function并传入对应参数}}就可以实现参数在自定义function中的导入和使用了

微信小程序自定义模块

自定义components

新建文件夹components, 新建文件夹xxx,新建components.

微信小程序自定义模块

 在任意页面或app.json中 导入 compTest 的自定义组件名称

微信小程序自定义模块

 页面进行使用

微信小程序自定义模块

扩展:组件监听器

组件中的JS 中可以创建一个 observers 并使用键值对来指定我们想要监听的data的数据参数以及对应的function处理函数(多个参数用,分割)

微信小程序自定义模块

 当num1  num2数值发生变化时,我们直接可以执行observers 中 function方法对数据进行处理

父子组件通信

父组件 message.wxml  子组件test3.wxml

父组件中,使用bind:自定义名称='自定义方法'来绑定一个父组件的执行方法于 子组件上

微信小程序自定义模块

 例如:transportKid 方法

微信小程序自定义模块

 文章来源地址https://www.toymoban.com/news/detail-489079.html

子组件

确定一个叫addMethod 方法

微信小程序自定义模块

 并使用this.triggerEvent('父组件自定义bind的名称', {要传递的参数  键值对})

微信小程序自定义模块

 最后可以输出内容

微信小程序自定义模块

微信小程序自定义模块

 

到了这里,关于微信小程序自定义模块的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序引入weui

    project.config.json 找到 packNpmManually 和 packNpmRelationList 修改成如下内容: 根目录下 app.wxss 引入 weui @import \\\'weui-miniprogram/weui-wxss/dist/style/weui.wxss\\\'; 4.引入需要使用的包 index.json  index.wxml  

    2024年02月10日
    浏览(38)
  • 微信小程序引入Uview

    1.使用Hbuilder创建小程序项目,模板选空。 直接在uni-app插件市场通过uni_modules的形式进行安装,在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件,导入到对应的项目中即可 地址:Uview2.0下载地址 1.引入Uview 在项目根目录中的main.js中,引入并使用uView的JS库,注

    2023年04月12日
    浏览(28)
  • 微信小程序如何引入Iconfont

    在小程序中引入 Iconfont 可以通过以下步骤进行操作: 打开 Iconfont 网站(https://www.iconfont.cn/)并登录账号,创建一个项目并添加所需的图标到项目中。 在项目中选中需要使用的图标,点击右上角的 “下载代码” 按钮。 下载生成的项目包,解压后可以看到一个名为 `iconfont.

    2024年02月14日
    浏览(42)
  • 微信小程序引入腾讯地图图解

    一、准备工作 1.小程序 (qq.com)进入网址注册属于自己的小程序: 填写信息-登录邮箱激活-信息登记 2.完成后,就会进入这个页面 3.在小程序管理后台 - 开发 - 开发管理 - 开发设置 - “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com 注意此处的开发者ID-小程序ID在下

    2024年02月03日
    浏览(37)
  • 微信小程序引入外部icon

    阿里矢量库:iconfont-阿里巴巴矢量图标库 选中相应的图标 添加图标到购物车(多个图标)      ​​​​​  添加项目  下载本地  解压转换—-》 转化网站:Online @font-face generator — Transfonter 文件复制指引  矢量库文件中的内容被转换的文件内容替换,之后总文件在到w

    2024年02月09日
    浏览(37)
  • 微信小程序文件相关操作(新建文件夹、下载、解压、读取等)

    wx.downloadFile()  //下载 wx.getFileSystemManager()  //获取小程序的文件管理器 FileSystemManager.unzip() //解压 FileSystemManager.readdir()  //读取文件夹 FileSystemManager.readFile()  //读取文件 FileSystemManager.access() //判断文件/目录是否存在 FileSystemManager.mkdir()  //创建文件夹 index.js 在 onload 中获取 F

    2024年02月15日
    浏览(36)
  • 微信小程序配置绝对路径引入文件

    微信小程序默认使用相对路径引入文件 在多层文件夹时需要很长前缀 const { ClueApi } = require(\\\'../../../../utils/api.js\\\') 配置方法 在app.json里面配置  \\\"resolveAlias\\\": {     \\\"@/*\\\": \\\"/*\\\"   } 在页面使用  const { ClueApi } = require(\\\"@/utils/api\\\");

    2024年02月12日
    浏览(34)
  • 微信小程序引入和风天气图标库

    npm导入和风天气的图标库后使用没有效果,就在网上查询了下怎么解决,然后动手尝试一下。 参考文章 1. 下载图标文件(链接),解压后大致这样 2. 在transfonter网站将需要的图标字体转成Base64,在fontfonts文件下 选择上传 下载 3. 解压后把stylesheet.css复制到小程序的某个文件夹下

    2024年02月04日
    浏览(41)
  • 微信小程序使用字体图标——链接引入

    目录 1.下载字体图标  1.选择需要的图标加入购物车添加到项目 2.查看项目  3.生成在线链接   4.复制生成的链接 等下放到iconfont.json中​编辑 2.引入链接 1.下载  2.生成iconfont.json文件 3. 在iconfont.json中 放入生成的链接 4.需要重新编译小程序之后在终端执行 5.在app.json中引入字

    2024年02月16日
    浏览(71)
  • uniapp新建项目后,如何在浏览器和微信小程序运行

    第一步:新建项目 参考uni-app官网提供了HBuilderX可视化创建和vue cli命令两种方式创建项目,由于HBuilder和它都是DCloud公司的产品,使用它创建项目可以很方便的下载插件什么的。 新建项目很简单: https://uniapp.dcloud.net.cn/quickstart-hx.html 下载HBuilderX,然后参照这个文档点两下选择

    2024年02月03日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包