微信小程序之公共组件

首先我们要创建一个公共组件

然后在login.json文件中将component定义为true

{ "component": true, "usingComponents": {} }

在login.wxml添加内容

<!-- 登录 --> <van-popup show="{{ show }}" position="top" custom-style="height: 60%;" close-on-click-overlay="{{true}}" > <image src="../../image/index/yong.png"></image> <view>授权登录</view> <view>请授权小程序登录</view> <view>我们不会公布您的这些信息</view> <view>只是为了给您提供更好的服务</view> <button open-type="getUserInfo" bindgetuserinfo="GetUserInfo" style="background-color: green;color: white;"> 允许 </button> <button bindtap="GetQuUserInfo"> 暂不登录 </button> </van-popup>

在login.js

Component({ options:{ multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { show:true, }, /** * 组件的方法列表 */ methods: { GetUserInfo:function(e){ if (e.detail.userInfo) { this.getLogin() this.setData({ show: false }); }else{ //用户按了拒绝按钮 wx.showModal({ title:'警告', content:'您点击了拒绝授权，无法获取您的信息，请授权之后再进入!!!', showCancel:false, confirmText:'返回授权', }) } }, GetQuUserInfo(){ //暂不登录 this.setData({ show: false }); }, getLogin(){ wx.login({ success (res) { wx.request({ url: 'https://api.it120.cc/wangkai/user/wxapp/login', //登录的url data: { code: res.code }, success:function(res){ if(res.data.code==0){ //code为0代表成功 wx.setStorageSync("token",res.data.data.token) } } }) } }) } }, // 组件所在页面的生命周期函数 pageLifetimes: { show: function() { // 页面被展示 var value = wx.getStorageSync('token') if (value) { this.setData({ show: false }); } }, hide: function() { // 页面被隐藏 var value = wx.getStorageSync('token') if (!value) { this.setData({ show: true }); } }, } })

父级页面的.json文件中添加

{ "usingComponents": { "login":"../login/login" } }

在父级页面的.wxml文件中

<login>//这个是json中的名称，"login":"../login/login" <van-popup show="{{ show }}" position="top" custom-style="height: 60%;" close-on-click-overlay="{{true}}" > <image src="../../image/index/yong.png"></image> <view>授权登录</view> <view>请授权小程序登录</view> <view>我们不会公布您的这些信息</view> <view>只是为了给您提供更好的服务</view> <button open-type="getUserInfo" bindgetuserinfo="GetUserInfo" style="background-color: green;color: white;"> 允许 </button> <button bindtap="GetQuUserInfo"> 暂不登录 </button> </van-popup> </login>

在.wxml中显示（样式不好看，可以忽略）