微信小程序弹框（后面有灰色蒙版） 获取手机号

1、先建一个文件夹（比如：example）

example.js 

// 授权登录
var auth = {
	//调用授权页面
	isAuth: function(that) {
        var userid = wx.getStorageSync('userid');
        if (userid == 0 || isNaN(userid) == true || userid == 'NaN' || userid == undefined || userid == '') {
			that.setData({
				showAuthTemplate: 1
			})
			return false;
		}
		return true;
	},
	// 授权登录
	getPhoneNumber: function (that, e) {
		var self = this;
		var code = wx.getStorageSync('code');
		if (e.detail.errMsg == 'getPhoneNumber:fail user deny' || e.detail.errMsg == 'getPhoneNumber:fail:cancel to confirm login') {
			wx.showModal({
				title: '提示',
				showCancel: false,
				content: '未授权',
				success: function (res) {
					//
				}
			})
		} else {
			self.getphone(that, code, e.detail.iv, e.detail.encryptedData);
		}
	},
	getphone: function (that, code, iv, encryptedData) {
		var self = this;
		var API_URL = getApp().globalData.API_URL;
		wx.request({
			url: 接口,
			method: "POST",
			data: {
				code: code,
				iv: iv,
				// source: 209,
				encryptedData: encryptedData
			},
			header: { 'content-type': 'application/json' },
			success: function (res) {// success
				var result = res.data;
				wx.setStorage({
					key: 'openid',
					data: result.data.openid
                });
				wx.setStorageSync('phone', result.data.phone);
				wx.setStorage({
					key: 'userid',
					data: result.data.userId
                });

                // 0不展示 1 展示
				that.setData({
					showAuthTemplate: 0
				});
                that.onLoad(that.data.option);
                self.isAuth
			}
		})
	},
};

module.exports = {
	auth: auth
}

如果只是有个蒙版(没有获取手机号)

var auth = {
    	//调用经销商页面 1展示 0 不展示
        isAuth: function(that) {
        var userid = wx.getStorageSync('userid');
        if (userid == 0 || isNaN(userid) == true || userid == 'NaN' || userid == undefined || userid == '') {
			that.setData({
				showCodeTemplate: 0
			})
			return false;
		}
		return true;
    },
};

module.exports = {
	auth: auth
}

example.wxml

<!-- 授权登录 -->
<template name="auth">
    <!-- 0不展示 1 展示 -->
  <view class='startWarp' wx:if="{{showAuthTemplate === 1}}">
	<!-- <view class='startWarp'> -->
    <view class='wx_sqcont'>
      <image src=''></image>
      <text></text>
      <text>需要先登录才能查看个人信息哦</text>
      <view>
        <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" style="width:100%">
          <text style="border:4rpx solid orange;border-radius: 20rpx;padding:4rpx">微信账号快速登录</text> 
        </button>
      </view>
    </view>
  </view>
</template>

example.wxss

/* pages/accredit/accredit.wxss */
/*微信授权*/
.startWarp {
    width: 750rpx;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    position: fixed;
    top: 0;
    z-index:999999;
    left: 0;
    /*display: none;*/
  }
  
  .wx_sqcont {
    width: 580rpx;
    height: 420rpx;
    background: #fff;
    position: absolute;
    top: 50%;
    margin-top: -250rpx;
    left: 50%;
    margin-left: -290rpx;
    border-radius: 6rpx;
    text-align: center;
  }
  
  .wx_sqcont image {
    width: 80rpx;
    height: 79rpx;
    border-radius: 50%;
    margin: 50rpx auto 20rpx auto;
  }
  
  .wx_sqcont text {
    font-size: 32rpx;
    display: block;
    color: #000;
    line-height: 50rpx;
  }
  
  .wx_sqcont .wx_sq_btn {
    
    margin: 35rpx auto;
    font-size: 32rpx;
    color: #21ac20;
  }
  
  .wx_sqcont .wx_sq_btn image {
    width: 44rpx;
    height: 36rpx;
    float: left;
    margin: 17rpx 0rpx 0 12rpx;
    border-radius: 0;
  }
  
  .wx_sqcont .wx_sq_btn button {
   margin:0 auto;
    width: 380rpx;
    background: none;
   border:2rpx solid #21AC20;
    font-size: 32rpx;
    color:#21AC20;
    height: 70rpx;
    line-height: 70rpx;
    background-color:#fff;
  }
  .wx_sqcont .wx_sq_btn button::after{
    border: none; 
  }
  

2、在引入的页面内

mine.wxml

 <import src="../../example/example" />

<template is="auth" data="{{showAuthTemplate}}"/>

注意：auth 需要与example.js 里 auth一样

mine.wxss 

@import "../../example/example.wxss";

mine.js

var Auth = require('../../example/example.js');

 注意： var auth = Auth.auth.isAuth(that)

Auth: mine.js引入的

auth: example.js里的

isAuth:example.js里的

  removeAll() {
        var that = this;
        // 打开授权页
        var auth = Auth.auth.isAuth(that)
        var userid = wx.getStorageSync('userid');
        if (auth == true) {
            that.setData({
                showAuthTemplate: 0
            })
            wx.request({
                url: 接口,
                method: "POST",
                data: {
                    userid: userid,
                },
                header: {
                    'content-type': 'application/json'
                },
                success: function (res) { // success
                    // 会员信息
                    // 判断是不是有收货地址信息
                    if (res.data.data.area === '' || res.data.data.city === '' || res.data.data.province === '' || res.data.data.realname === '' || res.data.data.area === undefined || res.data.data.city === undefined || res.data.data.province === undefined) {
                        wx.setStorage({
                            key: 'address',
                            data: 'false'
                        })
                    } else {
                        wx.setStorage({
                            key: 'address',
                            data: 'true'
                        })
                    }
                    that.setData({
                        userdetails: res.data.data
                    })
                    // 已经登录
                    inLogin = true
                    // 将会员等级存储起来
                    wx.setStorage({
                        key: 'level',
                        data: res.data.data.user_type
                    });
                    // 将审核存储起来
                    wx.setStorage({
                        key: 'is_check',
                        data: res.data.data.is_check
                    })
    
                }
            })
        }
    },

注意：userid:在example.js 里 getphone()中存储在storage

inLogin:  var inLogin = app.globalData.isLogin 在mine.js里

app.js里   主要用于判断用户是否登录

   // 用户是否已经登录
    isLogin: false,

  

3、在app.js 获取到code

// app.js
App({
  onLaunch() {
      wx.cloud.init({
          env: '',
          traceUser: true
      })
      if (!wx.cloud) {
          console.error('请使用2.2.3 或以上的基础库以使用云能力');
      } else {
          wx.cloud.init({
              traceUser: true
          })
      }
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        var code = res.code
        wx.setStorage({
            // 名称
            key:'code',
            // 值
            data: code
        })

      },
      fail: function () {
      }
    })
  },
  globalData: {
    userInfo: null,
    height: 0,
    API_URL: '接口',
    // 用户是否已经登录
    isLogin: false,
  }
})