This is the first time I used Uniapp to write a WeChat applet. Since Uniapp is not in the WeChat ecosystem, the way to obtain user opnid is not so simple.


In the development of WeChat applet, it is more common to obtain the user's avatar and nickname . Uniapp encapsulates an API for us to obtain user information - uni.getUserInfo(OBJECT)

picture

If this method is called, the program will prompt the application for authorization. Is this authorization request familiar?

picture

After clicking Allow, the user's avatar and nickname will be displayed in the callback result.

picture




The avatar and nickname are obtained, so how to obtain the user's openid in Uniapp? The following picture is the official WeChat applet login documentation. As you can see in the text, when using the official WeChat developer tools to develop WeChat applet, you need to call the wx. Get the user's openid.

picture

Uniapp also encapsulates the corresponding API - uni.login (OBJECT) and uni-id user system.

picture

Through uni.login(), we can get the code mentioned above.

picture

Next, we need to use the obtained code to obtain the user's openid from the WeChat server. In this step, we can use the uni-id user system to achieve the user's openid only by accessing the cloud function. The following will be specific. Describes how to install and use uni-id.

picture

picture



Go to the plugin market and search for uni-id, import the plugin, and uni-id will be automatically installed in your project.

picture

After the installation is completed, you generally need to create a config.json file according to the requirements in the red box in the figure. The content of the file is as follows. You need to fill in your own appid and app secret, and the others remain unchanged .

picture

{    "passwordSecret": "bctos-weixin-h5",    "tokenSecret": "bctos-weixin-h5",    "tokenExpiresIn": 7200,    "tokenExpiresThreshold": 600,    "passwordErrorLimit": 6,    "passwordErrorRetryTime": 3600,    "autoSetInviteCode": false,    "forceInviteCode": false,    "app-plus": {        "tokenExpiresIn": 2592000,        "oauth" : {            "weixin" : {                "appid" : "weixin appid",                "appsecret" : "weixin appsecret"            },            "apple":    {                "bundleId": "your APP bundleId"            }        }    },    "mp-weixin": {        "oauth" : {            "weixin" : {                "appid" : "这里是你微信小程序的appid",                "appsecret" : "这里是你微信小程序的appsecret"            }        }    },    "mp-alipay": {        "oauth" : {            "alipay" : {                "appid" : "alipay appid",                "privateKey" : "alipay privateKey"            }        }    },    "service": {        "sms": {            "name": "your app name",            "codeExpiresIn": 180,            "smsKey": "your sms key",            "smsSecret": "your sms secret"        },        "univerify": {            "appid":"your appid",            "apiKey": "your apiKey",            "apiSecret": "your apiSecret"        }    }}

Create a new cloud function usr-login, the code is as follows .

picture

const uniID = require('uni-id')exports.main = async function(event,context) {  // 如下旧写法依然支持  // const res = await uniID.loginByWeixin(event.code)  // const res = await uniID.loginByWeixin({ //    code: event.code //  })  const res = await uniID.loginByWeixin(event.code)    return res}

At this point, you can get the user's openid and the user's avatar nickname.



Recommended attention: