微信小程序开发能力汇总

6,938 阅读4分钟

汇总列表

外部跳微信小程序

  • H5链接跳小程序
  • App跳小程序
  • 短信跳小程序
  • 微信扫码跳小程序
  • 微信公众号跳小程序

小程序跳外部

  • 小程序跳H5链接
  • 小程序跳APP
  • 小程序跳小程序(应该可以)
  • 小程序分享到微信

H5链接跳小程序

开放标签

跳转小程序:wx-open-launch-weapp

用于页面中提供一个可跳转指定小程序的按钮。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。

开放对象

  • 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  • 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。

代码用例

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

静态网站H5跳小程序

非个人主体并且已认证的(微信认证) 小程序,使用云开发 静态网站托管的网页,可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序,也可以在微信外部浏览器或其他部分 App (如企业微信、QQ 等)跳转微信小程序。参考链接

参考链接

App跳小程序

1、App主动分享小程序卡片

  • 配置小程序原始id
  • 配置 小程序页面路径
  • 配置小程序消息title、desc、图片等信息
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";            //小程序页面路径;对于小游戏,可以只传入 query 部分,来实现传参效果,如:传入 "?foo=bar"
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("miniProgram");
req.message = msg;
req.scene = SendMessageToWX.Req.WXSceneSession;  // 目前只支持会话
api.sendReq(req);

2、App拉起小程序功能

  • 对于已通过认证的开放平台账号,其移动应用可以跳转至任何合法的小程序,且不限制跳转的小程序数量。
  • 对于未通过认证的开放平台账号,其移动应用仅可以跳转至同一开放平台账号下小程序。
  • 若移动应用未上架,则最多只能跳转小程序100次/天,用于满足调试需求。
String appId = "wxd930ea5d5a258f4f"; // 填移动应用(App)的 AppId,非小程序的 AppID
IWXAPI api = WXAPIFactory.createWXAPI(context, appId);

WXLaunchMiniProgram.Req req = new WXLaunchMiniProgram.Req();
req.userName = "gh_d43f693ca31f"; // 填小程序原始id
req.path = path;                  ////拉起小程序页面的可带参路径,不填默认拉起小程序首页,对于小游戏,可以只传入 query 部分,来实现传参效果,如:传入 "?foo=bar"。
req.miniprogramType = WXLaunchMiniProgram.Req.MINIPTOGRAM_TYPE_RELEASE;// 可选打开 开发版,体验版和正式版
api.sendReq(req);

参考链接

短信跳小程序

短信跳小程序境内非个人主体的认证的小程序,开通静态网站后,可以免鉴权下发支持跳转到相应小程序的短信。短信中会包含支持在微信内或微信外打开的静态网站链接,用户打开页面后可一键跳转至你的小程序。

微信扫码跳小程序

为方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序能力。

配置二维码规则

测试环境生成扫码链接后,需在小程序后管配置下扫码链接,方可进入体验版;生产环境无需每次都配置。

配置成功后用测试链接二维码扫码即可跳转到小程序,小程序 onLoad options.q 可确定为扫码场景,并获取到对应参数。

onLoad: function (options) {
  if (options.q) {
    // 扫码进来的
    ...
  }
}

微信公众号跳小程序

  • 小程序后管、公众号后管都须做依赖关联

小程序跳H5链接

使用web-view

承载网页的容器。会自动铺满整个小程序页面。

小程序跳APP

使用button组件的open-type=launchApp

<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>
Page({
  launchAppError (e) {
    console.log(e.detail.errMsg)
  }
})

小程序分享到微信

onShareAppMessage(Object object)

分享分2种:页面内转发按钮、右上角转发菜单。二者都定义标题、转发路径、自定义图片。

/**
 * 用户点击右上角分享
*/
onShareAppMessage() {
  const { defaultShareTitle, query, defaultShareImg } = GlobalData;
  return {
    title: defaultShareTitle,
    path: `pages/lauch/index?${queryString.stringfy(query)}`,
    imageUrl: defaultShareImg,
  };
},