- jssdk分享朋友圈功能配置title无效?
//h5-weixin-sdk.js // 调用后端接口,获得 JSSDK 初始化所需的签名 import jweixin from 'weixin-js-sdk'; import AuthUtil from '@/api/auth'; async init() { const url = window.location.href.split('#')[0];//location.origin; const { code, data } = await AuthUtil.createWeixinMpJsapiSignature(url); if (code === 0) { jweixin.config({ debug: false,//true, appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: [ 'chooseWXPay', 'openLocation', 'getLocation', 'updateAppMessageShareData', 'updateTimelineShareData', 'scanQRCode', ], // TODO :后续可以设置更多权限; openTagList: data.openTagList, }); // 监听结果 configSuccess = true; } else { console.log('请求 JSSDK 配置失败,错误码:', code); } jweixin.error((err) => { configSuccess = false; console.error('微信 JSSDK 初始化失败', err); }); jweixin.ready(() => { if (configSuccess) { console.log('微信 JSSDK 初始化成功'); } }); } updateShareInfo(data, callback = null) { const shareData = { title: data.title, desc: data.desc, link: data.link, imgUrl: data.image, success: function (res) { if (callback) { callback(res); } // 分享后的一些操作,比如分享统计等等 }, cancel: function (res) {}, fail:function(res){} }; jweixin.updateTimelineShareData(shareData); jweixin.updateAppMessageShareData(shareData); } //share-page // #ifdef H5 import $wxsdk from '@/utils/h5-weixin-sdk'; // #endif // 新增:设置页面meta标签的函数 const setWechatShareMeta = () => { // #ifdef H5 // 只在H5环境下执行 const metaTags = [ // 微信分享相关meta { property: 'og:title', content: '测试分享标题' }, // { property: 'og:image', content: `${staticUrl}/static/invite/share.png` }, { property: 'og:url', content: `${h5Url}` }, { property: 'og:type', content: 'website' }, // 微信特定meta { name: 'wechat:title', content: '测试分享标题' }, // { name: 'wechat:image', content: `${staticUrl}/static/invite/share.png` }, // QQ分享相关meta { itemprop: 'name', content: '测试分享标题' }, // { itemprop: 'image', content: `${staticUrl}/static/invite/share.png` }, ]; // 动态创建或更新meta标签 metaTags.forEach(tag => { const selector = tag.property ? `meta[property="${tag.property}"]` : tag.itemprop ? `meta[itemprop="${tag.itemprop}"]` : `meta[name="${tag.name}"]`; let meta = document.querySelector(selector); if (meta) { // 更新现有meta标签 meta.setAttribute('content', tag.content); } else { // 创建新的meta标签 meta = document.createElement('meta'); if (tag.property) meta.setAttribute('property', tag.property); if (tag.name) meta.setAttribute('name', tag.name); if (tag.itemprop) meta.setAttribute('itemprop', tag.itemprop); meta.setAttribute('content', tag.content); document.head.appendChild(meta); } }); // 设置页面标题(微信有时也会读取这个) document.title = '测试分享标题'; // #endif }; const setShareTimeLine = ()=>{ const shareInfo = { title: '测试分享标题', // 分享标题 desc: '', // 描述 image: '', // 分享图片 path: '', // 分享页面+参数 link: `${h5Url}`, // 分享Url+参数 query: '', // 分享参数 forward: {}, // 转发所需参数 }; // #ifdef H5 // 设置meta标签 setWechatShareMeta(); // 给足够的时间让微信读取meta信息 setTimeout(() => { $wxsdk.updateShareInfo(shareInfo); }, 300); // #endif } onLoad((options) => { // 获取分享码 if(options.inviteCode){ // 保存邀请码 uni.setStorageSync('inviteCode',options.inviteCode); sheep.$store('user').inviteCode = options.inviteCode; } }); onMounted(async ()=>{ // #ifdef H5 $wxsdk.init(); await nextTick(); setShareTimeLine(); // #endif }) 我开启调试后,发现jssdk分享功能的配置都正常了,然后关闭调试发布到生产环境后,发现在调用分享朋友圈功能时,弹出的页面上只有一个输入框和分享路径Link,没有默认的分享卡片。 预期的分享朋友圈弹出来的样式: [图片] 但是现在在线上测试的样子: [图片] 默认的那个分享卡片不见了,被替换成了配置的link参数。这是为什么,请问如何解决?
12-03 - wx.getFileSystemManager在鸿蒙系统上,经常会出现1300202错误?
const baseFilePath = `${wx.env.USER_DATA_PATH}/testStorge.json`; const storgSetFile = function (params) { var fs = wx.getFileSystemManager(); const txtSize = getTxtSize(JSON.stringify(params)); //首先获取需要写入的数据内容大小。ps:基本上数据内容都很小,不会超过100k,都是json格式数据 console.log('需要写入的文件大小:',txtSize) return new Promise(function(resolve, reject) { fs.access({ path: baseFilePath, success(res) { console.log('查询缓存文件成功--------') //正常流程,忽略 ... }, fail(res){ console.log('查询缓存文件失败--------') console.log('查询缓存文件错认信息',res) console.log('错认类型码',res.errno) ensureDirectoryForFile(baseFilePath).then(() => { createNewFile(baseFilePath, params,resolve); }).catch(err => { resolve({errCode: -1, msg: 'error', data: err}) }); }, }) }) } const getTxtSize = function(jsonString) { const charCount = jsonString.length; const encoder = new TextEncoder(); const utf8Size = encoder.encode(jsonString).length; return formatBytes(utf8Size); } function ensureDirectoryForFile(filePath) { return new Promise((resolve, reject) => { console.log('ensureDirectoryForFile 被调用,filePath:', filePath); const fs = wx.getFileSystemManager(); // 更安全的路径提取逻辑 let dirPath; try { // 确保 filePath 是字符串 if (typeof filePath !== 'string') { console.error('filePath 不是字符串:', filePath); reject(new Error('filePath 必须是字符串')); return; } // 从完整文件路径中提取目录路径 const lastSlashIndex = filePath.lastIndexOf('/'); if (lastSlashIndex !== -1) { dirPath = filePath.substring(0, lastSlashIndex); } else { // 如果没有斜杠,使用默认的用户数据路径 dirPath = wx.env.USER_DATA_PATH; } // 确保 dirPath 不为空 if (!dirPath) { dirPath = wx.env.USER_DATA_PATH; } } catch (error) { console.error('提取目录路径时出错:', error); dirPath = wx.env.USER_DATA_PATH; } // 最终验证和备用方案 if (!dirPath || typeof dirPath !== 'string') { console.error('最终 dirPath 无效,使用默认路径'); dirPath = wx.env.USER_DATA_PATH; } console.log('最终使用的目录路径:', dirPath); // 检查目录是否已经存在 fs.access({ path: dirPath, success: () => { console.log('目录已存在:', dirPath); resolve(); }, fail: () => { // 目录不存在,需要创建 fs.mkdir({ dirPath: dirPath, // 确保使用正确的参数名 recursive: true, success: () => { console.log('目录创建成功:', dirPath); resolve(); }, fail: (err) => { console.error('创建目录失败,详细错误:', JSON.stringify(err)); if (err.errMsg && err.errMsg.includes('already exists')) { console.log('目录已存在(通过失败信息检测):', dirPath); resolve(); } else { console.error('创建目录失败:', err); // 如果目录创建失败,尝试直接写入文件 console.log('尝试直接进行文件操作,忽略目录创建错误'); resolve(); } } }); } }); }); } function createNewFile(filePath, params, resolve) { const fs = wx.getFileSystemManager(); var main = {...params}; fs.writeFile({ filePath: filePath, data: JSON.stringify(main), encoding: 'utf8', success(res) { resolve(res); }, fail(res) { console.log('查询文件失败后,尝试写入新文件,写入缓存文件失败--------'); console.log('写入失败错误内容', JSON.stringify(res)); handleWriteFileError(res, resolve); } }); } // 新增辅助函数:统一处理写入文件错误 function handleWriteFileError(res, resolve) { if (res.errno == '1300202') { console.log('准备获取微信储存空间大小'); wx.getStorageInfo({ success: (succ) => { console.log('获取微信储存空间成功-------'); console.log(JSON.stringify(succ)); const remainingSpace = succ.limitSize - succ.currentSize; console.log(`剩余存储空间: ${remainingSpace}KB`); wx.showToast({ title: `当前微信存储空间大小为${remainingSpace/1024}MB,请先清理微信缓存`, icon: 'none', mask: true }); resolve({errCode: -1, msg: 'error', data: res}); }, fail(err) { wx.showToast({ title: '存储空间不足,或文件大小超出上限', icon: 'none', mask: true }); console.log(`获取存储空间失败`, JSON.stringify(err)); resolve({errCode: -1, msg: 'error', data: res}); } }); } else { resolve({errCode: -1, msg: 'error', data: res}); } } 前面为封装的wx.getFileSystemManager组件内容 截图为用户鸿蒙系统下,运行到文件缓存组件时,打印的日志信息。可以看出,在“fs.writeFile()”写入新文件时,会返回1300202 错误码,此时获取微信储存空间大小,得到接近10M的返回值,那么问题就来了,为什么在空间足够的情况下,写入新的缓存文件会提示空间不足的错误?这SB问题老是在鸿蒙系统上反反复复的出现,其他手机系统上倒是没反馈。不是,鸿蒙这系统怎么这么多问题啊,有没有靠谱的来把这个问题解决啦,客户经常遇到这个问题(目前我们给用户的解决方案是:先手动清除微信文件缓存,再重启小程序),每次这么搞真的是烦不胜烦 [图片]
11-21 - wx.getFileSystemManager这个api关于文件缓存读写大小限制问题?
近期遇到线上用户反馈小程序某个业务流程卡死,经过本人排除,发现问题出现在wx.getFileSystemManager文件管理器这个模块没有正常完成读写。通过和用户调试(真的是幸运,用户竟然没骂娘不说,还能耐着性子帮我做联调),发现问题出现在设置文件缓存这个方法内,再细致调试,发现在写入文件时,错误码为‘1300202’,查询文档发现是储存空间不够了,通过“wx.getStorageInfo”获取用户的储存空间大小为10M。我当时就纳闷了,wx.getFileSystemManager这个api文档上不是说的上限为100M嘛,怎么又只有10M了?去问AI,发现还有个“沙盒环境”这个玩意,每个小程序只分配了10M的存储空间大小。那我这样需要存储比较大的数据量的需求场景应该如何解决这个问题呢(其实后面和用户调试,数据量也没有想象中那么大,转换字符串长度发现也不过就几百kb至1M不到)。目前我让用户自己清理了微信后,能够正常读写文件缓存了。所以这个wx.getFileSystemManager文件管理器的api到底能不能读写100M以内的缓存数据?这个“沙盒环境”10M存储空间的限制有没有方案能绕过?如果无法绕过的话,那你wx.getFileSystemManager这个api和wx.setStorage这个api的优势又是什么? const storgSetFile = function (params) { var fs = wx.getFileSystemManager(); const filePath = `${wx.env.USER_DATA_PATH}/test.json`; return new Promise(function(resolve, reject) { fs.access({ path: filePath, success(res) { console.log('查询缓存文件成功--------') fs.readFile({ filePath: filePath, encoding: 'utf8', position: 0, success(res) { //... }, fail(res) { console.log('读取缓存文件失败--------') resolve({errCode:-1,msg:'error',data:res}) } }) }, fail(res){ console.log('查询缓存文件失败--------') console.log('错认类型码',res.errno) if(res.errno=='1300002'){ fs.writeFile({ filePath: filePath, data: JSON.stringify(params), encoding: 'utf8', success(res) { resolve(res) }, fail(res) { console.log('查询文件失败后,尝试写入新文件,写入缓存文件失败--------') console.log('写入失败错误内容',JSON.stringify(res)) if(res.errno == '1300202'){ console.log('准备获取微信储存空间大小') wx.getStorageInfo({ success: (succ) => { console.log('获取微信储存空间成功-------') console.log(JSON.stringify(succ)) // 计算剩余空间 (单位: KB) const remainingSpace = succ.limitSize - succ.currentSize; console.log(`剩余存储空间: ${remainingSpace}KB`); resolve({errCode:-1,msg:'error',data:res}) }, fail(err){ console.log(`获取存储空间失败`,JSON.stringify(err)); resolve({errCode:-1,msg:'error',data:res}) } }); }else{ resolve({errCode:-1,msg:'error',data:res}) } } }) } }, }) }) }
08-26 - wx.canvasToTempFilePath在鸿蒙系统5.1.0版本上转换出来的图片是黑屏?
... //前面的canvas绘制图片流程是正常的(将canvas节点展示到可视区域调试过了) ctx.draw(false, () => { setTimeout(() => { _this.generateImage() },3000) }) //核心转换方法 generateImage(){ let _this = this; wx.nextTick(() => { wx.canvasToTempFilePath({ canvasId: 'firstCanvas', fileType: 'jpg', // 改用JPG格式 // quality: 0.8, // 适当降低质量 x:0, y:0, destWidth: _this.data.cw, // 明确设置输出尺寸 destHeight: _this.data.ch, success: async (res) => { ...// res.tempFilePath;这里返回的图片上传到后台后,回显发现是个纯黑色底图片,什么信息都没有。这个问题目前只出现在鸿蒙系统的手机上 //用户反馈,问题出现在鸿蒙系统的最新版本微信上 }, }, _this) }) } 这个问题不止一个用户遇到了,目前反馈到我这里的有两个用户,且操作系统都是鸿蒙5.1.0这个版本号,微信版本号都为:1.0.9。用户反馈都是在升级了微信最新版本后遇到这个问题。其中有一个客户已经提交了日志,但是智能客服一直不回复(微信这智能客服功能回复也太慢了) 后续:当前解决方案,重构成canvas2d; async toWaterImg(main){ const tempFilePath = main.file; const imgInfo = await this.getImageInfo(tempFilePath); const MAX_SIZE = 600; let canvasWidth = imgInfo.width; let canvasHeight = imgInfo.height; if (canvasWidth > MAX_SIZE || canvasHeight > MAX_SIZE) { const ratio = Math.min(MAX_SIZE / canvasWidth, MAX_SIZE / canvasHeight); canvasWidth = Math.floor(canvasWidth * ratio); canvasHeight = Math.floor(canvasHeight * ratio); } await new Promise(resolve => { this.setData({ cw: canvasWidth, ch: canvasHeight }, resolve); }); //水印流程 await this.drawFullImage(tempFilePath); //转换成base64文件 const dataUrl = canvas.toDataURL('image/jpg'); //再将base64转换成本地文件路径 const tempPath = await this.base64ToTempPath(dataUrl); //压缩流程,如果不需要压缩的,可以直接前面tempPath上传 const nTpath = await this.testCompress(tempPath); // wx.getFileSystemManager().getFileInfo({ // filePath: nTpath, // success: (info) => { // const sizeKB = (info.size / 1024).toFixed(2); // console.log(`文件大小: ${sizeKB} KB`); // } // }); //上传流程 await this.addFile(nTpath); //销毁实例 await this.destoryCvs(); }, // 获取图片信息 getImageInfo(filePath) { return new Promise((resolve, reject) => { wx.getImageInfo({ src: filePath, success: (res) => resolve(res), fail: (err) => reject(err) }); }); }, //base64转换为本地文件路径 base64ToTempPath(base64Data) { return new Promise((resolve, reject) => { // 1. 提取纯Base64数据(移除头部信息) const base64Str = base64Data.replace(/^data:image\/\w+;base64,/, ''); // 2. 将Base64转换为ArrayBuffer const arrayBuffer = wx.base64ToArrayBuffer(base64Str); // 3. 生成唯一文件名 const filePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.png`; console.log(filePath) // 4. 写入文件 wx.getFileSystemManager().writeFile({ filePath, data: arrayBuffer, encoding: 'binary', success: () => resolve(filePath), fail: (err) => reject('写入失败:' + err.errMsg) }); }) },
08-12 - wx.canvasToTempFilePath在鸿蒙系统5.1.0版本上转换出来的图片是黑色?
<canvas class="myCanvas" style="width:{{cw}}px; height: {{ch}}px;" canvas-id="firstCanvas"></canvas> ... ctx.draw(false, () => { setTimeout(() => { _this.generateImage() },3000) }) //前面的canvas绘制图片流程是正常的(将canvas节点展示到可视区域调试过了) //核心转换方法 generateImage(){ let _this = this; wx.nextTick(() => { wx.canvasToTempFilePath({ canvasId: 'firstCanvas', fileType: 'jpg', // 改用JPG格式 // quality: 0.8, // 适当降低质量 x:0, y:0, destWidth: _this.data.cw, // 明确设置输出尺寸 destHeight: _this.data.ch, success: async (res) => { ...// res.tempFilePath;这里返回的图片上传到后台后,回显发现是个纯黑色底图片,什么信息都没有。这个问题目前只出现在鸿蒙系统的手机上 //用户反馈,问题出现在鸿蒙系统的最新版本微信上 }, }, _this) }) } 这个问题不止一个用户遇到了,目前反馈到我这里的有两个用户,且操作系统都是鸿蒙5.1.0这个版本号,微信版本号为:1.0.9
08-12 - wx.canvasToTempFilePath在鸿蒙系统手机上,转换出来的图片黑屏?
... //前面的canvas绘制图片流程是正常的(将canvas节点展示到可视区域调试过了) //核心转换方法 wx.nextTick(() => { wx.canvasToTempFilePath({ canvasId: 'firstCanvas', fileType: 'jpg', // 改用JPG格式 // quality: 0.8, // 适当降低质量 x:0, y:0, destWidth: _this.data.cw, // 明确设置输出尺寸 destHeight: _this.data.ch, success: async (res) => { ...// res.tempFilePath;这里返回的图片上传到后台后,回显发现是个纯黑色底图片,什么信息都没有。这个问题目前只出现在鸿蒙系统的手机上 //用户反馈,问题出现在鸿蒙系统的最新版本微信上 }, }, _this) })
08-11 - 小程序页面的fixed布局在华为P30上会错乱(横屏返回竖屏后出现)?
如题描述,在一个页面内,底部fixed布局定位了一组操作按钮,在跳转到横屏页面完成流程后,返回到当前竖屏页面,会发现底部那组按钮变得很长,超出屏幕范围了,fixed的模态框demo也会变宽(原样式未90%宽度),只能显示一部分 未跳转前,正常样式: [图片] 跳转到横屏页面后,返回到竖屏页面,样式错乱(用户手机视频截图): [图片] 同样的还有一个模态输入框弹窗样式也出现问题,正常情况下: [图片] 用户出现问题的模态框样式: [图片] wxml: 驳回 通过 wxss: .form_sys{ /* margin-bottom: 30rpx; */ position: fixed; left: 30rpx; right: 30rpx; margin: auto; bottom: 50rpx; z-index: 8; } .form_sys button{ width: 100% !important; height: 90rpx; font-size: 32rpx; font-weight: 500; /* color: #FFFFFF; */ } .form_sys span{ width: 45%; } 补充一条:用户反馈大半年前没有这种情况。这半年来,页面样式并未做调整,只是因为版本迭代,基础库有相应升级,目前调试基础库版本为3.7.3。不知道这个有没有影响。 现在的解决尝试(请教DS给出的方案): 1.给原竖屏页面json添加pageOrientation:portrait;2.在原竖屏页面onshow生命周期内增加:wx.onWindowResize((res) => { if (res.deviceOrientation === 'portrait') { this.setData({ isPortrait: true }); // 触发重新布局 this.handleLayout(); } }) 但是由于没有发布正式补丁,本地也无法重现,所以也不知道这两个方案有没有用处。特来请教一下有没有同样遇到这个问题,是如何解决的
05-13 - 小程序体验版调用startLocationUpdate这个API会报错?
如题,发布了体验版,在调用startLocationUpdate这个api的时候,fail信息返回的是:errMsg:"startLocationUpdate:fail privacy permission is not authorized" errno:"104"。 wx.startLocationUpdate({ success(res) { ... }, fail(res) { console.log(res)//就是这里提示的 }}) 微信后台的那个用户隐私采集的申请也是OK的,因为之前线上的时候就遇到这个问题导致定位接口用不了,申请通过后就正常了,今天发现体验版包这个错误。线上正式版目前没问题,能正常使用
2023-08-16 - 小程序内调用组件功能(如蓝牙识别,nfc读取)后,形成闭包并且无法获取this.data中的值?
rt,应用环境如下:进入页面后调用api实例化nfc对象,代码截图:[图片] 红圈内的proofA()方法是nfc读卡流程,里面有大量异步回调流程,其中在成功识别nfc信息后,会setData()页面data中的属性值,如:setData({ code:...// }) 在proofA()方法内部打印that.data.code值正常,说明set流程有效。但是在onUnload()内部获取this.data.code就是空!我猜测是因为proofA()方法内部由于回调嵌套太深,导致形成了一个闭包环境,setData()流程外部无法获取。请问如何解决这个问题?
2023-07-07 - wx.downloadFile下载文件之后能不能够引入到页面内?
为了解决外部文件过大导致主包超标的问题,想通过wx.downloadFile 这个api下载外部文件,然后保存到本地文件中,再通过wx.getFileSystemManager 来读取并引入到页面内。 大致实现流程如下: [图片] 然后页面就报错了: [图片] 。如何解决呢?或者说,目前小程序支不支持这种方式?
2022-12-06