1.插件市場導入uni-id公用模塊

插件市場 uni-id ： https://ext.dcloud.net.cn/plugin?id=2116

導入成功后會在項目云文件夾下自動生成common目錄與uni-id公共模塊

在 uni-id 目錄下手動建立 config.json 文件 ，將微信小程序appid , appsecret 修改成自己的。

{"passwordSecret": "passwordSecret","tokenSecret": "tokenSecret","tokenExpiresIn": 7200,"tokenExpiresThreshold": 600,"passwordErrorLimit": 6,"bindTokenToDevice": true,"passwordErrorRetryTime": 3600,"autoSetInviteCode": false,"forceInviteCode": false,"app-plus": {"tokenExpiresIn": 2592000,"oauth" : {"weixin" : {"appid" : "wx8*********3","appsecret" : "e2e**********71ef"},"apple": {"bundleId": "your APP bundleId"}}},"mp-weixin": {"oauth" : {"weixin" : {"appid" : "wx8*********3","appsecret" : "e2e**********71ef"}}},"mp-alipay": {"oauth" : {"alipay" : {"appid" : "alipay appid","privateKey" : "alipay privateKey"}}},"service": {"sms": {"name": "DCloud","codeExpiresIn": 300,"smsKey": "your sms key","smsSecret": "your sms secret"},"univerify": {"appid":"your appid","apiKey": "your apiKey","apiSecret": "your apiSecret"}} }

修改config.json文件

上傳公共模塊

2.云函數配置

新建云函數 login

'use strict'// 云函數login-by-weixin代碼 const uniID = require('uni-id') exports.main = async function(event,context) {const res = await uniID.loginByWeixin({code: event.code})return res }

上傳部署云函數

最后要管理公共模塊依賴，如果沒有關聯公共模塊，運行小程序時會報錯：Cannot find module ‘uni-id’

3.前端代碼

由于微信獲取用戶信息接口的變更，登錄代碼修改如下：

<template><view class="center"><view class="logo" @click="goLogin" :hover-class=" !login ? 'logo-hover' : '' " ><image class="logo-img" :src="login ? uInfo.avatarUrl : avatarUrl"></image><view class="logo-title"><text class="uer-name">Hi，{{login ? uInfo.nickName : '您未登錄'}}</text><text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text></view></view><view class="center-list"><view class="center-list-item border-bottom" @click="goUpImages"><text class="list-icon">&#xe60b;</text><text class="list-text">上傳壁紙</text><text class="navigat-arrow">&#xe65e;</text></view><view class="center-list-item" @click="goMyWork"><text class="list-icon">&#xe65f;</text><text class="list-text">我的作品</text><text class="navigat-arrow">&#xe65e;</text></view></view><view class="center-list"><view class="center-list-item"><text class="list-icon">&#xe639;</text><text class="list-text" @click="goBaiduAi">傳圖識物</text><text class="navigat-arrow">&#xe65e;</text></view></view><view class="center-list"><view class="center-list-item"><text class="list-icon">&#xe639;</text><text class="list-text" @click="gophonLogin">垃圾分類</text><text class="navigat-arrow">&#xe65e;</text></view></view><view class="center-list"><view class="center-list-item"><text class="list-icon">&#xe614;</text><text class="list-text" @click="exitLogin">退出登錄</text><text class="navigat-arrow">&#xe65e;</text></view></view></view> </template><script>export default {data() {return { login: false,avatarUrl: "../../static/tou.png", //未登錄圖標uInfo: {}}},onLoad() { let avatarUrl = uni.getStorageSync('avatarUrl')let nickName = uni.getStorageSync('nickName')let openid = uni.getStorageSync('openid')if (openid != null && openid != "" && openid != undefined) {this.login = truethis.uInfo = {'avatarUrl': avatarUrl ,'nickName': nickName} }},methods: {//用戶登錄goLogin() { if (!this.login) { // 獲取用戶頭像、昵稱等信息uni.getUserProfile({desc:'微信登錄',success:(infoRes) => {console.log(infoRes)uni.setStorageSync('nickName', infoRes.userInfo.nickName)uni.setStorageSync('avatarUrl', infoRes.userInfo.avatarUrl)this.uInfo = {'avatarUrl': infoRes.userInfo.avatarUrl,'nickName': infoRes.userInfo.nickName}this.login = true},fail: (err) => {console.log('獲取用戶信息失敗',err)this.login = false}});// 獲取openiduni.login({provider: 'weixin',success: (res) => { let code = res.code //微信臨時登錄憑證 //調用云函數獲取openiduniCloud.callFunction({ name: 'login', //云函數名稱data: { code },success: (res) => {//從云端返回的信息，包括openidconsole.log('openid:',res.result.openid)uni.setStorageSync('openid', res.result.openid) },fail: (err) => {console.log('調用云函數失敗：', err)}})}, fail: (err) => {console.log('login失敗：', err) }})}},//退出登錄exitLogin() { this.login = falseuni.removeStorageSync('avatarUrl') //刪除緩存uni.removeStorageSync('nickName')uni.removeStorageSync('openid')uni.showToast({title:"賬號已退出!",icon:"success"})},goUpImages() {if(this.login) {uni.navigateTo({ //跳轉到指定頁面url: "../upImages/upImages",})} else {uni.showToast({title:"請先登錄",icon:"loading"})}},goMyWork() {if(this.login) {uni.navigateTo({ //跳轉到指定頁面url: "../myWork/myWork",})} else {uni.showToast({title:"請先登錄",icon:"loading"})}}}} </script><style>@font-face {font-family: texticons;font-weight: normal;font-style: normal;src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');}page,view {display: flex;}page {background-color: #f8f8f8;}.center {flex-direction: column;}.logo {width: 750upx;height: 240upx;padding: 20upx;box-sizing: border-box;background-color: #55aaff;flex-direction: row;align-items: center;}.logo-hover {opacity: 0.8;}.logo-img {width: 150upx;height: 150upx;border-radius: 150upx;}.logo-title {height: 150upx;flex: 1;align-items: center;justify-content: space-between;flex-direction: row;margin-left: 20upx;}.uer-name {height: 60upx;line-height: 60upx;font-size: 38upx;color: #FFFFFF;}.go-login.navigat-arrow {font-size: 38upx;color: #FFFFFF;}.login-title {height: 150upx;align-items: self-start;justify-content: center;flex-direction: column;margin-left: 20upx;}.center-list {background-color: #FFFFFF;margin-top: 20upx;width: 750upx;flex-direction: column;}.center-list-item {height: 90upx;width: 750upx;box-sizing: border-box;flex-direction: row;padding: 0upx 20upx;}.border-bottom {border-bottom-width: 1upx;border-color: #c8c7cc;border-bottom-style: solid;}.list-icon {width: 40upx;height: 90upx;line-height: 90upx;font-size: 34upx;color: #55aaff;text-align: center;font-family: texticons;margin-right: 20upx;}.list-text {height: 90upx;line-height: 90upx;font-size: 34upx;color: #555;flex: 1;text-align: left;}.navigat-arrow {height: 90upx;width: 40upx;line-height: 90upx;font-size: 34upx;color: #555;text-align: right;font-family: texticons;} </style>

以下是uniapp+阿里云開發的相冊小程序，主要功能是手機壁紙的上傳分享。

總結

以上是生活随笔為你收集整理的uniapp 阿里云开发微信小程序一键登录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。