zqy233的前端学习笔记小程序开发
专业名词：
openid: 用户唯一标识
session_key: 会话密钥
unionid: 同一个微信开放平台下的用户唯一标识
openid
微信用户唯一认证，为了识别用户，每个用户针对每个公众号或小程序等应用会产生一个安全的openid
微信小程序获取openid
第一步、获取临时登录凭证
login方法获取临时登录凭证code ，再传入该code到服务器
<template>
<view><button @click="weixinLogin">小程序登录</button></view>
</template>
<script>
const uniCloudObj = uniCloud.importObject("weixinLogin")
export default {
methods: {
weixinLogin() {
uni.login({
provider: "weixin",
success: async res => {
console.log(res.code)
const cloudRes = await uniCloudObj.weixinLogin({ code: res.code })
console.log(cloudRes)
},
fail: () => {},
complete: () => {}
})
}
}
}
</script>
<template>
<view><button @click="weixinLogin">小程序登录</button></view>
</template>
<script>
const uniCloudObj = uniCloud.importObject("weixinLogin")
export default {
methods: {
weixinLogin() {
uni.login({
provider: "weixin",
success: async res => {
console.log(res.code)
const cloudRes = await uniCloudObj.weixinLogin({ code: res.code })
console.log(cloudRes)
},
fail: () => {},
complete: () => {}
})
}
}
}
</script>
第二步、服务器端请求jscode2session
创建一个云对象，请求微信小程序jscode2session接口，通过传入四个参数到开发者服务器来获取openid
- appid 小程序appId
- secret 小程序appSecret
- js_code 登录时获取的
临时登录凭证code - grant_type 授权类型，固定值，只需填写
authorization_code
module.exports = {
/**
* 微信登录
* @param {*} event 前端传参
* @param {*} context
* @returns
*/
async weixinLogin(event, context) {
// event为前端传参
console.log("event : ", event)
// 从中取出临时登录凭证code
const {
code
} = event
const appId = "wx2c926655396494ed"
const appSecret = "8c5480d4f1eed7113e3bbad21b2d0142"
// 拼接参数请求微信官方接口，进行登录凭证校验
const res = await uniCloud.httpclient.request(
"https://api.weixin.qq.com/sns/jscode2session?appid=" +
appId +
"&secret=" +
appSecret +
"&js_code=" +
code +
"&grant_type=authorization_code", {
dataType: "json",
}
)
console.log("返回结果", res)
return res.data
},
}
module.exports = {
/**
* 微信登录
* @param {*} event 前端传参
* @param {*} context
* @returns
*/
async weixinLogin(event, context) {
// event为前端传参
console.log("event : ", event)
// 从中取出临时登录凭证code
const {
code
} = event
const appId = "wx2c926655396494ed"
const appSecret = "8c5480d4f1eed7113e3bbad21b2d0142"
// 拼接参数请求微信官方接口，进行登录凭证校验
const res = await uniCloud.httpclient.request(
"https://api.weixin.qq.com/sns/jscode2session?appid=" +
appId +
"&secret=" +
appSecret +
"&js_code=" +
code +
"&grant_type=authorization_code", {
dataType: "json",
}
)
console.log("返回结果", res)
return res.data
},
}
小程序appId和小程序appSecret在微信公众平台>开发>开发管理中查看获取
请求成功
会得到openid和session_key返回值
想得到unionid则需要在微信开放平台进行了同一个开发主体的绑定作用
session_key
https://blog.csdn.net/hbiao68/article/details/102827415
https://developers.weixin.qq.com/community/develop/doc/00088a409fc308b765475fa4351000
unionid
unionid也是用户的标识符，但它与openid不同的是，同一个微信用户，登录同一个开发主体下的多个小程序或公众号时，分配的unionid是一样的
也就是说，开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过unionid来区分用户的唯一性
默认情况下，请求jscode2session会返回openid，但不会返回unionid，除非小程序等应用以及在微信开放平台进行了同一个开发主体的绑定
获取用户信息
注意点：
- 该方法现在只能获取用户信息的昵称和头像，不能获取性别，国家和省市了
- 该方法只能作为单独的点击事件调用
uni.getUserProfile({
desc: "测试",
success: res => {
console.log(res)
}
})
uni.getUserProfile({
desc: "测试",
success: res => {
console.log(res)
}
})
热更新失效
HBuilderX中运行uniapp项目至微信小程序开发者工具，修改HBuilderX中的代码，微信小程序开发者工具视图不热更新
1.设置>通用设置>编辑器>取消勾选修改文件时自动保存
2.关闭热重载
Cannot read property ‘forceUpdate‘ of undefined
微信小程序开发者工具控制台出现上方报错
需要在uniapp项目的manifest.json配置小程序的ID
实现支付功能
todo
图片选择
https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia
uni.chooseMedia
拍摄或从手机相册中选择图片或视频（新版微信小程序需要使用该api取代chooseImage）
sourceType
默认是['album', 'camera']，会触发一个选择框，选择相册还是相机，只有一个参数则不会触发选择框，而是直接调用相册选择或者相机拍摄，所以可以自定义一个更好看的选择框，然后分别指定一个参数
| 值 | 说明 |
|---|---|
| album | 从相册选择 |
| camera | 使用相机拍摄 |
uni.chooseMedia({
count: 9,
mediaType: ["image"],
sourceType: ["album"],
sizeType: ["original", "compressed"],
success(res) {
console.log(res.tempFiles);
},
});
uni.chooseMedia({
count: 9,
mediaType: ["image"],
sourceType: ["album"],
sizeType: ["original", "compressed"],
success(res) {
console.log(res.tempFiles);
},
});
uni.chooseMedia({
count: 9,
mediaType: ["image", "video"],
sourceType: ["camera"],
// 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 30s 之间
maxDuration: 30,
// 使用后置摄像头
camera: "back",
success(res) {
console.log(res.tempFiles);
},
});
uni.chooseMedia({
count: 9,
mediaType: ["image", "video"],
sourceType: ["camera"],
// 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 30s 之间
maxDuration: 30,
// 使用后置摄像头
camera: "back",
success(res) {
console.log(res.tempFiles);
},
});
sizeType是什么
https://developers.weixin.qq.com/community/develop/doc/0006c261a300089771f9a233a56c00
第一个链接来自微信小程序社区，有开发者提了个问题：sizeType: ["original", "compressed"]时，tempFilePaths 就应该是返回 2个路径才对，一个是原图的路径，一个是压缩图的路径，但实际上只返回了一个路径，那请问，这个返回的路径是原图的，还是压缩图的?
上方说法实际上是误解了sizeType配置，sizeType: ["original", "compressed"]是控制用户相册选择图片时，可选择图片的类型（原图、压缩图），并不会同时上传，而是用户可以二选一，如果参数只有一个，则用户则不能选择图片类型
如果sizeType: ["original"]则用户上传图片只能是原图，相册选择时最下方会有一个原图的radio按钮，是置灰的，不可取消
如果sizeType: ["original", "compressed"]，相册选择时最下方会有一个原图的radio按钮，可以取消勾选
如果sizeType: ["compressed"]，相册选择时最下方没有原图的radio按钮，只能上传压缩图
同时获取原图和缩略图
uni.chooseImage 是 uni-app 中对 wx.chooseImage 的包装，并没有做功能上的修改，微信小程序中设计如此 想要同时获取原图和缩略图，可尝试在uni.chooseImage 后用 uni.compressImage 压缩图片并获取压缩后的路径 新版本小程序使用uni.chooseMedia替换uni.chooseImage，但sizeType配置还是一样，所以同理
兼容苹果手机底部黑线区域
padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2
padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2