ビジネスシーン

2ラウンド課金ビジネスでは、ユーザーが課金完了後、注文詳細ページに注文関連情報が表示され、ユーザーが共有ボタンをクリックしてWeChatアプレットの共有メニューを呼び出すと、生成された画像ポスターを閲覧することができます。 WeChat の友人と共有したり、ローカルにダウンロードしたりすることができ、友人は QR コードのポスターをスキャンしてグループに参加し、割引を受けることができます。

使用シナリオと機能: Wechat アプレットはポスター写真を生成し、友人と共有したり、写真をダウンロードしたりできます。

使用テクノロジー: Taro vue vant Canvas

実現レンダリング

主要なステップを分割

1. ポスター共有コンポーネントposter-share.vueをカプセル化します。

2. キャンバスを使用して絵を描き、その絵の上に背景画像、料金、QRコードなどの情報を描画します。料金とQRコードは動的に取得されます。

3. ローカルキャッシュイメージの生成

4. WeChat共有機能を呼び出して共有およびダウンロード機能を実現します

主要な手順が整ったので、始めましょう。

コアコードの実装

1. テンプレート部分

絵を描くにはキャンバス dom が必要で、生成された絵を保存するには dom が必要です。

Q: CanvasId を動的に生成する必要があるのはなぜですか?

回答: 1 ページで複数のコンポーネントを使用することによって発生する CanvasId の重複の問題を回避します。

<template>
  <div class="poster-share__content">
    <!-- canvas生成的海报图片 -->
    <img
      v-if="posterImg"
      class="poster-share__content--img"
      mode="aspectFit"
      :src="posterImg"
    >
    <!-- 分享海报canvas绘制部分 -->
    <canvas
      class="poster-share__content--cvs"
      :canvas-id="canvasId"
    ></canvas>
  </div>
</template>

2.スタイル部分

このビジネスシナリオでは、ユーザーにはキャンバスが表示されませんが、キャンバスの表示がなしに設定されている場合、描画はできず、次のエラーが報告され、描画に失敗します。

実装方法：位置決めメソッドを使用して、キャンバスを表示領域外に配置する具体的なコードは以下の通りです。

.poster-share__content {
  position: absolute;
  right: -9999px;
  top: -9999px;
  width: 560px;
  height: 852px;
  opacity: 0;
  z-index: -1;

  &--img {
    width: 100%;
    height: 100%;
  }

  &--cvs {
    width: 100%;
    height: 100%;
  }
}

3. コアの js 部分

コア実装の作成を開始します~

親コンポーネントは、子コンポーネントが描画を開始するかどうかを制御するパラメータを渡し、子コンポーネントの描画後に状態を変更するように親コンポーネントに通知されます。

  name: 'CpPosterShare',
  model: {
    prop: 'value',
    event: 'update:value',
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data () {
    return {
      isDraw: false, // 是否开始绘制海报
      posterImg: '', // 生成的海报图片地址
      canvasId: `canvasId${ Math.random() }`,
      screenWidth: null, // 屏幕宽度
    }
  },
  watch: {
    value: {
      handler (val) {
        this.isDraw = val
      },
      immediate: true,
    },
    isDraw (val) {
      this.$emit('update:value', val)
      if (val) {
        this.init()
      }
    },
  },

まず、私たちがやっていることは小さなプログラムです。小さなプログラムのソースコードに画像を入れるとパッケージのサイズが大きくなり、画像はインターネットからダウンロードする必要があるため、パブリックメソッドをカプセル化する必要があります。画像情報を取得します。Taro は、画像の元の幅、高さ、ローカルパスなどの情報を返す getImageInfo メソッドを提供します。

// 加载图片
loadImg (src) {
  return newPromise((resolve, reject) => {
    Taro.getImageInfo({
      src,
    }).then((res) => {
      resolve({ ...res })
    }).catch((err) => {
      reject(err)
    })
  })
}

このビジネスシナリオでは、背景画像や QR コード画像など、複数の画像を描画する必要があります。描画を開始する前に、複数の画像をロードする必要があります。

const promiseParams = [this.loadImg(BgImage), this.loadImg(QRcode)]
const promiseAll = Promise.all(promiseParams.map((item) =>item.catch(() =>null)))

promiseAll.then((res) => {
  this.draw(res)
}).catch((err) => {
  console.log(err)
})

絵を描き始めてください~

キャンバス描画コンテキスト CanvasContext オブジェクトを作成し、Taro が提供するメソッド Taro.createCanvasContext(canvasId) を呼び出して背景画像の描画、価格の描画、QR コードの描画を行いますが、ここでは説明しません。すべての描画が完了したら、キャンバス内のコンテンツをエクスポートして画像を生成します。Taro は、canvasToTempFilePath メソッドを提供します。このメソッドは、画像が正常にエクスポートされたことを確認するために、draw() コールバックで呼び出す必要があり、その一時パスを返します。生成された画像。

ctx.draw(false, () => {
  Taro.canvasToTempFilePath({
    canvasId:this.canvasId,
  }).then((res) => {
    this.posterImg = res.tempFilePath

    // 唤起分享菜单
    this.showShareImageMenu()
  }).catch((err) => {
    console.log('海报生成失败', err)
    Taro.showToast({
      title: '海报生成失败',
      icon: 'error',
    })
  }).finally(() => {
    Taro.hideLoading()
    this.isDraw = false
  })
})

ローカル画像が正常に生成されると、WeChat が提供する共有メニューのポップアップウィンドウが呼び出され、画像を友人に送信したり、収集してアルバムに保存したりできます。Taro は、共有メニューポップアップウィンドウを呼び出す showShareImageMenu メソッドを提供し、入力パラメータはローカルイメージパスです。

showShareImageMenu () {
  if (Taro.showShareImageMenu) {
    Taro.showShareImageMenu({
      path:this.posterImg,
    }).then().catch((err) => {
      console.log(err)
      const { errMsg } = err
      // 取消操作  errMsg === 'showShareImageMenu:fail cancel'
      // 拒绝授权  errMsg: "showShareImageMenu:fail auth deny"
      if (errMsg === 'showShareImageMenu:fail auth deny') {
        authorize({
          scope:'writePhotosAlbum',
          showModal:true,
          authName:'保存图片到相册',
          success: () => {
            this.downloadImg()
          },
        })
      }
    }).finally(() => {
      this.isDraw = false
    })
  } else {
    Taro.showToast({
      title:'小程序版本不支持该功能',
      icon:'error',
    })
  }
}

ユーザーが友人に送信するためにクリックすると、WeChat ダイアログボックスが呼び出され、生成されたポスター画像が貼り付けられて友人と共有されます。

お気に入りをクリックするとポスター写真がお気に入りリストに追加され、次回閲覧に便利です。

[アルバムに保存] をクリックすると、写真の保存を許可するポップアップウィンドウが表示され、[許可] をクリックすると、ポスター画像がローカルアルバムに保存されます。

ユーザーがイメージ保存の認証ポップアップウィンドウで初めて [拒否] をクリックし、次に [共有] をクリックして再度ダウンロードした場合、図に示すように、認証する設定を開くかどうかをユーザーに尋ねる認証プロンプトポップアップウィンドウが必要です。下。

Taro は、アプレット設定ページを呼び出すための Taro.openSetting メソッドを提供しており、ユーザーが「アルバムに追加」権限を有効にした後、Taro が提供するメソッド Taro.saveImageToPhotosAlbum を呼び出して写真をローカルにダウンロードします。


認証プロンプトのポップアップ	設定ページ	ダウンロードプロンプト

ユーザーが認可を有効にしているかどうかを判断するメソッドの具体的な実装は次のとおりです。

/**
 * 权限获取流程
 * @param scope       权限英文名称
 * @param success     授权成功的回调
 * @param fail        授权失败的回调
 * @param showModal   授权失败是否展示对话框提示
 * @param authName    授权失败是否展示对话框提示展示的授权名称
 *  // 例子：开启用户的相册权限
    authorize({
      scope: 'writePhotosAlbum',
      showModal: true,
      authName: '保存图片到相册',
      success () {
        console.log('授权成功')
      },
    })
*/
export async function authorize (options) {
  const {
    scope, success, fail, showModal = false, authName = '',
  } = options
  try {
    const scopeName = `scope.${ scope }`
    const auth = await Taro.getSetting()
    if (!auth.authSetting[scopeName]) {
      Taro.authorize({ scope: scopeName }).then((res) => {
        if (res.errMsg === 'authorize:ok' && success) success()
      }, () => {
        if (showModal && authName) {
          Taro.showModal({
            title: '授权提示',
            content: `您拒绝了${ authName }权限，是否打开设置去授权？`,
          }).then((res) => {
            if (res.confirm) {
              Taro.openSetting().then((res2) => {
                if (res2.authSetting[scopeName] && success) {
                  success()
                } else if (fail) {
                  fail()
                }
              })
            } else {
              fail && fail()
            }
          }).catch((res) => {
            fail && fail(res)
          })
        } else {
          fail && fail()
        }
      })
    } else {
      success && success()
    }
  } catch (err) {
    fail && fail(err)
  }
}

この時点で、特定の実装は完了しました。コンポーネントはページ内で使用できるようになります。

コンポーネントリファレンス

<poster-share
  v-model="draw"  // 是否开始绘制海报海报
  config="config"  // 海报配置信息
/>

問題記録

開発プロセス中にいくつかの問題が発生したので記録します

現象: [共有] をクリックすると、キャンバス画像が生成されます。開発者ツールは毎回正常、iOS マシンは毎回正常、一部の Android マシンは毎回正常、一部の Android マシンは共有をクリックした後にキャンセルし、操作が繰り返され、画像の生成に数回失敗します。

エラーメッセージ: "errMsg": "canvasToTempFilePath:fail:ビットマップの作成に失敗しました"

解決策の配置エラー: キャンバスを常に表示する必要があり、表示できません: なし

著者: JD Retail 張夢宇

コンテンツソース: JD Cloud 開発者コミュニティ

taro+canvasを利用してWeChatアプレットの画像共有機能を実現 | JD Cloud技術チーム