前言
项目中有个业务场景,有些业务用户想要参与必须要获取用户手机号,所以很多页面都写了获取手机号的判断和相关引导逻辑?代码和样式重复了很多次,针对这种场景,我们可以把获取用户手机号的效果页面做成组件,减少代码和维护量。
准备工作
分析抽离的页面代码和js代码和样式和第三方组件,思考我们要哪些变量是从主页传到组件的,组件要抛出什么自定义事件给主页面接收。
场景分析
小程序UI框架使用的是vant-weapp框架,获取手机号的效果是,点击某些按钮或者进入页面onLoad时判断用户缓存中是否存在用户是否存在手机号,没有就弹出一个弹窗,弹窗内容提示用户为什么要获取手机号,有取消和确定按钮,取消则关闭弹窗,确定则触发微信获取手机号的函数bindgetphonenumber,然后请求后端接口解密、更新用户数据,然后返回最新的用户信息。
开始
项目根目录下创建空文件夹components,这个目录是专门放组件的,然后在这个文件夹下创建自定义组件文件夹,准备放组件用到的js、json、wxml、wxss等文件,比如我在components创建空文件夹getPhone文件夹,然后选择getPhone文件夹右键-新建component,名称是getPhone,这样开发工具就可以帮忙生成初始文件了
抽离代码部分我就不解释那么多,直接上最后效果,自定义组件相关的大家可以先去看看官方文档,理解一些关键字
组件部分
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里面,大家可以打断点看看哈