主要內(nèi)容:
- 小程序調(diào)用App
- App調(diào)用小程序
- App分享小程序
- 小程序自身分享功能
- 小程序與H5交互
- 小程序之間互相跳轉(zhuǎn)
- 繪制小程序分享圖片
小程序與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
操作步驟:
- 需要為小程序的<button>組件的open-type設(shè)置為“l(fā)aunchApp”
- app端需要接入OpenSDK
- 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喚醒小程序
操作步驟
- 下載Android開發(fā)工具包:資源中心 -> 開發(fā)資源 -> 資源下載 -> Android資源下載
- 調(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)頁鏈接
要求:
- 發(fā)起分享的App與小程序?qū)儆谕晃⑿砰_放平臺(tái)賬號(hào)
- 支持分享小程序類型消息至?xí)挘瑫翰恢С值脚笥讶?/li>
- 支持分享開發(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);
小程序自身分享功能
分享給好友
注意:
- 如果想在頁面內(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。
- 傳入shareTicket
onLoad: function (options) {
// 定義攜帶 shareTicket 的轉(zhuǎn)發(fā)
wx.showShareMenu({ withShareTicket: true })
...
},
- 分享時(shí)獲取shareTicket
- 根據(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è):
- 支付
- 提交表單
操作步驟:
<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)用戶將小程序碼保存到本地,再自行分享到朋友圈。
微信提供了三種生成二維碼的接口:

- A接口和B接口生成的二維碼數(shù)量有限
- 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)
}
})
- 下載二維碼圖片到本地
wx.downloadFile({
url: 'https://***.zhaoshanshan.com/***/***.png', // 一定要有文件后綴
success: function(res) {
if (res.statusCode === 200) {
console.log('臨時(shí)圖片路徑: ', res.tempFilePath)
}
}
})
- 根據(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
- 使用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)
- 有時(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)用小程序
- 判斷環(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
})
- 執(zhí)行跳轉(zhuǎn)
wx.miniProgram.navigateTo({url: '/path/to/page'})
- 向小程序發(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
