本文目录：
- 1.获取用户信息的不同方式
- 2.小程序端的数据存储
- 3.生成小程序码
1.获取用户信息的不同方式
第一种方式
想要获取用户的头像直接显示在页面上
<open-data type="userAvatarUrl"></open-data>
想要获取用户的昵称直接显示在页面上
<open-data type="userNickName"></open-data>
国家<open-data type="userCountry"></open-data>
城市<open-data type="userCity"></open-data>
以上方式不需要授权，但是只能显示到页面上，不能用js进行数据操作。
第二种方式
获取已授权用户的信息
wx.getUserInfo({
success:(res)=>{
}
})
第三种方式
弹出授权框，让用户授权
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">获取用户信息</button>
onGetUserInfo(event){
console.log(event)
}
第三种方式的缺点获取不到用户的openid
第四种方式
传统方式下（服务器用的是自己的）
通过微信服务器调用wx.login获取code（code时效只有五分钟）
，用户端小程序调用wx.reuqest将code传递给后端服务器
后端服务器使用code从微信服务器获取openid和session_key，得到后将用户标识发送给小程序本地存储。
传统模式.png
云开发模式：
用户点击对应按钮，这个按钮可以是一个普通按钮，我们通过触发云函数中的代码来获取用户信息，小程序端调用云函数时，云函数端就可以很简单的获得用户信息，
然后将用户信息返送给小程序端，小程序端可以将用户信息存储到云数据库中去。
云开发模式.png
实际操作：
在小程序页面放置一个普通的按钮
<button bind:tap="getOpenid">获取openid</button>在js中定义事件处理函数
getOpenid(){
wx.cloud.callFunction({
name:'login'
}).then((res)=>{
console.log(res)
})
}
我们可以在用户不知情的情况下获取到用户的openid，但是获取用户信息必须要弹框，用户同意才可以获取。
有些页面我们不想要其滚动，可以在页面的json文件中添加上属性
“disableScroll: true”
原来的点击跳转页面是view组件，然后绑定tap事件实现页面跳转，但是小程序提供了组件navigator，点击整个区域，点击跳转界面，界面也是需要在app.json进行配置，然后添加url属性设置跳转页面，添加hover-class设置点击样式，我们可以设置hover-class:”none“来取消点击样式。
如果要给小程序的样式设置背景图片，那么不能使用本地图片，解决方法之一是使用链接形式的网络图片，解决方法之二是将图片转换成base64格式。
在页面的css文件中给page标签设置样式就可以对当前的整个页面起作用。
2.小程序端的数据存储
在app.js文件中有个onLaunch，每次小程序启动的时候都会自动调用这个回调函数。在这里我们可以定义一个方法，每次小程序启动的时候都先通过调用云函数把当前用户的OPENID获取到，并且存在手机的本地存储中，
wx.setStorage异步的，参数对应的是两个字符串
wx.setStorageSync同步的，参数对应的是一个对象
在云函数中通过
const wxContext = cloud.getWxcontext()然后
wxContext.OPENID就可以直接拿到用户的openid
获取小程序的全局变量：
取到app里的全局变量，首先需要在页面的js文件中取到app
const app =getApp()
然后就可以通过app.的形式去拿app中的全局变量了,
如app.globalData.openid
在小程序端初始化数据库，
const db = wx.cloud.database()
在云函数中初始化数据库，
const db = cloud.database()
从小程序端直接拿云数据库中的数据，时间是需要进行格式化处理的，如：日期格式转字符串格式
云函数中根据OPENID查询数据库的代码
const wxContext = cloud.getWXContext()
app.router('getListByOpenid', async(ctx, next) => {
ctx.body = await blogCollection.where({
_openid: wxContext.OPENID
}).skip(event.start).limit(event.count).orderBy('creatTime', 'desc').get().then((res) => {
return res.data
})
})
这个查询操作我们也可以不通过云函数，而直接在小程序端去查询数据库获取相关数据，首先将数据库的规则改为仅创建者可操作，这样我们不用传OPENID，因为只能查到自己创建的数据
_getListByMiniprogram(){
wx.showLoading({
title:'加载中'
})
db.collection('blog').skip(this.data.blogList.length)
.limit(MAX_LIMIT).get().then((res)=>{
console.log(res)
})
}
3.生成小程序码
新创建的云函数，如果打算调用对应的开放能力，需要在云函数文件夹中新建一个config.json文件，然后添加上相应的调用权限，比如当前生成小程序码，需要在config.json文件中添加以下代码
{
"permissions":{
"openapi":{
"wxacode.getUnlimited"
}
}
}
调用云函数成功后，云函数返回的是一个buffer二进制数据，这个二进制数据我们是没法用来页面显示的，这时候我们在云函数里面调用云存储，通过buffer数据存储和转化为图片之后再把对应二维码图片的存储位置，也就是fileID，返回到小程序端
exports.main = async(event, context) => {
const wxContext = cloud.getWXContext()
const result = await cloud.openapi.wxacode.getUnlimited({
scene: wxContext.OPENID,
// lineColor: {
// 'r': 211,
// 'g': 60,
// 'b': 57
// },
//背景透明
// isHyaline: true
// page:'pages/blog/blog'
})
// console.log(result)
const upload = await cloud.uploadFile({
cloudPath: 'qrcode/' + Date.now() + '-' + Math.random() + '.png',
fileContent: result.buffer
})
return upload.fileID
}
小程序上线之后，在云函数中可以配置pages属性，加入pages设置识别二维码跳转的是blog页面，那么我们在blog页面的onLoad生命周期的options中通过.scene就可以拿到传递过来的scene参数，这个参数的设置可以帮助我们辨别扫码入口的场景。
接下来在小程序端调用云函数，此时能够拿到小程序码的图片
上传图片之后进行自动预览
wx.previewImage({
urls: [res.result],
current: res.result
})
网友评论