本文将带你了解微信小程序开发之自定义微信客服按钮，实现带数据和事件的模板，希望本文对大家学微信有所帮助。

一：自定义微信客服按钮微信小程序官方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="../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中的数据和函数注入到这个模块
  }
    })    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！