【Uniapp-Vue3】导入uni-id用户体系

在uniapp官网的uniCloud中下载uni-id用户体系

或者直接进入加载,下载地址:uni-id-pages - DCloud 插件市场

进入以后下载插件,打开HbuilderX

选中项目,点击确定

点击跳过

点击合并

右键uniCloud文件夹下的database文件夹,点击"上传所有 DB Schema"

弹出两个弹窗,按下面的图进行勾选和确定

在manifest.json中打开微信小程序配置,配置微信小程序的AppID和勾选上传代码时自动压缩

我们在uniCloud下的uni-id用户体系下的云对象中找到引入云对象的代码,引入到App.vue中

再点击旁边的微信登录,将接口形式中的代码也引入到App.vue中

进行如下配置

javascript 复制代码
<script setup>
	import {onLaunch, onShow, onHide} from "@dcloudio/uni-app";
	
	// 引入云对象
	const uniIdCo = uniCloud.importObject('uni-id-co')
		
	onLaunch(()=>{
		console.log('App Launch');
		
		uni.login({
			success:login=>{
				uniIdCo.loginByWeixin({
					code:login.code
				}).then(res=>{
					console.log(res);
				})
			}
		})
	})
	
	onShow(()=>{
		console.log('App Show');
	})
	
	onHide(()=>{
		console.log('App Hide');
	})
</script>

<style lang="scss">
	@import "common/style/common_style.scss";
	@import "@/static/fonts/iconfont.css";
</style>

在uniCloud/cloudfunctions/common/uni-config-center中创建uni-id文件夹,再在下面创建config.json文件

在新建的config.json中粘贴如下代码

javascript 复制代码
{
  "passwordSecret": [
    {
      "type": "hmac-sha256",
      "version": 1
    }
  ], 
  "passwordStrength": "medium", 
  "tokenSecret": "", 
  "requestAuthSecret": "", 
  "tokenExpiresIn": 7200, 
  "tokenExpiresThreshold": 3600, 
  "maxTokenLength": 10, 
  "passwordErrorLimit": 6, 
  "passwordErrorRetryTime": 3600, 
  "autoSetInviteCode": false, 
  "forceInviteCode": false, 
  "idCardCertifyLimit": 1, 
  "realNameCertifyLimit": 5, 
  "sensitiveInfoEncryptSecret": "", 
  "frvNeedAlivePhoto": false, 
  "userRegisterDefaultRole": [], 
  "app": { 
    "tokenExpiresIn": 2592000,
    "tokenExpiresThreshold": 864000,
    "oauth": {
      
      "weixin": {
        "appid": "",
        "appsecret": ""
      },
      
      "qq": {
        "appid": "",
        "appsecret": ""
      },
      "apple": { 
        "bundleId": ""
      },
      "huawei": { 
        "clientId": "",
        "clientSecret": ""
      }
    }
  },
  "web": { 
    "tokenExpiresIn": 7200,
    "tokenExpiresThreshold": 3600,
    "oauth": {
      "weixin-h5": { 
        "appid": "",
        "appsecret": ""
      },
      "weixin-web": { 
        "appid": "",
        "appsecret": ""
      }
    }
  },
  "mp-weixin": {
    "tokenExpiresIn": 259200,
    "tokenExpiresThreshold": 86400,
    "oauth": {
      
      "weixin": {
        "appid": "",
        "appsecret": ""
      }
    }
  },
  "mp-qq": {
    "tokenExpiresIn": 259200,
    "tokenExpiresThreshold": 86400,
    "oauth": {
      
      "qq": {
        "appid": "",
        "appsecret": ""
      }
    }
  },
  "mp-alipay": {
    "tokenExpiresIn": 259200,
    "tokenExpiresThreshold": 86400,
    "oauth": {
      
      "alipay": {
        "appid": "",
        "privateKey": "", 
        "keyType": "PKCS8" 
      }
    }
  },
  "mp-harmony": {
      "oauth": {
        "huawei": { 
          "clientId": "",
          "clientSecret": ""
        }
      }
  },
  "service": {
    "sms": {
      "name": "", 
      "codeExpiresIn": 180, 
      "scene": {
        "bind-mobile-by-sms": { 
          "templateId": "", 
          "codeExpiresIn": 240 
        }
      }
    },
    "univerify": {
      "appid": "" 
    }
  }
}

如果是在官网上进行的代码粘贴,就会有注释,会报下面这个错误,这时候需要删除注释

Ctrl+F,点击 .* ,在里面输入 //.* ,点击替换区,然后点击全部替换,所有的注释都会被替换成空

相关推荐
天问一1 分钟前
Cesium 处理屏幕空间事件(鼠标点击、移动、滚轮)的示例
前端·javascript
@PHARAOH2 分钟前
WHAT - Vercel react-best-practices 系列(五)
前端·react.js·前端框架
bjzhang753 分钟前
使用 HTML + JavaScript 实现多会议室甘特视图管理系统
前端·javascript·html
qiqiliuwu3 分钟前
VUE3+TS+ElementUI项目中监测页面滚动scroll事件以及滚动高度不生效问题的解决方案(window.addEventListener)
前端·javascript·elementui·typescript·vue
LawrenceLan5 分钟前
16.Flutter 零基础入门(十六):Widget 基础概念与第一个 Flutter 页面
开发语言·前端·flutter·dart
游戏开发爱好者85 分钟前
如何在 Windows 环境下测试 iOS App,实时日志,CPU监控
android·ios·小程序·https·uni-app·iphone·webview
夏沫mds6 分钟前
基于 Flask 与Vue 3 及协同过滤算法的智能电影推荐系统
vue.js·python·flask·协同过滤
喔烨鸭8 分钟前
antdv编辑表格,根据选择时间区间展示动态列
前端·vue·表格编辑
天天向上10249 分钟前
el-table 解决一渲染数据页面就卡死
前端·javascript·vue.js
bjzhang759 分钟前
使用 HTML + JavaScript 实现单会议室周日历管理系统
前端·javascript·html