开发
API

参数调起使用场景描述

在小程序中,可以通过 scheme 携带参数,完成很多功能,目前字节小程序有三种使用场景,可以在 scheme 的上携带参数;完成投放回流等数据统计或者不同来源的业务展现;详细描述如下:

分享携带参数场景

当时分享场景时,可以在通过组件<button />open-type的属性进行设置,并且配合 page 中的onShareAppMessage完成分享功能并且携带相应的参数,可以在onShareAppMessagepath的分享路径上,通过&添加需要的参数值;并且在跳转到的小程序的 apponLaunch 或者 pageonLoad 中通参数拿到所携带的参数,以完成回流、来源等各种数据统计;可以通过以下的代码示例查看详细的使用方式;

在不同的宿主中的展现形式不同,如下:

代码示例

<view class="container">
  <button open-type="share">share</button>
</view>
Page({
  onShareAppMessage(option) {
    return {
      title: "这是要转发的小程序标题",
      desc: "这是默认的转发文案,用户可以直接发送,也可以在发布器内修改",
      path: "/pages/index/index?from=sharebuttonabc&otherkey=othervalue", // ?后面的参数会在转发页面打开时传入onLoad方法
      imageUrl: "https://e.com/e.png", // 支持本地或远程图片,默认是小程序 icon
      templateId: "这是开发者后台设置的分享素材模板id",
      success() {
        console.log("转发发布器已调起,并不意味着用户转发成功,微头条不提供这个时机的回调");
      },
      fail() {
        console.log("转发发布器调起失败");
      },
    };
  },
  onLoad(query) {
    // 此处是当被转发的小程序页面打开时候,通过分享出去的scheme上携带的参数;
    if (query.from === "sharebuttonabc") {
      // do something...
      // 1、日志采集:可以完成通过分享而来的来源数据的统计
    }
  },
});

消息推送模板携带参数场景

消息推送能力是小程序能力中十分重要的功能;详细的步骤可以参考订阅消息功能文档完成;通过服务端给用户发送消息的时候,可以通过 page 的跳转链接上通过&添加需要的参数值;并且在跳转到的小程序的 apponLaunch 或者 pageonLoad 中通参数拿到所携带的参数,以完成回流、来源等各种数据统计;可以通过以下的代码示例查看详细的使用方式;

代码示例

// 请求 body如下
{
  "access_token": "b13b4c7679150245dac2249aafd8aca8e9dceaff9e22cee05e1d30fb67e18916358d73c235fcaab9007ec0976ee40d26ee56a43c32398b9d6680105e5535cd1ef40a803d790668581************",
  "app_id": "31198cf00b********",
  "tpl_id": "MSG38489d04608c5f0fdeb565fc5114afff6410*******",
  "open_id": "36d4bd3c8****",
  "data": {
    "版本号": "v1.0",
    "版本描述": "新版本发布了"
  },
  "page": "pages/index?from=notify-app" // 可以在page上的链接上携带参数,和启动路径;
}

小程序相互跳转携带参数场景

为了更好的丰富小程序的服务能力,满足用户的多样化的需求,开发者可以在小程序内通过开放接口,跳转到任一小程序,tt.navigateToMiniProgram;互跳时候,在tt.navigateToMiniProgram的 path 上,通过&添加需要的参数值;并且在跳转到的小程序的 apponLaunch 或者 pageonLoad 中通参数拿到所携带的参数,以完成回流、来源等各种数据统计;可以通过以下的代码示例查看详细的使用方式;

代码示例

<view class="container">
  <div bindtap="jumpTo">跳转其他小程序</div>
</view>
<!-- 小程序A的page的js中 -->
Page({
  jumpTo() {
    // 跳转到小程序B的方法
    tt.navigateToMiniProgram({
      appId: 'tt2d495bf4b2xxxxxx',
      path: 'pages/index/index?from=miniapp-A&arg2=' + encodeURIComponent('中文'),
      extraData: {
        arg3: 'hello',
      },
      success: function () {
        this.setData({
          success: true,
        });
      },
      fail: function (e) {
        console.log(e);
        this.setData({
          success: false,
        });
      },
    });
  },
});
<!-- 小程序A的app的js中 -->
App({
    // 最多是个appid
    navigateToMiniProgramAppIdList: [
        'tt2d495bf4b2xxxxxx'
    ],
    onLaunch(option) {
        // option为启动的时,跳转scheme上携带的参数和启动数据
        console.log('App Launch');
    },
});
<!-- 小程序B的page中的index.js -->
Page({
  onLoad(query) {
    // 此处是当互跳的小程序页面打开时候,通过跳转时scheme上携带的参数,进行业务的编写;
    if (query.from === 'miniapp-A') {
      // do something...
      // 1、日志采集:可以完成通过分享而来的来源数据的统计
      // 2、更加不同的小程序来源,处理出不同的业务逻辑
    }
  },
});

开发者调试携带参数开发

开发工具中的使用方式

可以在 ide 中自定义编译模式,方便开发调试;

点击纠错
评价此篇文档