欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序自定义微信客服按钮,实现带数据和事件的模板

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

微信小程序自定义微信客服按钮,实现带数据和事件的模板

发布时间:2020-11-30  

 

一:自定义微信客服按钮

微信小程序官方api中提到的微信客服,是一个固定的组件,图标样式固定,大小最多27px 很明显这个是不能满足我们各种奇葩需求的。下面提供一个野蛮的自定义方法。

比如做一个这样的按钮:

图标用自定义的,并且点击整个按钮区域都能跳转微信客服

第一步:在按钮中放N个contact-button标签,尽量铺满容器,按钮用relative定位,contact-button用absolute定位

第二步:将contact-button样式设置纯透明 opacity: 0;(o゜▽゜)o☆[BINGO!]

 

二:带数据和事件的模板

微信小程序提供的模板,如果有数据或者事件必须在每个模块单独写入。比如我们的产品经理非要自己实现header模块,而且header模块还有下来菜单。如果每个模块都有这个header,下来菜单的执行操作每个页面都要写一遍很麻烦。

如下:

微信小程序自定义微信客服按钮,实现带数据和事件的模板

微信小程序自定义微信客服按钮,实现带数据和事件的模板

我的解决办法是写一个公共的wxml文件,一个公共的header.js。通过include wxml插入每个模块的页面,通过require(headerjs)为每个模块强制注入 data和 事件函数

/**header.js**/ function init(){ var that = this ; //header中相应的数据 that.setData({ logo: '../../img/logo.png', a:"" }) ; //header中相应的 操作 that.a = function(event){ } ; that.b = function(event){ } that.c = function(event){ } } ; module.exports = { init: init } ; <!--在other.wxml模块引入header.wxml--> <include src=http://www.yiyongtong.com/archives/"../include/header.wxml"/> /**在other.wxml模块引入header.js**/ var header = require('../include/header.js'); Page({ data:{ }, onLoad:function(options){ header.init.apply(this,[]);// this关键字必须传进去 这样才能使header.js中的数据和函数注入到这个模块 } })