用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:34

作者:FashionLee,来自原文地址一:自定义微信客服按钮微信官方api中提到的微信客服,是一个固定的组件,图标样式固定,大小最多27px 很明显这个是不能满足我们各种奇葩需求的。下面提供一个野蛮的自定义方法。比如 ...

作者:FashionLee,来自

原文地址

一:自定义微信客服按钮

    微信官方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
    } ;
      
    
    <include src="../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中的数据和函数注入到这个模块
      }
    })
      
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏