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

相关推荐
老华带你飞几秒前
小区服务|基于Java+vue的小区服务管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·小区服务管理系统
Nan_Shu_6149 分钟前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店19 分钟前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
计算机学姐27 分钟前
基于微信小程序的扶贫助农系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
蓝莓味的口香糖29 分钟前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒29 分钟前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser31 分钟前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan34 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
游戏开发爱好者834 分钟前
Nginx HTTPS 深入实战 配置、性能与排查全流程(Nginx https
运维·nginx·ios·小程序·https·uni-app·iphone
cg.family36 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js