BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. ジャバスクリプト
  4. javascriptのヒント

WeChatアプレット用ユニアプリによるグローバルシェアリング

2022-01-13 22:10:34

実際には、アプレットを友人やサークルに共有する必要がある場合が多く、一般的にはページ単位で設定します。

公式の共有の紹介です。 https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

単一ページは、より共有する必要があるページごとに別々に書く必要があります。 

copyexport default {
//Send to a friend
  onShareAppMessage(res) {
    if (res.from === 'button') {// From the in-page share button
      console.log(res.target)
    }
    return {
      title: 'Custom share title',
      path: '/pages/test/test?id=123'
    }
  },
  //share to friends
  onShareTimeline(res) {
     return {
      title: 'Custom share title',
      path: '/pages/test/test?id=123'
    }
  }
}

コードが重複するだけでなく、特に混乱しやすく、誤ってパラメータを見逃したり、変更し忘れたりしがちです。

パラメータ設定の入門編を共有する。

グローバルな共有

各ページで繰り返されるコードを減らし、共有コードをグローバルに設定します。

まず、moreディレクトリのutilsフォルダの下にwxShare.jsを作成します。

mian.jsを作成後、このwxShare.jsをインポートする。

//共有設定
import share from '. /utils/wxShare.js' からインポートする。
Vue.mixin(共有)

wxShare.jsの紹介

を含むページベースjsを作成します。 data , onShareAppMessage , onShareTimeline 3つで十分です

data :シェアパラメータ設定：冒頭の構成図を参照するとよいでしょう

onShareAppMessage : WeChatの友達に共有する設定

onShareTimeline : 友達にシェアする設定 

copyexport default {
    data() {
        return {
            share: {
                // Title of the repost (default title)
                title: 'Default title - share title',
                // default is the current page, must be a full path starting with '/'
                path: '',
                // custom image path, can be local file path, code package file path or network image path.
                //support PNG and JPG, if you don't pass imageUrl, the default screenshot will be used. The image aspect ratio is 5:4
                imageUrl: ''
            }
        }
    },
    // Send to a friend
    onShareAppMessage(res) {
         return {
          title: 'Send to a friend',
          path: '/pages/test/test'
        }
    },
    //share to friends
    onShareTimeline(res) {
         return {
          title: 'Share to friends',
          path: '/pages/test/test'
        }
    }
}

最も基本的なグローバル共有が完了しました。注意深い友人は、データ内のパラメータが使用されていないこと、共有された各パラメータが固定で動的に設定できないこと、理想的なグローバル共有とは大きく異なることに気がつくかもしれません

getCurrentPages() 機能

getCurrentPages() 現在のページスタックのインスタンスを取得する関数。スタックの順番で配列として与えられ、最初の要素が最初のページ、最後の要素が現在のページとなる。

ただし getCurrentPages() はページスタックを表示するためにのみ使用されます。ページ状態のエラーを避けるために、ページスタックを変更しないでください。

公式サイトの説明文です。 https://uniapp.dcloud.io/collocation/frame/window?id=getcurrentpages

友人と共有するためのonShareAppMessageの最適化 

copy// Send to a friend
onShareAppMessage(res) {
    // Get the loaded pages
    let pages = getCurrentPages(),
        // Get the object of the current page
        view = pages[pages.length - 1];
    // the path to the shared page
    this.share.path = `/${view.route}`;
    //Forwarding parameters
    return this.share;
},

ページパスを共有する前に、動的に取得する。

現在、かなり明白な問題があります。アプレットのタイトルは、現在、直接取得する方法がないのです。

ページ共有タイトルの設定

共有する必要のある各ページに動的にタイトルを設定する、画期的な方法を発見しました。 

copyexport default {
    onLoad() {
        /*
            Design the current page share title in the life cycle of the page to be shared
             this.share is to get the share data defined in wxShare.js
        */
       this.share.title = "Current page share title"
    }
}

エフェクトショーケース

ボタン友達に紹介する

　　ページ内に配置された共有ボタン( <button open-type="share"> )

　　設定パラメータ用の領域が別にあることを除けば、コードは上記と変わりません。 

copy// Send to a friend
onShareAppMessage(res) {
    // Forward from a button within the page
    if (res.from == 'button') {
        console.log("Button forwarding - configuration");
    } 
    // Get the loaded pages
    let pages = getCurrentPages(),
        // Get the object of the current page
        view = pages[pages.length - 1];
    // the path to the shared page
    this.share.path = `/${view.route}`;
    //Forwarding parameters
    return this.share;
}

onShareTimelineを最適化し、友人に共有できるようにする。

基本的には友人への共有と全く同じ設定です 

copy//share to friends
onShareTimeline(res) {
    // Get the loaded pages
    let pages = getCurrentPages(),
        // Get the object of the current page
        view = pages[pages.length - 1];
    // console.log("Getting the loaded pages", pages);
    // console.log("The object of the current page", view);
    this.share.path = `/${view.route}`;
    //Forwarding parameters
    return this.share;
}

グローバルシェアは、基本的に上記のような構成になっています。

共有用のページパスを動的に変更することは問題ないのですが、動的な共有パスをパラメータで設定することに問題が残ります。

wxShare.jsのコード 

copyexport default {
    data() {
        return {
            share: {
                // Title of the repost (default title)
                title: 'Default title - share title',
                // default is the current page, must be a full path starting with '/'
                path: '',
                // custom image path, can be local file path, code package file path or network image path.
                //support PNG and JPG, if you don't pass imageUrl, the default screenshot will be used. The image aspect ratio is 5:4
                imageUrl: ''
            }
        }
    },
    /*
     Design the current page share title in the life cycle of the page to be shared
     onLoad() {
         this.share.title = "Current page share title"
     },
     */
    // Send to a friend
    onShareAppMessage(res) {
        // Forwarding from an in-page button
        if (res.from == 'button') {
            console.log("Button forwarding - configuration");
        }
        // Get the loaded pages
        let pages = getCurrentPages(),
            // Get the object of the current page
            view = pages[pages.length - 1];
        this.share.path = `/${view.route}`;
        
        //forwarding parameters
        return this.share;
    },
    //share to friends
    onShareTimeline(res) {
        // Get the loaded pages
        let pages = getCurrentPages(),
            // Get the object of the current page
            view = pages[pages.length - 1];
        // console.log("Get loaded pages", pages);
        console.log("The object of the current page", view);
        this.share.path = `/${view.route}`;
        //Forwarding parameters
        return this.share;
    }
}
wxShare.js

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します