微信小程序vantw下components组件案例

前言

项目中有个业务场景，有些业务用户想要参与必须要获取用户手机号，所以很多页面都写了获取手机号的判断和相关引导逻辑？代码和样式重复了很多次，针对这种场景，我们可以把获取用户手机号的效果页面做成组件，减少代码和维护量。

准备工作

分析抽离的页面代码和js代码和样式和第三方组件，思考我们要哪些变量是从主页传到组件的，组件要抛出什么自定义事件给主页面接收。

场景分析

小程序UI框架使用的是vant-weapp框架，获取手机号的效果是，点击某些按钮或者进入页面onLoad时判断用户缓存中是否存在用户是否存在手机号，没有就弹出一个弹窗，弹窗内容提示用户为什么要获取手机号，有取消和确定按钮，取消则关闭弹窗，确定则触发微信获取手机号的函数bindgetphonenumber，然后请求后端接口解密、更新用户数据，然后返回最新的用户信息。

开始

项目根目录下创建空文件夹components，这个目录是专门放组件的，然后在这个文件夹下创建自定义组件文件夹，准备放组件用到的js、json、wxml、wxss等文件，比如我在components创建空文件夹getPhone文件夹，然后选择getPhone文件夹右键-新建component，名称是getPhone，这样开发工具就可以帮忙生成初始文件了

image.png

抽离代码部分我就不解释那么多，直接上最后效果，自定义组件相关的大家可以先去看看官方文档，理解一些关键字

组件部分

getPhone.js

// components/getPhone.js
var http = require("../../utils/http.js");
/* 获取手机号的弹窗页面，引导用户点击按钮
 ----------------------------------------------- */
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // code，在父组件通过wx.login获取，不在组件中写，避免重复请求
    code: {
      type: String,
      value: ''
    },
    // 是否允许关闭弹窗，在有些页面，是直接保持弹出手机号获取框的，不允许用户操作，强制获取手机号
    isCloseEvent:{
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 隐藏弹窗
    empower: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 组件初始化事件，比如父组件唤起子组件
    eventInit() {
      let that = this
      that.setData({
        empower: true
      })
      console.log(that.data)
    },
    //绑定手机号
    getPhoneNumber: function (e) {
      let that = this
      e.wx_phone_code = that.properties.code
      http.featPhone(e, function (userInfo) {
        that.setData({
          empower: false
        })
        // 成功则抛出自定义事件，参数是最新的用户信息
        that.triggerEvent('success', userInfo);
      })
    },
    //拒绝绑定手机
    popBtnN: function (e) {
      // console.log(e)
      if(this.properties.isCloseEvent){
        this.setData({
          empower: false
        })
        // 关闭弹窗是否触发事件
      }
    },
  }
})

getPhone.json

{
  "component": true,
  "usingComponents": {
    "van-popup": "@vant/weapp/popup/index"
  }
}

getPhone.wxml

  
    
      
      PayFun贝乐
      申请
    
    
      请求获取手机号
      如拒绝，将会影响预订和购买套餐功能的使用
    
    
      拒绝
      允许
    
  

getPhone.wxss

/* components/getPhone.wxss */
/* 手机窗 */
.bott_popup{
  height: 220px;
  background: #EDEDED;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.content-around {
  justify-content: space-around;
}
.h-fill {
  height: -webkit-fill-available;
}
.p-3 {
  padding: 30rpx;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.align-center {
  align-items: center;
}
.popup_logo {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}
/*小标题*/
.font-medium {
  font-size: 32rpx;
  font-weight: bold;
}
.ml-2 {
  margin-left: 20rpx;
}
/*辅助文字*/
.font-extra-small {
  font-size: 26rpx;
  color: #909399;
}
.mt-2 {
  margin-top: 20rpx;
}
.popup_btn1 {
  width: 250rpx;
}
.phone_btn {
  width: 250rpx;
  margin: 0;
  position: relative;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
  height: 44px;
  height: var(--button-default-height,44px);
  line-height: 20px;
  line-height: var(--button-line-height,20px);
  font-size: 14px;
  font-size: var(--button-default-font-size,14px);
  transition: opacity .2s;
  transition: opacity var(--animation-duration-fast,.2s);
  border-radius: 2px;
  border-radius: var(--button-border-radius,2px);
  color: #fff;
  color: var(--button-primary-color,#fff);
  background: #07c160;
  background: var(--button-primary-background-color,#07c160);
}

index.js

主页面代码部分,样式也剥离了，所以主页面代码就没有组件的样式代码了。
这里说明下，在去触发按钮bindgetphonenumber函数前，必须获取最新的code，这个code要拿去后端解密用的，如果你先执行了bindgetphonenumber函数，在获取code，会导致code不一样，执行bindgetphonenumber函数时加密的code和你后面拿的code明显不一样，这里顺序要对

// 习惯给默认值
data: {
// wx.login拿到的code
wx_phone_code: ''
}


      wx.login({
        success(res) {
          if (res.code) {
            let code = res.code;
            that.setData({
              wx_phone_code: code
            })
            // 初始化获取手机号组件
            that.selectComponent('#componentsPhoneId').eventInit()
          } else {
            wx.showToast({
              title: '微信授权登录失败',
              icon: 'none',
              duration: 2000//持续的时间
            });
            return;
          }
        }
      }),
  // 获取手机号成功后回调事件
  getPhoneSuccess:function(event){
    if(event){
      this.setData({
        userinfo:event.detail
      })
    }
  },

index.json

"usingComponents": {
    "getPhone": "/components/getPhone/getPhone"
  }

index.wxml

大概思路

拿到code后执行that.selectComponent('#componentsPhoneId').eventInit()，就算执行组件的eventInit方法，去显示组件，组件拿到解密后的接口后抛出that.triggerEvent('success', userInfo);success事件名称，userInfo参数，然后主页面bind:success="getPhoneSuccess" 监听事件success，并自定义事件getPhoneSuccess，userInfo的值是在event.detail里面，大家可以打断点看看哈

最后效果，上图

image.png