自定义组件
步骤一： 创建自定义组件
创建components/common/login文件夹
在login上右键，新建Comoponent,就生成了组件相关的四个文件wxml,wxss,js,json
步骤二： 完成组件定义
wxml
<view class="login">
<view>标题：登录{{num}}次------{{newMsg}}</view>
<button bindtap="getInfo" type="primary" class="btn" >微信登录</button>
</view>
wxss
.login {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: #000;
z-index: 9999;
}
js
Component({
/**
* 组件的属性列表
*/
properties: {
newMsg: {
type: String,
value: '默认值'
}
},
/**
* 组件的初始数据
*/
data: {
num: 9,
msg: '初始数据'
},
/**
* 组件的方法列表
*/
methods: {
getInfo(e) {
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res);
//把获取的用户昵称和头像地址存在storage
let { nickName ,avatarUrl} = res.userInfo
let user = {
nickName,
avatarUrl
}
wx.setStorage({
key:"userinfo",
data: user
})
//向父组件发送自定义事件，从而传参
this.triggerEvent("change",false)
},
fail(err){
console.log('拒绝');
}
})
},
}
})
步骤三： 在页面中使用组件
index.json中引入组件
{
"usingComponents": {
"com-login": "/components/common/login/login"
}
}
index.wxml中使用
<view><button bindtap="onLogin">登录</button></view>
<!-- 微信登录的弹窗 -->
<block wx:if="{{isLoginShow}}">
<com-login bindchange="getChange" new-msg="新值"></com-login>
</block>
index.js中定义相关的data数据，及监听子组件触发的事件处理程序
data: {
isLoginShow: false,
},
// 单击登录时，显示弹窗
onLogin(){
this.setData({
isLoginShow: true
})
},
//监听子组件发送的事件
getChange(e){
this.setData({
isLoginShow: e.detail
})
},
