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

相关推荐
速易达网络21 分钟前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘27 分钟前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家1 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689971 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽3 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头3 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全4 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing4 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆4 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding5 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js