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

相关推荐
毕设源码-朱学姐7 小时前
【开题答辩全过程】以 工厂能耗分析平台的设计与实现为例,包含答辩的问题和答案
java·vue.js
老前端的功夫8 小时前
Vue 3 性能深度解析:从架构革新到运行时的全面优化
javascript·vue.js·架构
天天扭码8 小时前
如何实现流式输出?一篇文章手把手教你!
前端·aigc·ai编程
前端 贾公子9 小时前
vue移动端适配方案 === postcss-px-to-viewport
前端·javascript·html
GISer_Jing10 小时前
AI营销增长:4大核心能力+前端落地指南
前端·javascript·人工智能
明远湖之鱼10 小时前
一种基于 Service Worker 的渐进式渲染方案的基本原理
前端
前端小端长11 小时前
Vue 中 keep-alive 组件的原理与实践详解
前端·vue.js·spring
FeelTouch Labs11 小时前
Nginx核心架构设计
运维·前端·nginx
雪球工程师团队11 小时前
别再“苦力”写后台,Spec Coding “跑” 起来
前端·ai编程