微信小程序授权登录 组件的封装

因为多个页面功能需要登录状态
所以做了个组件方便调用

组件的封装

新建components文件

• 与pages文件同级创建一个components文件夹
• 在components文件下创建一个组件文件
• 然后在文件下新建component

写wxml文件

component文件结构与页面一样
都包括以下

以下是一个授权登录的弹窗
这个弹窗内容都是活的也可以修改下做别的弹窗组件来用

<!-- 弹窗 -->
<view class="shade" wx:if="{
   {show_loadnote}}"></view>
<view class="reminder" wx:if="{
   {show_loadnote}}">
  <view class="reminder_title">
    <view class="title_text">{
   {
   title}}</view>
  </view>
  <view class="reminder_content">
  {
   {
   content}}
  </view>
  <view class="reminder-btn">
    <button class="confirm" style="width:50%;" catchtap="close_loadnote" >{
   {
   cancel}}</button>
    <button class="cancel"  bindtap="getUserProfile" open-type="getUserInfo" style="width:50%;">{
   {
   confirm}}</button>
  </view>
</view>

wxss部分

同页面wxss一样写的是css样式

/* 弹窗 */
.shade{
   
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.reminder{
   
  width: 80%;
  background-color: #fff;
  border-radius: