微信小程序直播带货教程
小程序直播组件接入指引
直播组件状态获取
developers.weixin.qq.com/miniprogram…
微信官方文档-小程序直播
developers.weixin.qq.com/miniprogram…
微信开放社区
developers.weixin.qq.com/community/b…
微信公众平台 - 设置-第三方设置- 插件管理-小程序直播组件
mp.weixin.qq.com/wxamp/basic…
微信小程序通过高德api获取当前详细的地理位置信息
解决微信小程序报错getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json
小程序登录流程
<template><button class="button phone" v-if="isGreen" :disabled="!isGreen" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber"> <text class="icon icon-phone"></text> 微信一键登录 </button></template><script setup>
import { ref } from 'vue'
let livePlayer = requirePlugin('live-player-plugin')
import { postMyLoginWxMinAPI } from '@/services/myLogin'
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'
onLaunch(async (e) => {
roomId.value = e?.room_id || '0'
const code = await getJsCode() // 静默登录
uni.showToast({
title: roomId.value,
duration: 2000,
})
getOpenId(code)
// const res2 = await postMyLoginWxMinAPI({ code })
// console.log(res2)
const memberStore = useMemberStore()
memberStore.setProfile({
nickname: '001', avatar: '', user_id: 1
})
})
function getJsCode() {
return new Promise((resolve, reject) => {
uni.login({
success(res) {
resolve(res.code)
},
fail: (err) => {
reject(err)
},
})
})
}
function getOpenId(js_code) {
return new Promise((resolve, reject) => {
uni.request({
url: `https://api.weixin.qq.com/sns/jscode2session`,
data: {
appid: 'wx4f59302fc',
secret: '607823378414fc8fec4e84',
js_code: js_code,
grant_type: 'authorization_code',
},
success: (res) => {
resolve(res.data.openid)
console.log(res)
},
fail(err) {
reject(err)
},
})
})
}
function onGetphonenumber = async (ev) => { console.log(ev, 'ev'); const encryptedData = ev.detail.encryptedData const iv = ev.detail.iv if (!iv) return const res = await loginAPI({
code, encryptedData, iv
}) if (res.success === true) { // console.log(res.module.userInfo); loginSuccess(res.module.userInfo) uni.getUserInfo({ provider: 'weixin', success: function (infoRes) { // 获取用户基本信息成功 let userInfo = infoRes.userInfo; uni.setStorageSync('avatar', userInfo.avatarUrl); memberStore.setProfile({ ...res.module.userInfo, avatar: userInfo.avatarUrl, // name: userInfo.nickName, }) } }); }}
小程序支付流程
微信小程序开发学习记录（一）：直播功能
等比例裁剪图片
const MAX_WIDTH = 300
const MAX_HEIGHT = 300
const MIME_TYPE = 'image/jpeg'
const QUALITY = 0.7
const customRequestMinio1 = (data) => {
loading1.value = true
let w = 0,
h = 0
let reader = new FileReader()
let flag = false
reader.readAsDataURL(data.file)
reader.onload = () => {
const image = new Image()
image.src = reader.result
image.onload = () => {
const [newWidth, newHeight] = calculateSize(image, MAX_WIDTH, MAX_HEIGHT)
const canvas = document.createElement('canvas')
canvas.width = newWidth
canvas.height = newHeight
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, newWidth, newHeight)
canvas.toBlob(
(blob) => {
const fileData = new FormData()
const file = new File([blob], 'icon.png', { type: 'image/png' })
fileData.append('file', file)
fileApi
.fileUploadMinioReturnUrl(fileData)
.then((res) => {
formData.value.goodsUrl = res
})
.finally(() => {
loading1.value = false
})
},
MIME_TYPE,
QUALITY
)
return false
w = image.width
h = image.height
if (w > 300 || h > 300) {
loading1.value = false
return message.error('图片尺寸错误，只能上传宽高小于300px*300px的图片')
} else {
const fileData = new FormData()
fileData.append('file', data.file)
fileApi
.fileUploadMinioReturnUrl(fileData)
.then((res) => {
// console.log(res)
formData.value.goodsUrl = res
})
.finally(() => {
loading1.value = false
})
}
}
}
}
function calculateSize(img, maxWidth, maxHeight) {
let width = img.width
let height = img.height
console.log(width)
if (width > height) {
// 600 300 => 300 150
if (width > maxWidth) {
height = Math.round((height * maxWidth) / width) - 1
width = maxWidth
}
} else {
if (height > maxHeight) {
width = Math.round((width * maxHeight) / height) - 1
height = maxHeight
}
}
return [width, height]
}
uni.connectSocket
onLoad(e) {
this.goodsId = e.id
// this.open()
uni.connectSocket({
url: 'wss://www.meitian.cn/websocket/d5533',
header: {
'content-type': 'application/json', },
success(res) {
console.log('成功', res)
},
})
uni.onSocketOpen(function (res) {
console.log('WebSocket连接已打开！')
})
let _that = this
uni.onSocketMessage(function (res) {
// console.log('收到服务器内容')
_that.navList[_that.tabCurrentIndex].params.current = 1
_that.navList[_that.tabCurrentIndex].dataList = []
_that.navList[_that.tabCurrentIndex].loadStatus = 'more'
_that.navList[_that.tabCurrentIndex].whetherEmpty = false
_that.getData()
})
},
下拉刷新, 节点信息
button按钮 去除样式
<button plain="true" class="avatar-btn" @click="getUserProfile">
获取昵称和头像 <text class="label">立即登录</text>
</button>
button { background-color: transparent; } button::after { border: 0; border: none; }
获取用户头像昵称-昵称填写获取不到原因
需要将 input 组件 type 的值设置为 nickname，当用户在此 input 进行输入时，键盘上方会展示微信昵称。
从基础库2.24.4版本起，在onBlur事件触发时，微信将异步对用户输入的内容进行安全监测，若未通过安全监测，
微信将清空用户输入的内容，建议开发者通过 form 中form-type 为submit的button 组件收集用户输入的内容。
小程序更新版本
const updateManager = uni.getUpdateManager()
if (updateManager) {
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
})
updateManager.onUpdateReady(function () {
uni.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success(res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
},
})
})
}
图片压缩上传
const MAX_WIDTH = 300 // 设置压缩后的宽度
const MAX_HEIGHT = 300
const MIME_TYPE = 'image/jpeg'
const QUALITY = 0.7
const customRequestMinio1 = (data) => {
loading1.value = true
let w = 0,
h = 0
let reader = new FileReader()
let flag = false
reader.readAsDataURL(data.file)
reader.onload = () => {
const image = new Image()
image.src = reader.result
image.onload = () => {
const [newWidth, newHeight] = calculateSize(image, MAX_WIDTH, MAX_HEIGHT)
const canvas = document.createElement('canvas')
canvas.width = newWidth
canvas.height = newHeight
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, newWidth, newHeight)
canvas.toBlob(
(blob) => {
const fileData = new FormData()
const file = new File([blob], 'icon.png', { type: 'image/png' })
fileData.append('file', file)
fileApi
.fileUploadMinioReturnUrl(fileData)
.then((res) => {
formData.value.goodsUrl = res
})
.finally(() => {
loading1.value = false
})
},
MIME_TYPE,
QUALITY
)
return false // 直接压缩下面代码就不需要
w = image.width
h = image.height
if (w > 300 || h > 300) {
loading1.value = false
return message.error('图片尺寸错误，只能上传宽高小于300px*300px的图片')
} else {
// 上传图片
}
}
}
}
function calculateSize(img, maxWidth, maxHeight) {
let width = img.width
let height = img.height
console.log(width)
if (width > height) { // 600 300 => 300 150
if (width > maxWidth) {
height = Math.round((height * maxWidth) / width) - 1
width = maxWidth
}
} else {
if (height > maxHeight) {
width = Math.round((width * maxHeight) / height) - 1
height = maxHeight
}
}
return [width, height]
}
