【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,点击 .* ,在里面输入 //.* ,点击替换区,然后点击全部替换,所有的注释都会被替换成空

相关推荐
Ashley的成长之路14 分钟前
前端性能优化实战手册·第2篇:资源加载策略全解
前端·性能优化·资源加载·http/3·性能优化实战·资源加载优化
浅水壁虎19 分钟前
vue基础(第二章 )
前端·javascript·vue.js
界面开发小八哥19 分钟前
界面控件DevExtreme v26.1新版亮点——支持Angular 22
前端·javascript·angular.js·devexpress·ui开发·devextreme
Getflare23 分钟前
前端 + UI 设计 + AI:这不是三个工种,是一个新三角能力模型(附自检清单)
前端·人工智能·ui
oil欧哟30 分钟前
我做了一个 Vibe Coding 术语学习站:VibeHub
前端·ai·agent·独立开发·vibe coding
审小匠OpenCPAi1 小时前
银行流水核查怎么自动化?单边匹配、双向勾稽与图聚类异常检测的工程对比
java·前端·人工智能·python·审计
Revolution611 小时前
一个公共表格组件,是怎么一步步失控的
前端·前端工程化
腻害兔2 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:CRM 客户关系模块深度解析——从线索到回款,一套完整的 B2B 销售闭环是怎么搭的?
java·前端·javascript·vue.js·产品经理·ai编程
whyfail2 小时前
前端学 Spring Boot(2):一次点击,如何穿过整个后端?
前端·spring boot·后端