一、简介
制作微信小程序,第一步就是获取使用者信息,这样保存在数据库里,可以更好地对用户信息进行管理、操作。因此我们需要用户一个独一无二的凭证,就像超市里给每个客户制作的超市优惠卡,每个卡号是顾客进入超市,刷钱、保存积分的id,这个可以看作openid(举例可能不恰当,但是这样理解也可以进行下去,详情看微信开发手册)
除此之外,超市卡上方还有用户头像和姓名,这个就是avatarUrl和nickName。接下来就说说怎么获取吧。
注意:原则一定是要妥善保 管、合理使用用户信息哦
二、方法
1、getSetting获取基本信息
这里获取到的是用户的开放信息,比如头像、昵称、城市、性别等等。
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
//用户的信息保存至全局变量
app.globalData.user = res.userInfo
//用户的信息保存至局部变量
this.setData({
avatarUrl: res.userInfo.avatarUrl,
})
console.log(res.userInfo)
}
})
}
}
})
2、cloud.callFunction获取用户openid
//获取用户openid
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
console.log('用户openid:', res.result.openid)
//保存用户openid
app.globalData.openid = res.result.openid
},
fail: err => {
console.error('获取用户openid失败', err)
}
})
这里就不把结果贴出来了,大家可以去试试。这个云函数在创建的时候,如果选择数据库开发,可以在数据库——云函数里看到有个login的函数
在程序里可以看到
三、注释
在这里我把每个基础细节都讲清楚,因为我一开始小白的时候看得糊里糊涂
1、openid有什么用
什么是openid,这里可以去官网查看,我比较喜欢把她看作超市会员卡,每个用户登陆你的小程序,如果进行数据库操作,会在数据库表里自动产生_id和_openid两个field,这个可以去试试。由于openid具有一定的隐蔽性和重要性,要妥善保管。
每个人进入一个小程序都会有一个独特的openid,根据openid就可以做很多事啦,比如我写的是一个类似知乎的小程序,那么就要存储用户发送的信息,当用户再次登录我的小程序时,我需要把ta发表过的东西显示给ta看,那么怎么知道哪些信息是ta发表的呢?就是用openid去检索啦(因为openid是独一无二的嘛),因此openid是这么的重要。
2、userinfo是什么
userinfo是个字典,里面有这样一些东西,其中avaterUrl就是微信头像图片,nickName就是昵称。比如需要把用户的头像显示出来,那么就可以写一个image,src是图片相对于这个page的路径,mode是图片的显示模式(等比例缩放,按长边缩放,只显示左上角啊等等这些)
<image src="{{avatarUrl}}" mode="scaleToFill"></image>
3、login云函数是什么
这个函数是创建小程序时自动产生的,后面可能回需要自己创建云函数,这里不理解没关系,就把它当作是一个在云端的函数,通过这个函数你的小程序可以拿到用户的openid。
之后的文章会讲到数据库和云函数操作数据库,因此需要自己创建云函数,自然就会明了。
最后还是例行一段:
最近用了一周写了一个仿知乎的小程序,将会陆续整理,包括前端页面设计与后端逻辑、数据库和云函数操作等,以及自己遇到的坑。之前也没有学过javascript和数据库,css和html大概知道,用了一天看数据库、php、vue,后来为了设计美观,用一早上看css和html,就可以开始做了,所以算是零基础的新手训练哦。感兴趣就关注吧