微信小程序，模板+按钮+绑定事件

微信小程序，模板+按钮+绑定事件+页面跳转

文章类型：微信小程序
文章内容：使用模板定义按钮，使用循环创建按钮，并给按钮绑定事件，实现页面跳转。
注释很多，应该可以看得懂。
请指教，谢谢

.wxml模板内容，这里包含了一个按钮，还有一个文本

<template name="daoHangPage">
<button bindtap="{{fun}}" data-gobalpage="{{p}}">{{info}} </button><text>{{descript}}</text>
</template>
<!-- 参数fun的作用是为了接收实现类的参数，这个参数用于绑定点击响应事件。
参数p的作用是为了接收实现类遍历时个元素的值，这里是个元素中的页面路径属性，它将在goPage中被使用，会实现页面跳转。
info与descript的作用则只是为了传入值用来显示文本 -->

实现类的.wxml内容

<import src="../template/daoHangTempNo1/naviMain"></import>
<text>pages/导航主页/</text>
<template is="daoHangPage" wx:for="{{test}}"  data="{{info:item.info,descript:item.descript,fun:'goPage2',p:item.page}}"></template>
<!-- is的作用是使用模板，‘wx:for{{test}}’的作用是：根据集合test遍历执行，test集合定义在.js文件中。data="{{.....}}"的作用是给模板传入参数。 -->

实现模板的.js内容

Page({/*** 页面的初始数据*/data: {    //test数组，每个数组具有page、info、descript属性// page属性各元素本应不一致，但我的页面很少，便设为一样的，用来测试是否可用，你可以按照自己的需求更改路径// page属性被赋给模板的data-gobalpage形参，然后被goPage使用，实现页面跳转。// info是按钮文本，descript是显示文本test:[{page:"../newPage/newPage",info:"第一次实验页面",descript:"从开学开始的第一个页面"},{page:"../newPage/newPage",info:"第二次实验页面",descript:"从xxx开始的第二个页面"}]},// 函数通过event参数调用gobalpage参数实现页面跳转。// 值得注意的是，对于不同页面有不同的跳转方式，不只是“ wx.redirectTo”。goPage2:function(event){console.log(event),wx.redirectTo({      url:event.currentTarget.dataset.gobalpage,   //要跳转到的页面路径})  },
})

OK，就这么多了，关于模板的美化样式，或者实现模板类的美化只要按照自己的需求添加样式就可以了。注意如果要使用模板的样式，要在实现类的wxss中导入模板的wxss文件。

关于这个东西我试了好长时间，我太笨了。
说一下猜想：

在按钮渲染时就必须要绑定监听事件，所以事件的绑定要在模板类中做，但因为需要参数，所以必须在模板类中定义一个形参，用来接收参数。值得一提的是，虽然事件的绑定在模板类中做，但事件方法却不在模板的js文件中，而是在实现类的.js文件中，可见，按钮实际上绑定的只是一个名字，在执行时才根据名字以及按钮各信息去找函数，

微信小程序，模板+按钮+绑定事件相关推荐

【微信小程序】给绑定事件传参数
前言调试基础库 2.12.0 开发者工具 1.03.2008270 给绑定事件传参数使用公共属性data-*给绑定事件传参数使用方式声明事件: Page({tapName: function( ...
微信小程序模板消息群发、无限制推送相关讲解
模版消息推送是微信小程序采用的通知形式,用户本人在小程序页面有交互行为后,可触发下发通知,通过微信聊天列表中的服务通知可快捷进入查看消息.此外,点击查看详情还能跳转到下发消息的小程序的指定页面.但是为 ...
【转】微信小程序模板消息无限制群发
模版消息推送是微信小程序采用的通知形式, 用户本人在小程序页面有交互行为后,可触发下发通知 ,通过微信聊天列表中的服务通知可快捷进入查看消息.此外,点击查看详情还能跳转到下发消息的小程序的指定页面.但 ...
微信小程序模板消息无限制群发
模版消息推送是微信小程序采用的通知形式, 用户本人在小程序页面有交互行为后,可触发下发通知 ,通过微信聊天列表中的服务通知可快捷进入查看消息.此外,点击查看详情还能跳转到下发消息的小程序的指定页面.但 ...
微信小程序模板消息还能群发？无限制推送？
模版消息推送是微信小程序采用的通知形式,用户本人在小程序页面有交互行为后,可触发下发通知,通过微信聊天列表中的服务通知可快捷进入查看消息.此外,点击查看详情还能跳转到下发消息的小程序的指定页面.但是为 ...
突破微信小程序模板消息的推送限制
"模版消息"是小程序非常重要且可主动触达用户的一种能力.爱鲜蜂小程序通过"模版消息",建立一套用户唤醒机制,达到提升用户复购率的目的.小打卡小程序的近30天访问 ...
php实现微信小程序推送,实现微信小程序模板消息不受限制、无限主动推送
需求背景基于微信的通知渠道,微信小程序为开发者提供了可以高效触达用户的模板消息能力,在用户本人与小程序页面有交互行为后触发,通过微信聊天列表中的服务通知可快捷进入查看消息,点击查看详情还能跳转到下发 ...
微信小程序模板消息群发解决思路
基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...
微信小程序-模板消息
基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...
axure小程序模板_微信小程序模板案例收集
微信小程序发布近四年来,诞生了各行各业的高质量小程序,其中有很多都是用微信小程序模板制作的.新手在制作自己的小程序时,就可以参考这些好看的小程序模板案例. 1.电商小程序这是目前非常常见的小程序类型 ...

微信小程序，模板+按钮+绑定事件

微信小程序，模板+按钮+绑定事件+页面跳转

微信小程序，模板+按钮+绑定事件相关推荐

最新文章

热门文章