Html 5は微信の共有とカスタムコンテンツの流れを実現する

最近のプロジェクトでは、微信の共有があり、微信の共有内容をカスタマイズする必要があります.微信の共有に初めて接触したので、期間中に発生した問題や、機能を完了するプロセスを記録します.
以下は大まかな流れ(詳細は各段階に置く)

weixin-js-sdk

をインストール

初期化微信共有

は、微信がカスタムコンテンツ(友人に送信、友人圏に送信)

を共有するように構成する.
1、weixin-js-sdkのインストールnpm install weixin-js-sdk --save-dev
具体的な使用説明は微信の公式ドキュメントを参照してください.
2、ウィーチャット共有を初期化
本人がやっているアイテムの多くは、WeChat共有の機能が必要なので、ここではWeChat共有のコードをカプセル化します
次のコードのApiは実はaxiosリクエストです

import wx from 'weixin-js-sdk'
import api from '@/api'
const wxApi = {
    /**
   * [wxRegister   Api   ]
   * @param  {Function} callback [ready    ]
   */
  wxRegister (callback, url) {
    let query = {
     //    url               url，       base64
      url: url 
    }
    api.getWxJsSdk(query).then(res => {
      let data = res.data
      wx.config({
        debug: false, //       
        appId: data.appId, //   ，        
        timestamp: data.timestamp, //   ，        
        nonceStr: data.nonceStr, //   ，        
        signature: data.signature, //   ，  ，   1
        jsApiList: data.jsApiList //   ，     JS    ，  JS       2
      })
    })
    wx.ready((res) => {
      //       ready    
      if (callback) {
        callback()
      }
    })
  },
}

注意:base 64を変換する必要がある場合はjs-base 64を使用します.
3、微信を配置してカスタムコンテンツを共有する(友人に送信し、友人圏に送信する)
第2歩は微信に対してパッケージ構成を初期化したが、それに対応する共有などの機能が欠けており、ここでは改善する.

//  wxRegister      
/**
* [ShareTimeline            ]
* @param {[type]} option [    ]
* @param {[type]} success [    ]
* @param {[type]} error   [    ]
*/
ShareTimeline (option) {
wx.updateTimelineShareData({
  title: option.title, //     
  link: option.link, //     
  imgUrl: option.imgUrl, //     
  success () {
    //     
  },
  cancel () {
    //     
  }
})
},
/**
* [ShareAppMessage           ]
* @param {[type]} option [    ]
* @param {[type]} success [    ]
* @param {[type]} error   [    ]
*/
ShareAppMessage (option) {
wx.updateAppMessageShareData({
  title: option.title, //     
  desc: option.desc, //     
  link: option.link, //     
  imgUrl: option.imgUrl, //     
  success () {
    //     
  },
  cancel () {
    //     
  }
})
}

4、ページ呼び出し時

// vue   
//                 
import wx from '      '
mounted(){
    let base64 = require('js-base64').Base64
    let url = base64.encode(window.location.href)
    wx.wxRegister(this.wxRegCallback,url)
},
methods:{
    //     jdk  
    wxRegCallback () {},
    //             
    wxShareAppMessage(){
        let option = {
            title:'',//     
            desc: '', //     
            link: '', //     
            imgUrl: '' //     
        }
        //       
        wx.ShareAppMessage(option)
    },
    //              
    wxShareTimeline(){
        let option = {
            title:'',//     
            desc: '', //     
            link: '', //     
            imgUrl: '' //     
        }
        //       
        wx.ShareTimeline(option)
    }
}

以上が微信共有の流れですが、不足があれば、ご指摘ください.
注意:
WeChat共有は、ローカルlocalhost形式のドメイン名を使用して、WeChatの検証に合格できないことを実機でテストするしかありません.
まとめ
以上述べたのは小編が皆さんに紹介したHtml 5が微信の共有とカスタマイズの内容を実現し、皆さんに役に立つことを望んでいます.もし皆さんが何か疑問があれば、私にメッセージを送ってください.小編はすぐに皆さんに返事します.