淘宝小程序扫码进入参数

进入方式

目前我所用过的扫码进入方式有两种，一种是右上角官方分享中的当面分享，另一种是用画板(或者其他方式)自行生成二维码的分享。两种方式的传参和取参方式各有不同，最近又用到并踩了一遍坑，所以打算记录顺便分享一下。

官方的当面分享

官方的分享方式主要通过onShareAppMessage设置参数，具体可以参考官方文档。
大意如下：

入参

入参我这边没用到，是Object 类型，属性如下：

属性	类型	说明
form	String	触发来源：button：页面页分享按钮触发；menu：右上角分享按钮触发。code：执行my.showSharePanel 触发
target	Object	button 或 undefined，依据form值而定
webViewUrl	String	页面中包含web-view组件时，返回当前web-view的URL

onShareAppMessage执行完后必须返回一个分享对象，用于自定义分享内容。

返回值

比较多，这里列一下主要用到的几个

属性	类型	必填	描述
title	String	是	自定义分享标题
desc	String	否	自定义分享描述：由于分享到微博只支持最大长度 140 个字，因此建议长度不要超过该限制。
path	String	否	自定义分享页面的路径，path中的自定义参数可在小程序生命周期的 onLoad方法中获取（参数传递遵循 http get 的传参规则）path和url两者至少需要填一个。
url	String	否	分享完整的url，调用分享后将会使用该url作为回流地址。path和url两者至少需要填一个。注意：该参数，通过容器菜单内的分享时，不生效。
imageUrl	String	否	自定义分享卡片背景图片，支持：网络图片路径；注意：图片url需要上传到阿里特定可信域名下。
…	…	否

示例代码

如下是官方示例代码，传递了param参数并指定了分享链接进入的页面为page/component/component-pages/view。

Page({
  onShareAppMessage() {
    return {
      title: '小程序示例',
      desc: '小程序官方示例 Demo，展示已支持的接口能力及组件。',
      path: 'page/component/component-pages/view/view?param=123' 
    };  
   }, 
});

Page({
  onShareAppMessage() {
     return {
       title: '小程序示例',
       desc: '小程序官方示例 Demo，展示已支持的接口能力及组件。',
       url: 'https://m.duanqu.com?_ariver_appid=3000000002032702&page=page%2fcomponent%2fcomponent-pages%2fview%2fview%3fparam%3d123' 
     };  
   }, 
});

取参

利用onShareAppMessage进行分享后，从分享链接进入时则可在指定进入页面的onLoad事件query入参获得参数。下边是我的一段代码，描述的是如何从query中获取传递的参数。

  onLoad (query = {}) {
    // query = {
    //   "itemId": 123456789, // 这样可以mock分享带来的数据,虽然有点暴力...
    // }
    const {param} = query;
    console.log(param); // 如果按照官方文档的传参，那么将会输出 123
  },

生成二维码的分享

个人感觉自行生成二维码比较麻烦，但是好在比较灵活，花样也比较多，当然不限于二维码。我这里也就总结一下带参数链接的使用吧。
二维码链接分享主要是利用了app.js中onLaunch(第一次启动)或onShow(页面开始展示)方法获取到入参(object:Object)，从中解析出query的参数。我这边目前使用的方法与官方文档有些许出入，具体可以对比着看。

object 属性说明：

属性	类型	描述
query	Object	当前应用的 query，从启动参数的 query 字段解析而来
path	String	当前应用的页面地址，从启动参数 page 字段解析而来，page 忽略时默认为首页
referrerInfo	Object	来源信息

官方方法

比如，启动应用的 schema url 如下:
https://m.duanqu.com/?_ariver_appid=20000067&query=number%3D1&page=x%2Fy%2Fz
参数解析如下:

query = decodeURIComponent('number%3D1'); // number=1
path = decodeURIComponent('x%2Fy%2Fz'); // x/y/z

应用首次启动时，onLaunch 方法可获取 query、path 属性值。
应用在后台被用 schema 打开，也可从 onShow 方法中获取 query、path 属性值。

自用方法入参夹带

需要使用encodeURIComponent将参数字符串转码，而且其中的“query=params=”是必须的记得要在链接中填入appId。

generateGroupMiniAppUrl(params = { itemId: '', ...args }) {
  const { appId, ...args } = params;
  if (!appId) {
    console.error('null appId');
    return null;
  }
  let url = `https://m.duanqu.com?_ariver_appid=${appId}`;
  url = `${url}&query=params=${encodeURIComponent(JSON.stringify(params))}`;
  return url;
}

自用方法取参

onLaunch (options) {
	let {query = {}} = options;
	if (query) {
      const { params = '{}'} = query;
      const paramJson = JSON.parse(params);
      const {itemId: queryItemId} = paramJson;
      console.log(queryItemId); // '1234656'
	}
}