小程序之社交

主要內(nèi)容:

  1. 小程序調(diào)用App
  2. App調(diào)用小程序
  3. App分享小程序
  4. 小程序自身分享功能
  5. 小程序與H5交互
  6. 小程序之間互相跳轉(zhuǎn)
  7. 繪制小程序分享圖片

小程序與App之間的互相調(diào)用

小程序調(diào)用App

官方文檔: https://developers.weixin.qq.com/miniprogram/dev/api/launchApp.html

只有在特定條件下,小程序才具有打開app的能力,小程序內(nèi)部管理了一個(gè)打開APP能力的狀態(tài),為true可以打開,為false則不可以打開。


image.png

操作步驟:

  1. 需要為小程序的<button>組件的open-type設(shè)置為“l(fā)aunchApp”
  2. app端需要接入OpenSDK

iOS 參考文檔 https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=1417694084&token=&lang=zh_CN

Android 參考文檔 https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=1417751808&token=&lang=zh_CN

  1. Android第三方app需要處理ShowMessageFromWX.req的微信回調(diào),iOS則需要將appid添加到第三方app工程所述的plist文件URL types字段。
    app-parameter的獲取方法請(qǐng)參考 Android SDKSample 中 WXEntryActivity 中的 onResp 方法以及 iOS SDKSample 中 WXApiDelegate 中的 onResp 方法
<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打開App</button>

Page({
  launchAppError: function(e){
    console.log(e.detail.errMsg);
  }
})

App調(diào)用小程序

官方文檔地址:App喚醒小程序
ios文檔地址:iOS喚醒小程序

操作步驟

  1. 下載Android開發(fā)工具包:資源中心 -> 開發(fā)資源 -> 資源下載 -> Android資源下載
  2. 調(diào)用接口WXLaunchMiniProgram
String appId = "wxd930ea5d5a258f4f"; // 填應(yīng)用AppId
IWXAPI api = WXAPIFactory.createWXAPI(context, appId);

WXLaunchMiniProgram.Req req = new WXLaunchMiniProgram.Req();
req.userName = "gh_d43f693ca31f"; // 填小程序原始id
req.path = path;                  //拉起小程序頁面的可帶參路徑,不填默認(rèn)拉起小程序首頁
req.miniprogramType = WXLaunchMiniProgram.Req.MINIPTOGRAM_TYPE_RELEASE;// 可選打開 開發(fā)版,體驗(yàn)版和正式版
api.sendReq(req);

回調(diào)說明
WXEntryActivity中

public void onResp(BaseResp resp) {
    if (resp.getType() == ConstantsAPI.COMMAND_LAUNCH_WX_MINIPROGRAM) {
        WXLaunchMiniProgram.Resp launchMiniProResp = (WXLaunchMiniProgram.Resp) resp;
        String extraData =launchMiniProResp.extMsg; //對(duì)應(yīng)小程序組件 <button open-type="launchApp"> 中的 app-parameter 屬性
    }
}

App分享小程序

注意:如果微信版本低于6.5.6的話,那么小程序類型的分享將自動(dòng)轉(zhuǎn)換成網(wǎng)頁類型分享。所以必須填寫網(wǎng)頁鏈接字段,確保低版本客戶端能打開網(wǎng)頁鏈接

要求

  1. 發(fā)起分享的App與小程序?qū)儆谕晃⑿砰_放平臺(tái)賬號(hào)
  2. 支持分享小程序類型消息至?xí)挘瑫翰恢С值脚笥讶?/li>
  3. 支持分享開發(fā)版 / 體驗(yàn)版小程序
WXMiniProgramObject miniProgramObj = new WXMiniProgramObject();
miniProgramObj.webpageUrl = "http://www.qq.com"; // 兼容低版本的網(wǎng)頁鏈接
miniProgramObj.miniprogramType = WXMiniProgramObject.MINIPTOGRAM_TYPE_RELEASE;// 正式版:0,測(cè)試版:1,體驗(yàn)版:2
miniProgramObj.userName = "gh_d43f693ca31f";     // 小程序原始id
miniProgramObj.path = "/pages/media";            //小程序頁面路徑
WXMediaMessage msg = new WXMediaMessage(miniProgramObj);
msg.title = "小程序消息Title";                    // 小程序消息title
msg.description = "小程序消息Desc";               // 小程序消息desc
msg.thumbData = getThumb();                      // 小程序消息封面圖片,小于128k

SendMessageToWX.Req req = new SendMessageToWX.Req();
req.transaction = buildTransaction("webpage");
req.message = msg;
req.scene = SendMessageToWX.Req.WXSceneSession;  // 目前支持會(huì)話
api.sendReq(req);

小程序自身分享功能

分享給好友
注意:

  1. 如果想在頁面內(nèi)發(fā)起轉(zhuǎn)發(fā),只能通過button組件設(shè)置屬性open-type="share",更多請(qǐng)參考官方轉(zhuǎn)發(fā)api
Page({
  onShareAppMessage: function (res) {
    // 區(qū)分頁面右上角分享和頁面內(nèi) button 點(diǎn)擊
    if (res.from === 'button') {
      // 來自頁面內(nèi) button 轉(zhuǎn)發(fā)按鈕
      console.log(res.target)
    }
    return {
      title: '送給你一個(gè)大紅包', // 分享文案
      path: '/page/news/index', // 分享頁面路徑
      imageUrl: 'https://***.zhaoshanshan.com/***.png' // 分享圖片,當(dāng)不傳入時(shí),默認(rèn)使用截圖,圖片長(zhǎng)寬比為5:4
    }
  }
})...

獲取群標(biāo)識(shí)

當(dāng)需要分享到多個(gè)群,而統(tǒng)計(jì)群個(gè)數(shù)的時(shí)候,通過wx.getShareInfo(OBJECT)方法獲取,需要傳入shareTicket。

  1. 傳入shareTicket
onLoad: function (options) {
    // 定義攜帶 shareTicket 的轉(zhuǎn)發(fā)
    wx.showShareMenu({ withShareTicket: true })
    ...
  },
  1. 分享時(shí)獲取shareTicket
  2. 根據(jù)shareTicket獲取群標(biāo)識(shí)
onShareAppMessage: function (res) {
    let that = this
    return {
      title: '送你一個(gè)大紅包!',
      path: `/pages/news/index`,
      imageUrl: '***',
      success: function (res) {
        // 獲取 shareTicket
        var shareTickets = res.shareTickets
        if (shareTickets && shareTickets.length !== 0) {
          wx.getShareInfo({
            shareTicket: shareTickets[0],
            success: function(res) {
              console.log('加密之后的群標(biāo)識(shí):', res.iv)
            })
          }
        }
      }
    }
 }

發(fā)送模板消息

小程序定義模板消息地址:https://mp.weixin.qq.com/wxopen/tmplmsg?action=public_list&token=826838731&lang=zh_CN
模板消息的觸發(fā)條件有兩個(gè):

  1. 支付
  2. 提交表單

操作步驟:

<form report-submit="true" bindsubmit="shareBtnTap">
  <button formType="submit" open-type="share">發(fā)紅包</button>
</form>

Page({
  shareBtnTap (e) {
    // 獲取formId
    console.log('用于發(fā)送模版消息的formId: ', e.detail.formId)
  },
})

調(diào)用接口下發(fā)末模板消息

{
  "touser": "OPENID",  // 接收用戶的openid
  "template_id": "TEMPLATE_ID",  // 模版id
  "page": "index",  // 用戶點(diǎn)擊后的跳轉(zhuǎn)頁面
  "form_id": "FORMID",
  "data": {
      "keyword1": {
          "value": "哈哈哈"
      },
      "keyword2": {
          "value": "哈哈哈哈"
      },
      "keyword3": {
          "value": "哈哈哈哈"
      } ,
      "keyword4": {
          "value": "H哈哈哈哈"
      }
  },
  "emphasis_keyword": "keyword1.DATA"  // 模板需要放大的關(guān)鍵詞,不填則默認(rèn)無放大
}

分享到朋友圈

官方獲取二維碼地址
微信小程序是沒有提供分享到朋友圈的API的,只能引導(dǎo)用戶將小程序碼保存到本地,再自行分享到朋友圈。
微信提供了三種生成二維碼的接口:

image.png

  1. A接口和B接口生成的二維碼數(shù)量有限
  2. B接口更適合攜帶不同query,更適合運(yùn)營(yíng)需要

B接口示例

{
  scene: 'user_123:token_123',  // 參數(shù)
  page: 'pages/news/index',  // 跳轉(zhuǎn)頁面
  width: 430  // 二維碼寬度
}

這樣當(dāng)用戶掃完二維碼時(shí)會(huì)跳轉(zhuǎn)到pages/news/index頁面
接著在pages/news/index頁面中處理參數(shù):

Page({
  onLoad (option = {}) {
    console.log('小程序碼上攜帶參數(shù)scene ', option.scene)
    // 處理scene
    this.sceneControl(option.scene)
  }
})
  1. 下載二維碼圖片到本地
wx.downloadFile({
  url: 'https://***.zhaoshanshan.com/***/***.png', // 一定要有文件后綴
  success: function(res) {
    if (res.statusCode === 200) {
      console.log('臨時(shí)圖片路徑: ', res.tempFilePath)
    }
  }
})
  1. 根據(jù)圖片臨時(shí)路徑,將其保存到手機(jī)相冊(cè)
wx.saveImageToPhotosAlbum({
  filePath: this.data.filePath,
  success: function (res) {
    wx.showModal({
      title: '已保存到相冊(cè)',
      content: '請(qǐng)自行分享到朋友圈,分享好友,領(lǐng)紅包',
      showCancel: false,
      confirmText: '確定',
      success: function(res) {
        if (res.confirm) {
          // 返回上一頁
          wx.navigateBack()
        }
      }
    })
  },
  fail: function (res) {
    wx.showModal({
      title: '下載失敗',
      content: '未獲得訪問相冊(cè)權(quán)限,請(qǐng)嘗試截取屏幕分享至朋友圈。',
      showCancel: false,
      confirmText: '確定',
      success: function(res) {
        if (res.confirm) {
          // 返回上一頁
          wx.navigateBack()
        }
      }
    })
  }
})

小程序與H5交互

小程序載入H5

  1. 使用web-view組件,其加載的url需要配置到域名白名單中,在微信公眾平臺(tái)設(shè)置-> 開發(fā)設(shè)置 -> 業(yè)務(wù)域名下進(jìn)行設(shè)置

一般情況下,需要對(duì)載入的url進(jìn)行轉(zhuǎn)義:
<view>
<web-view src="{{u}}"></web-view>
</view>

decodeURIComponent(option.u)
  1. 有時(shí)候需要在url后面追加一些信息,使用fixWebLinkURL對(duì)信息進(jìn)行轉(zhuǎn)換
const u = fixWebLinkURL(decodeURIComponent(option.u))

function fixWebLinkURL(url) {
  // 把 hash 放在最后面
  let qs = `********`
  let match = url.split('#')
  if (match[1]) {
    qs += '#' + match[1]
    url = match[0]
  }
  return ~url.indexOf('?') ? `${url}&${qs}` : `${url}?${qs}`
}

H5調(diào)用小程序

  1. 判斷環(huán)境
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

//方式一
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}

//方式二
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})
  1. 執(zhí)行跳轉(zhuǎn)
wx.miniProgram.navigateTo({url: '/path/to/page'})
  1. 向小程序發(fā)送消息
<web-view src="{{url}}" bindmessage="handleMsg"/>
Page({
  handleMsg: function (e) {
    console.log('h5 postMessage is', e.detail.data)
  }
})

h5觸發(fā)事件

wx.miniProgram.postMessage({ data: '這是一條傳遞給小程序的消息' })

小程序之間互相跳轉(zhuǎn)

只有同一公眾號(hào)之下關(guān)聯(lián)的小程序才能互相跳轉(zhuǎn)

<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉(zhuǎn)到新頁面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當(dāng)前頁打開</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打開綁定的小程序</navigator>
</view>

//該接口即將廢棄,使用如上navigator組件來實(shí)現(xiàn)該功能
wx.navigateToMiniProgram({
  appId: '',
  path: '',
  extraData: {
    // 傳遞的參數(shù)
  },
  envVersion: 'develop', // 要打開的小程序版本 develop  trial  release
  success(res) {
    // 打開成功
  }
})

wx.navigateBackMiniProgram()方法用于返回到上一個(gè)小程序。更多文檔請(qǐng)參考wx.navigateBackMiniProgram · 小程序

繪制小程序分享圖片


參考文章:http://m.itdecent.cn/p/ceb42fe76e77

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,326評(píng)論 25 708
  • 一直想寫一篇年終總結(jié),碼碼字,從我的視角出發(fā),沒想到竟給忘了,不該,不該。 其中很多思想來自他人,萬望勿吐槽...
    墨染書閱讀 272評(píng)論 0 0
  • 憑樓椅欄望外,數(shù)歲不知。牡丹以凋隨風(fēng)去,今夕是何夕? 拂袖拭淚思君,暮日晨昏。梧桐琴起曲幽幽,今愿君當(dāng)歸。
    朱砂賦難憶閱讀 140評(píng)論 0 0
  • 世人的想法的籠統(tǒng)的分兩種,一種是命定論,一種是創(chuàng)造論。 命定論的人,認(rèn)為一切都是上天在安排,自己隨遇而安,以一種被...
    縱深解析閱讀 325評(píng)論 0 0
  • 其實(shí)很早就注意到這樣的一個(gè)問題,單純從自己的感受并沒有相關(guān)調(diào)查數(shù)據(jù)論證。其實(shí)重點(diǎn)大學(xué)里我們從家庭條件方面去分類學(xué)生...
    二次風(fēng)閱讀 268評(píng)論 0 1

友情鏈接更多精彩內(nèi)容