微信小程序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
<!--components/getPhone.wxml-->
<van-popup show="{{ empower }}" position="bottom" custom-class="bott_popup" bind:close="onClose">
  <view class="flex-column content-around h-fill p-3">
    <view class="flex-row align-center">
      <image class="popup_logo" src="../../lib/img/my.png"></image>
      <view class="font-medium ml-2">PayFun贝乐</view>
      <text class="ml-2">申请</text>
    </view>
    <view class="flex-column">
      <text class="font-medium">请求获取手机号</text>
      <text class="font-extra-small mt-2">如拒绝,将会影响预订和购买套餐功能的使用</text>
    </view>
    <view class="flex-row content-around">
      <van-button type="default" custom-class="popup_btn1" bindtap="popBtnN">拒绝</van-button>
      <button open-type="getPhoneNumber" class="phone_btn van-button van-button--primary"
        bindgetphonenumber="getPhoneNumber">允许</button>
    </view>
  </view>
</van-popup>
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
<!-- 获取用户手机号弹窗 -->
 <getPhone id="componentsPhoneId" code="{{wx_phone_code}}" bind:success="getPhoneSuccess"></getPhone>  

大概思路

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

最后效果,上图

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,076评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,658评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,732评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,493评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,591评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,598评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,601评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,348评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,797评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,114评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,278评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,953评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,585评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,202评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,180评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,139评论 2 352