uniapp JS文件里面调用自定义组件（不用每个页面在template中加组件标签）

news2024/12/29 9:26:12

前言
工具：uniapp
开发端：微信小程序
其他：uview 2.0
场景：路由器里面，统一验证是否已登录，如果没登录，则直接弹出登录弹窗出来，不管哪个页面都如此。效果如下：
在这里插入图片描述
直接上代码：

第一步：组件封装 components目录下-新建文件-authorized.vue
（平常怎么封装的组件就怎么封装建议把组件放到components目录下面）需要的自己拿去改

<template>
	<view>
		<!-- 授权组件 -->
		<u-popup ref="model" :show="showAuth" bgColor='transparent' @close="showAuth=false" @open="open"
			:safeAreaInsetBottom='false' mode="bottom">
			<view class="contactUsDiv">
				<view class="title">
					<text>登录体验更多功能</text>
					<view class="iconfont icon-guanbi closeIcon" @tap="showAuth=false">
					</view>
				</view>
				<button class="wxBtn" @tap="goLoginWx" v-if="!checkValueWx">
					<view class="iconfont icon-weixin2">
					</view>
					<text>微信一键登录</text>
				</button>
				<button class="wxBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-else>
					<view class="iconfont icon-weixin2">
					</view>
					<text>微信一键登录</text>
				</button>
				<view class="xieyi">
					<u-checkbox-group>
						<u-checkbox @change="checkboxChangeWx" activeColor="#FF8A00" v-model="checkValueWx"
							shape="circle" size='14' labelSize='14' label="已阅读并同意"></u-checkbox>
					</u-checkbox-group>
					<text class="xieyiP" @tap="goto('pages/public/userAgreement')">《用户协议》</text>
					<text>和</text>
					<text class="xieyiP" @tap="goto('pages/public/userAgreement')">《隐私协议》</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:'authorized',
		data() {
			return {
				showAuth: false,
				checkValueWx: false,
			};
		},
		methods: {
			open() {
				this.showAuth = true
			},
			checkboxChangeWx(e) {
				this.checkValueWx = e;
			},
			goLoginWx() {
				uni.$u.toast('请先阅读并同意用户协议和隐私协议');
			},
			// 微信授权登录
			getPhoneNumber(e) {
				let _this = this
				wx.login({
					success: function(res) {
						_this.getOpenIdCode = res.code
						console.log('微信授权成功', _this.getOpenIdCode);
						uni.login({
							provider: 'weixin',
							success: res => {
								if (res.code) {
									if (e.detail.errMsg == 'getPhoneNumber:ok') {
										const params = {
											loginType: '3',
											registerSource: '3',
											getPhoneCode: e.detail.code,
											getOpenIdCode: _this.getOpenIdCode
										};
										_this.fnLogin(params).then((res) => {
											console.log('res', res);
											_this.$store.commit('login', res.data);
											if (_this.judeDriverType()) {
												_this.backOnload()
											}
										})
										console.log('用户按了允许授权按钮，并且返回用户信息');
									} else {
										console.log('用户按了拒绝按钮');
									}
								}
							}
						});
					},
					fail: function(err) {
						console.log(err)
					}
				})
			},
			// 判断是否选择驾照类型
			judeDriverType() {
				if (!Object.keys(uni.getStorageSync('driveType')).length) {
					uni.$u.route({
						url: "pages/public/licenseType",
					})
					return false
				} else {
					return true
				}
			},
		}
	}
</script>

<style lang="scss">
	.contactUsDiv {
		position: relative;
		background-color: #fff;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
	}

	.title {
		position: relative;
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 50rpx 0;
		font-size: 17px;

		.closeIcon {
			position: absolute;
			right: 5%;
			top: 25rpx;
			font-size: 18px;
		}
	}

	.wxBtn {
		@include flex;
		justify-content: center;
		align-items: center;
		width: 80%;
		border-radius: 30rpx;
		background-color: #ACABAA;
		font-size: 15px;
		margin:0 auto;
		margin-bottom:50rpx;
		color: #fff;
		background-color: #00E71F;

		text {
			margin-left: 20rpx;
		}
	}

	.xieyi {
		@include flex;
		align-items: center;
		justify-content: center;
		margin-bottom:100rpx;
		font-size: 14px !important;

		.xieyiP {
			margin-left: 10rpx;
			color: $theme-color;
		}
	}
</style>

第二步：项目根目录下新建vue.config.js文件（如果有则跳过）
vue.config.js文件中配置代码如下：

module.exports = {
	chainWebpack: config => {
		config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
			const compile = options.compiler.compile
			options.compiler.compile = (template, ...args) => {
				if (args[0].resourcePath.match(/^pages/)) {
					template = `<view>
					              ${template}
					              <authorized ref="uAuthorized" style="z-index: 123;"/>
					            </view>`;
				}
				return compile(template, ...args)
			}
			return options
		})
	}
}