ホームページ > WeChat アプレット > ミニプログラム開発 > WeChat アプレットは、写真を保存し、モーメントで共有する機能を通じて実装されています。

WeChat アプレットは、写真を保存し、モーメントで共有する機能を通じて実装されています。

不言
リリース: 2018-06-26 15:51:06
オリジナル
6143 人が閲覧しました

この記事は主に、写真を保存してモーメントで共有するためのWeChatミニプログラムの機能を紹介しています。必要な友達と共有できます。

ミニ内で直接共有することはできません。プログラム。したがって、私たちができるのは、写真を生成し、ミニ プログラムの QR コードを送信し、携帯電話のアルバムに保存し、ユーザーが友人のサークルに送信することを選択できることだけです。ミニプログラム内のQRコードを認識すると、ミニプログラムの指定ページにアクセスできます。編集者は以下に実装コードを共有しますので、必要な友達はそれを参照してください

説明

まず最初に、ミニプログラムを友達のサークルに直接共有することはできないことを説明させてください。したがって、私たちができるのは、写真を生成し、ミニ プログラムの QR コードを送信し、携帯電話のアルバムに保存し、ユーザーが友人のサークルに送信することを選択できることだけです。ミニプログラム内のQRコードを認識すると、ミニプログラムの指定ページにアクセスできます。共有をサポートする市販のアプリケーションを参照すると、基本的にはこのように実装されています。

準備段階

1. サーバーを通じてミニプログラムコードを取得します

ここで、WeChatの公式ドキュメントを参照し、背景のパラメータ、パス、その他の情報を指定して、背景を生成できるようにします。指定されたミニプログラムコード。次に、wx.getImageInfo を呼び出して、バックグラウンドで生成された小さなプログラム コードを保存します。

ミニプログラムコードを生成する公式サーバーが存在しない場合は、WeChat のドキュメントをよく読んでください。これも非常に面倒で、デバッグには不便です。

wx.getImageInfo({            
  src:'https://xxx.jpg',//服务器返回的带参数的小程序码地址
  success: function (res) {
    //res.path是网络图片的本地地址
    qrCodePath = res.path;
  },
  fail: function (res) {
    //失败回调
  }
});
ログイン後にコピー

1. キャンバスに必要な情報を描画します

すべての画像を準備したら、キャンバスに描画し、キャンバスを画像としてエクスポートします。描画に関してはWeChatのcanvas APIを参照してください。以下は基本的にAPIメソッドに基づいています。

注意すべき点がいくつかあります。

1. 描画した文字の長さが分からないので、どのタイミングで文字を折り返せば良いのか分かりません。そのため、商品タイトルなどは、1行あたり18文字に固定されている場合があります。

2. 描画画像のエクスポートについてですが、公式APIではdraw()完了のコールバックで実行されるはずですが、この方法ではコールバックなしでは完了しません。 。何が問題だったのか分かりません。そのため、最終的には画像を保存するために遅延を追加する必要がありました。

canvasCtx.draw(false,function(res){
});
ログイン後にコピー

最後に、描画されたレンダリングを見てみましょう。

画像を生成した後、ユーザーはそれを保存して共有するように求められます。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:


WeChatアプレットのセレクター(時刻、日付、地域)の分析について

WeChatアプレット収集機能の実装について

WeChatアプレットの「いいね!」と削除リスト機能と共有機能の実装


以上がWeChat アプレットは、写真を保存し、モーメントで共有する機能を通じて実装されています。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート