uniapp实现分享朋友圈九宫格

admin 2026年02月19日 02:54 101 0

uniapp实现朋友圈九宫格分享需完成图片拼接与分享调用，首先获取本地或网络图片资源，通过canvas绘制3x3网格：统一图片尺寸（如300x300），按行列顺序绘制并居中裁剪，避免变形，随后将canvas转临时图片文件（uni.canvasToTempFilePath），最后调用分享接口（如uni.share或微信JS-SDK），设置分享图片为生成的九宫格图，同时配置分享标题、链接等参数，需注意图片跨域处理、不同分辨率设备适配及分享权限校验，确保兼容iOS/Android及小程序环境。

Uniapp 实现朋友圈九宫格分享功能：从思路到完整代码

需求分析与实现思路

朋友圈九宫格分享是常见的社交场景,用户可以选择多张图片（通常为9张），生成一张包含所有图片的拼接图，并分享至朋友圈，在 Uniapp 中实现该功能，核心步骤包括：

图片选择：允许用户从相册或相机选择多张图片（限制9张）；
图片处理：将多张图片按九宫格布局拼接成一张单图；
分享调用：生成临时图片路径，调用原生分享接口或引导用户保存后手动分享。

技术关键点：使用 canvas 绘制九宫格图片、处理图片跨域与压缩、适配不同平台（微信小程序、H5、App）的分享逻辑，在实际开发中，还需考虑性能优化、图片压缩比例、不同设备屏幕适配等问题。

完整实现步骤

环境准备

确保项目已安装 Uniapp 基础框架，支持 canvas 组件（H5 端需注意浏览器兼容性，小程序端需使用 uni.canvasToTempFilePath），不同平台对 canvas 的支持程度不同，建议：

微信小程序：使用 uni.createCanvasContext 和 uni.canvasToTempFilePath
H5 端：需考虑浏览器兼容性，可使用原生 canvas API
App 端：可直接使用 uni-app 提供的 canvas 接口

建议在项目中配置好必要的权限,如相册访问权限等。

页面布局：选择图片与预览

首先创建一个页面,包含"选择图片"按钮和图片预览区域，支持删除已选图片，以下是完整的实现代码：

<template>
  <view class="container">
    <view class="header">
      <button @click="chooseImage" type="primary">选择图片（最多9张）</button>
      <text class="image-count">已选：{{imageList.length}}/9</text>
    </view>
&lt;view class="preview-list"&gt;
  &lt;view v-for="(item, index) in imageList" :key="index" class="preview-item"&gt;
    &lt;image :src="item" mode="aspectFill" class="preview-image"&gt;&lt;/image&gt;
    &lt;text @click="deleteImage(index)" class="delete-btn"&gt;×&lt;/text&gt;
  &lt;/view&gt;
  &lt;view v-if="imageList.length &lt; 9" class="add-item" @click="chooseImage"&gt;
    &lt;text class="add-icon"&gt;+&lt;/text&gt;
  &lt;/view&gt;
&lt;/view&gt;
&lt;button @click="generateGrid" type="primary" :disabled="imageList.length &lt; 1"&gt;
  生成九宫格图片
&lt;/button&gt;
&lt;!-- 隐藏的canvas元素 --&gt;
&lt;canvas 
  canvas-id="gridCanvas" 
  style="position: absolute; top: -9999px; left: -9999px;" 
  :width="canvasWidth" 
  :height="canvasHeight"
&gt;&lt;/canvas&gt;
</view>
</template>
<script>
export default {
data() {
return {
imageList: [], // 已选图片路径数组
canvasWidth: 600, // 画布宽度（可根据需求调整）
canvasHeight: 600, // 画布高度（正方形）
gridSize: 3, // 九宫格3x3
maxImages: 9, // 最大图片数量
};
},
methods: {
// 选择图片
chooseImage() {
const remainingCount = this.maxImages - this.imageList.length;
uni.chooseImage({
count: remainingCount > 0 ? remainingCount : 0,
sizeType: ['compressed'], // 压缩图
sourceType: ['album', 'camera'],
success: (res) => {
// 防止重复选择
const newImages = res.tempFilePaths.filter(path => !this.imageList.includes(path));
this.imageList = [...this.imageList, ...newImages];
      // 显示提示
      uni.showToast({
        title: `成功选择${newImages.length}张图片`,
        icon: 'success',
        duration: 1500
      });
    },
    fail: (err) => {
      console.error('选择图片失败:', err);
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      });
    }
  });
},
// 删除图片
deleteImage(index) {
  this.imageList.splice(index, 1);
},
// 生成九宫格图片
generateGrid() {
  if (this.imageList.length === 0) {
    uni.showToast({
      title: '请先选择图片',
      icon: 'none'
    });
    return;
  }
  uni.showLoading({
    title: '生成中...'
  });
  // 调用canvas绘制方法
  this.drawGridImages();
}
}
};
</script>
<style>
.container {
padding: 20px;
min-height: 100vh;
background-color: #f5f5f5;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.image-count {
color: #666;
font-size: 14px;
}
.preview-list {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.preview-item {
position: relative;
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.preview-image {
width: 100%;
height: 100%;
}
.delete-btn {
position: absolute;
top: -5px;
right: -5px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: #ff4d4f;
color: #fff;
border-radius: 50%;
font-size: 12px;
z-index: 10;
}
.add-item {
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px dashed #ddd;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
.add-icon {
font-size: 40px;
color: #ccc;
}
button {
width: 100%;
margin-top: 20px;
}
</style>

核心：Canvas 绘制九宫格图片

使用 canvas 将多张图片绘制成九宫格，需注意以下关键点：

图片加载：canvas 绘
标签： #朋友圈九宫格