uni-app中公衆號h5端分享

有接觸到使用uni-app來實現公衆號的開發，在實現分享時，有出現一些疑惑，這裏記錄下

1.公衆號分享使用sdk

• 開始我覺得在公衆號端，也是和微信小程序同樣，可使用button來進行個人朋友或者羣的分享
• 要使用js-sdk才能進行分享，可是，一直使用小程序的分享都是點擊後就可以進入微信端個人好友或者羣進行分享，而這裏使用sdk仍是不可以直接的點擊後進行分享，要點擊右上角的發送給朋友進行分享
• 引入sdk，可使用npm的方式引入，或者直接下載對應的js

npm install jweixin-module --save

• 使用方式

var jweixin = require('jweixin-module')
jweixin.ready(function(){  
    // TODO  
});

2.具體使用

• 先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」，在這裏添加的安全域名是不須要加上http的，如：www.xxx.com這樣寫就能夠了
• 在使用api時要先進行配置

jweixin.config({
  debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
  appId: '', // 必填，公衆號的惟一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，須要使用的JS接口列表
});

• 這裏可能會出現簽名錯誤，須要你將當前頁面的url傳給後臺後生成對應的簽名
• 使用js分享接口

/* 若是你不是點擊事件，則要將api的調用放在ready中 */
jweixin.ready(() => {
    let uid = uni.getStorageSync('uid');
    /* 使用這個api來顯示右上角的分享按鈕 */
    /* 能夠用hideOptionMenu()來隱藏右上角的分享按鈕 */
    jweixin.showOptionMenu();
    
    jweixin.updateAppMessageShareData({ 
        title: document.title, // 標題
        desc: '', // 分享描述
        link: `${window.location.href}&uid=${uid}`,
        imgUrl: '', // 分享圖標
        success: () => {
            console.log('success')
        },
    })
});

• 分享只能是分享當前頁面，不能和小程序那樣，在當前頁面分享，以後跳轉回另外一個頁面
• 每一個接口的調用都須要進行config配置後才能起做用，像那個hide隱藏分享按鈕也是同樣
• 微信公衆號sdk文檔

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期推薦：

  • 實現單行及多行文字超出後加省略號
  • 判斷iOS和Android及PC端
  • 使用vue開發移動端管理後臺
  • 畫三角形
  • 微信小程序使用車牌號輸入法