主要内容：
- 小程序调用App
- App调用小程序
- App分享小程序
- 小程序自身分享功能
- 小程序与H5交互
- 小程序之间互相跳转
- 绘制小程序分享图片
小程序与App之间的互相调用
小程序调用App
官方文档: https://developers.weixin.qq.com/miniprogram/dev/api/launchApp.html
只有在特定条件下，小程序才具有打开app的能力，小程序内部管理了一个打开APP能力的状态，为true可以打开，为false则不可以打开。
image.png
操作步骤:
- 需要为小程序的<button>组件的open-type设置为“launchApp”
- app端需要接入OpenSDK
- Android第三方app需要处理ShowMessageFromWX.req的微信回调，iOS则需要将appid添加到第三方app工程所述的plist文件URL types字段。
app-parameter的获取方法请参考 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调用小程序
官方文档地址：App唤醒小程序
ios文档地址：iOS唤醒小程序
操作步骤
- 下载Android开发工具包：资源中心 -> 开发资源 -> 资源下载 -> Android资源下载
- 调用接口WXLaunchMiniProgram
String appId = "wxd930ea5d5a258f4f"; // 填应用AppId
IWXAPI api = WXAPIFactory.createWXAPI(context, appId);
WXLaunchMiniProgram.Req req = new WXLaunchMiniProgram.Req();
req.userName = "gh_d43f693ca31f"; // 填小程序原始id
req.path = path; //拉起小程序页面的可带参路径，不填默认拉起小程序首页
req.miniprogramType = WXLaunchMiniProgram.Req.MINIPTOGRAM_TYPE_RELEASE;// 可选打开 开发版，体验版和正式版
api.sendReq(req);
回调说明：
WXEntryActivity中
public void onResp(BaseResp resp) {
if (resp.getType() == ConstantsAPI.COMMAND_LAUNCH_WX_MINIPROGRAM) {
WXLaunchMiniProgram.Resp launchMiniProResp = (WXLaunchMiniProgram.Resp) resp;
String extraData =launchMiniProResp.extMsg; //对应小程序组件 <button open-type="launchApp"> 中的 app-parameter 属性
}
}
App分享小程序
注意：如果微信版本低于6.5.6的话，那么小程序类型的分享将自动转换成网页类型分享。所以必须填写网页链接字段，确保低版本客户端能打开网页链接
要求：
- 发起分享的App与小程序属于同一微信开放平台账号
- 支持分享小程序类型消息至会话，暂不支持到朋友圈
- 支持分享开发版 / 体验版小程序
WXMiniProgramObject miniProgramObj = new WXMiniProgramObject();
miniProgramObj.webpageUrl = "http://www.qq.com"; // 兼容低版本的网页链接
miniProgramObj.miniprogramType = WXMiniProgramObject.MINIPTOGRAM_TYPE_RELEASE;// 正式版:0，测试版:1，体验版: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; // 目前支持会话
api.sendReq(req);
小程序自身分享功能
分享给好友
注意：
- 如果想在页面内发起转发，只能通过button组件设置属性open-type="share"，更多请参考官方转发api
Page({
onShareAppMessage: function (res) {
// 区分页面右上角分享和页面内 button 点击
if (res.from === 'button') {
// 来自页面内 button 转发按钮
console.log(res.target)
}
return {
title: '送给你一个大红包', // 分享文案
path: '/page/news/index', // 分享页面路径
imageUrl: 'https://***.zhaoshanshan.com/***.png' // 分享图片，当不传入时，默认使用截图，图片长宽比为5:4
}
}
})...
获取群标识
当需要分享到多个群，而统计群个数的时候，通过wx.getShareInfo(OBJECT)方法获取，需要传入shareTicket。
- 传入shareTicket
onLoad: function (options) {
// 定义携带 shareTicket 的转发
wx.showShareMenu({ withShareTicket: true })
...
},
- 分享时获取shareTicket
- 根据shareTicket获取群标识
onShareAppMessage: function (res) {
let that = this
return {
title: '送你一个大红包！',
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('加密之后的群标识：', res.iv)
})
}
}
}
}
}
发送模板消息
小程序定义模板消息地址:https://mp.weixin.qq.com/wxopen/tmplmsg?action=public_list&token=826838731&lang=zh_CN
模板消息的触发条件有两个：
- 支付
- 提交表单
操作步骤：
<form report-submit="true" bindsubmit="shareBtnTap">
<button formType="submit" open-type="share">发红包</button>
</form>
Page({
shareBtnTap (e) {
// 获取formId
console.log('用于发送模版消息的formId: ', e.detail.formId)
},
})
调用接口下发末模板消息
{
"touser": "OPENID", // 接收用户的openid
"template_id": "TEMPLATE_ID", // 模版id
"page": "index", // 用户点击后的跳转页面
"form_id": "FORMID",
"data": {
"keyword1": {
"value": "哈哈哈"
},
"keyword2": {
"value": "哈哈哈哈"
},
"keyword3": {
"value": "哈哈哈哈"
} ,
"keyword4": {
"value": "H哈哈哈哈"
}
},
"emphasis_keyword": "keyword1.DATA" // 模板需要放大的关键词，不填则默认无放大
}
分享到朋友圈
官方获取二维码地址
微信小程序是没有提供分享到朋友圈的API的，只能引导用户将小程序码保存到本地，再自行分享到朋友圈。
微信提供了三种生成二维码的接口：
image.png
- A接口和B接口生成的二维码数量有限
- B接口更适合携带不同query，更适合运营需要
B接口示例
{
scene: 'user_123:token_123', // 参数
page: 'pages/news/index', // 跳转页面
width: 430 // 二维码宽度
}
这样当用户扫完二维码时会跳转到pages/news/index页面
接着在pages/news/index页面中处理参数：
Page({
onLoad (option = {}) {
console.log('小程序码上携带参数scene ', option.scene)
// 处理scene
this.sceneControl(option.scene)
}
})
- 下载二维码图片到本地
wx.downloadFile({
url: 'https://***.zhaoshanshan.com/***/***.png', // 一定要有文件后缀
success: function(res) {
if (res.statusCode === 200) {
console.log('临时图片路径: ', res.tempFilePath)
}
}
})
- 根据图片临时路径，将其保存到手机相册
wx.saveImageToPhotosAlbum({
filePath: this.data.filePath,
success: function (res) {
wx.showModal({
title: '已保存到相册',
content: '请自行分享到朋友圈，分享好友，领红包',
showCancel: false,
confirmText: '确定',
success: function(res) {
if (res.confirm) {
// 返回上一页
wx.navigateBack()
}
}
})
},
fail: function (res) {
wx.showModal({
title: '下载失败',
content: '未获得访问相册权限，请尝试截取屏幕分享至朋友圈。',
showCancel: false,
confirmText: '确定',
success: function(res) {
if (res.confirm) {
// 返回上一页
wx.navigateBack()
}
}
})
}
})
小程序与H5交互
小程序载入H5
- 使用web-view组件，其加载的url需要配置到域名白名单中，在微信公众平台设置-> 开发设置 -> 业务域名下进行设置
一般情况下，需要对载入的url进行转义：
<view>
<web-view src="{{u}}"></web-view>
</view>
decodeURIComponent(option.u)
- 有时候需要在url后面追加一些信息,使用fixWebLinkURL对信息进行转换
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调用小程序
- 判断环境
<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
})
- 执行跳转
wx.miniProgram.navigateTo({url: '/path/to/page'})
- 向小程序发送消息
<web-view src="{{url}}" bindmessage="handleMsg"/>
Page({
handleMsg: function (e) {
console.log('h5 postMessage is', e.detail.data)
}
})
h5触发事件
wx.miniProgram.postMessage({ data: '这是一条传递给小程序的消息' })
小程序之间互相跳转
只有同一公众号之下关联的小程序才能互相跳转
<view class="btn-area">
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</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组件来实现该功能
wx.navigateToMiniProgram({
appId: '',
path: '',
extraData: {
// 传递的参数
},
envVersion: 'develop', // 要打开的小程序版本 develop trial release
success(res) {
// 打开成功
}
})
wx.navigateBackMiniProgram()方法用于返回到上一个小程序。更多文档请参考wx.navigateBackMiniProgram · 小程序
绘制小程序分享图片
参考文章：https://www.jianshu.com/p/ceb42fe76e77
网友评论