uniapp微信小程序缩略图

在 UniApp 开发微信小程序中，`onShareAppMessage` 是用于分享功能的一个生命周期钩子，当用户想要通过微信分享内容时，这个函数会被调用。如果你想在分享消息时使用本地图片，你需要按照以下步骤操作： 1. 首先，确保你的应用已经获取了用户的授权，以便访问本地文件。可以使用 `wx.getSetting` 和 `wx.openSetting` 进行权限管理。 2. 存储图片到本地：将从服务器或者其他地方获取的图片数据（Base64 或者文件路径）保存到本地相册，可以使用 `wx.saveImageToPhotosAlbum` 函数。 3. 获取本地图片路径：分享之前，需要得到图片的实际本地路径。你可以将图片保存到 `uni.getImageInfo` 返回的临时目录，然后获取它的路径。 ```javascript uni.getImageInfo({ src: '保存图片的临时路径', // 图片本地路径 success: function (res) { var filePath = res.path; // 图片的完整本地路径 // 使用filePath构建分享卡片 } }) ``` 4. 构建分享信息：在 `onShareAppMessage` 中，设置 `title`, `desc`, 和 `path` 属性，其中 `path` 就是指定的本地图片路径。 ```javascript Page({ onShareAppMessage: function (res) { return { title: '我的分享标题', desc: '分享描述', path: filePath, // 替换为获取到的本地图片路径 imageUrl: filePath, // 可选，指定分享的缩略图 }; }, }); ```

### 实现 UniApp 中微信小程序自定义分享功能 #### 配置 `pages.json` 文件中的分享设置 为了使每个页面都能拥有独立的分享配置，在项目的 `pages.json` 文件中可以为特定页面指定默认的分享参数： ```json { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" }, "onShareAppMessage": { "title": "欢迎来到我们的小程序!", "path": "/pages/index/index?from=share", "imageUrl": "http://example.com/share-image.png" } } ``` 此部分设定适用于该页面的一般情况下的转发行为[^1]。 #### 使用 Vue 全局混入来简化全局分享逻辑 对于希望在整个应用范围内统一处理分享逻辑的情况，可以通过创建一个全局混入的方式来进行操作。这允许开发者在一个地方集中管理所有页面共享的行为模式而无需重复编码。 ```javascript // main.js 或者其他初始化入口文件内加入如下代码片段 import Vue from 'vue'; Vue.mixin({ onShareAppMessage() { return { title: this.$t('default_share_title'), // 假设使用国际化插件获取标题文案 path: `/pages/${this.route}?ref=${encodeURIComponent(this.userId || '')}`, // 动态拼接跳转路径并附带推荐人ID等信息 imageUrl: `${process.env.VUE_APP_API_URL}/api/get-share-thumbnail`, // API接口动态生成缩略图链接 }; } }); ``` 上述做法使得任何未单独重写 `onShareAppMessage` 方法的页面都会自动采用这套默认规则进行消息传递。 #### 页面级覆盖全局分享配置 当某个具体页面需要提供不同于全局默认值的服务时，则可以在对应组件内部重新定义 `onShareAppMessage()` 函数以实现个性化定制化服务。例如在商品详情页根据实际产品特性调整分享内容： ```html <template> <!-- 商品详情模板 --> </template> <script> export default { data () { return { productInfo: null, } }, onLoad(options) { // 加载商品数据... }, methods: { async fetchProductDetails(productId) { try { const response = await uni.request({ url: '/product/' + productId, method: 'GET' }); this.productInfo = response.data; } catch(error){ console.error('Failed to load product details:', error); } } }, onShareAppMessage() { if (!this.productInfo) return; let shareData = { title: `${this.productInfo.name} - 特价仅售 ${this.productInfo.price}`, path: `/pages/product-detail?id=${this.productInfo.id}` }; if (this.productInfo.mainImage) { shareData.imageUrl = this.productInfo.mainImage.url; } return shareData; } }; </script> ``` 这段脚本展示了如何基于当前显示的商品信息构建独特的分享卡片，包括但不限于修改标题文字、目标URL以及附加一张代表性的图像作为封面展示给接收方查看[^2]。 #### 利用 Canvas 绘制复杂图形作为分享素材 如果应用程序中有更复杂的视觉需求——比如想要把多个元素组合成单一画面用于社交平台传播的话，那么就可以考虑借助 HTML5 `<canvas>` 标签的强大绘图能力完成这项工作。通过 JavaScript 控制绘制过程能够灵活地适应不同业务场景的要求。 ```css /* 将 canvas 移出可视区域 */ .hideCanvasView { position: absolute !important; width: 0px !important; height: 0px !important; } .shareCanvas { display:none; } ``` ```html <!-- 在页面结构中预留位置供后续渲染 --> <div class="hideCanvasView"> <canvas id="customShareCard" style="width:750rpx;height:800rpx;"></canvas> </div> ``` ```javascript methods: { generateCustomShareImage() { const ctx = uni.createCanvasContext('customShareCard'); // 设置背景颜色或其他样式属性 ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, 750, 800); // 添加文本描述 ctx.setFontSize(36); ctx.setTextAlign('center'); ctx.fillText(`限时优惠!`, 375, 100); // 插入图片资源 ctx.drawImage('/static/images/logo.png', 100, 200, 550, 300); // ... 更多绘画指令 ... // 发起绘制命令并将结果保存至临时存储区以便下一步调用 ctx.draw(true, () => { setTimeout(() => { uni.canvasToTempFilePath({ x: 0, y: 0, width: 750, height: 800, destWidth: 750 * 2, destHeight: 800 * 2, canvasId: 'customShareCard', success: ({ tempFilePath }) => { // 更新状态或触发事件通知外部更新分享配置里的 imageUrl 字段指向新生成的文件路径 this.generatedImageUrl = tempFilePath; } }) }, 20) }); } }, watch: { generatedImageUrl(newValue) { if (newValue && typeof newValue === 'string') { Object.assign(this.onShareAppMessage(), { imageUrl: newValue }); } } } ``` 这里介绍了一种利用 Canvas 创建合成图像的方法，并将其转换为可被分享使用的静态资源形式。这种方式特别适合那些希望通过编程手段控制最终呈现效果的应用场合[^4]。