tms-jsbridge

tmsbridge

小程序提供给插件的扩展（Object 实例）。在插件内通过 requireMiniProgram() 引入

点击查看源码

 /**
 * @author Davislu <davislu@tencent.com>
 * @desc: 小程序提供给插件的扩展（Object 实例）。在插件内通过 requireMiniProgram() 引入
 */


/**
 * @private
 */
const webviewPath = 'SINAN-WEBVIEW-PATH';
const mpviewPath = 'SINAN-MPVIEW-PATH';
const addressPath = 'SINAN-ADDRESS-PATH';
const passengerPath = 'SINAN-PASSENGER-PATH';
/**
 * DEFN 空方法
 * @private
 * @returns {undefined} 无返回值
 */
const DEFN = () => {};

/**
 * @function
 * @private
 * @description 把对象拼接成 a=b&c=d 形式的字符串
 * @param       {Object} queryObj  需要进行序列化的对象
 * @returns     {String} 拼接后的字符串
 */
const serialize = (queryObj = {}) => {
  if (!queryObj) {
    return '';
  }

  const queryArray = [];

  Object.keys(queryObj).forEach((key) => {
    queryArray.push(`${key}=${queryObj[key]}`);
  });

  return queryArray.join('&');
};

/**
 * @class TMSBridge 类
 * @param {object} setting 初始化配置
 * @param {boolean} setting.component 要服务的插件是否导出为组件方式
 */
class TMSBridge {
  // 页面跳转设置
  static get navPageMap() {
    // 要保证TMSBridge被复制到各个分包中后还能共用全局Map
    const app = getApp();
    if (!app.globalData) {
      app.globalData = {};
    }
    if (!app.globalData.navPageMap) {
      app.globalData.navPageMap = new Map();
    }
    return app.globalData.navPageMap;
  }

  wxc = wx;
  component = false; // 是否为组件方式

  /**
   * constructor 初始化构造方法
   * @param {object} setting 配置信息
   * @param {string} setting.component 是否为组件方式
   * @returns {undefined} 无返回值
   */
  constructor(setting = {}) {
    const { component } = setting;
    this.component = !!component;
  }

  /**
   * bind 绑定当前调用域
   * @param {object} wxc 需要执行方法的 wx 调用域
   * @returns {object} 当前链式调用
   * @example
   * Page({
      navToPlugin: function(e) {
        if (!this.TMSBridge) {
          const { TMSBridge } = requireMiniProgram(); // 引入小程序扩展能力
          this.TMSBridge = TMSBridge.bind(wx);        // 绑定当前调用域
        }
      },
    });
  */
  bind(wxc = wx) {
    this.wxc = wxc;
    return this;
  }

  /**
   * scope 方法
   * @private
   * @param {boolean} fpsc 是否强制使用插件页面wx作用域
   * @returns {object} 当前wx 调用域
   */
  scope(fpsc) {
    return this.component && !fpsc ? wx : this.wxc;
  }

  /**
   * getAppId 方法 获取 appId
   * @private
   * @param {string} tp 用于区分返回小程序 appId 还是插件 appId
   * @returns {string} 小程序或插件的 appId
   */
  getAppId(tp = 'miniProgram') {
    const acc = this.wxc.getAccountInfoSync();
    return acc[tp] || {};
  }

  /**
   * navigateToMP 方法 从插件中跳转到指定小程序的指定页面
   * @param {object} [setting] 配置信息(以下是setting的详解)
   * @param {string} setting.appId 需要跳转的小程序的appId，appId为空时表示跳转到当前小程序
   * @param {string} [setting.page] 需要跳转页面的路径或名称
   * @param {string} setting.query 需要跳转页面的参数
   * @param {boolean} setting.fpsc 是否强制使用插件页面wx作用域
   * @param {function} setting.complete 跳转成功后的回调函数
   * @param {function} setting.message 用于页面的回传数据
   * @returns {void} 无返回值
   * @example
   * Page({
      navToPlugin: function(e) {
        if (!this.TMSBridge) {
          const { TMSBridge } = requireMiniProgram(); // 引入小程序扩展能力
          this.TMSBridge = TMSBridge.bind(wx);        // 绑定当前调用域
        }
        this.TMSBridge.navigateToMP({          // 跳转至小程序页面
          page: 'realname',
          query: 'from=hlzh',
          message: (res) => {
            // console.log(res);
          },
        });
      },
    });
   */
  navigateToMP(setting) {
    const {
      appId,
      page,
      query,
      fpsc,
      message = DEFN,
      complete = DEFN,
    } = setting;
    const navToCurMpPage = !appId || appId === wx.getAccountInfoSync().miniProgram.appId;
    const events = { onMessage: message };
    const navSetting = { events };
    if (navToCurMpPage) {
      // 打开当前小程序页面
      let pagePath = TMSBridge.navPageMap.get(page); // 获取页面在当前小程序内的实际路径
      pagePath = pagePath.replace(/\$\{(\w+)\}/g, (mstr, key) => {
        // 页面路径模版参数替换
        if (setting[key]) return setting[key];
        return mstr;
      });
      navSetting.url = `${pagePath}${/\?/.test(pagePath) ? '&' : '?'}${query}`;
      navSetting.complete = complete;
    } else {
      // 打开其他小程序页面
      const pagePath = `${page}${/\?/.test(page) ? '&' : '?'}${query}`; // 目标小程序页面路径
      const mpRedirectPagePath = TMSBridge.navPageMap.get(mpviewPath); // 通过小程序路由页打开小程序
      navSetting.url = `${mpRedirectPagePath}?appId=${appId}&path=${encodeURIComponent(pagePath)}`;
      events.onComplete = complete; // 打开其他小程序结束后调用complete事件
    }
    this.scope(fpsc).navigateTo(navSetting);
  }

  /**
   * navigateToWebview 方法 从插件中跳转到小程序的 web-view 容器打开 H5
   * @param {object} [setting] 配置信息(以下是setting的详解)
   * @param {boolean} setting.fpsc 是否强制使用插件页面wx作用域
   * @param {string} [setting.url] 需要跳转的 H5 链接
   * @param {boolean} setting.disableShare 需要跳转的 H5页面是否禁止分享
   * @param {string} setting.image 需要跳转的 H5 分享的图片
   * @param {string} setting.title 需要跳转的 H5 分享的title
   * @param {function} setting.complete 跳转成功后的回调函数
   * @param {function} setting.message 用于获取 H5 中的 postMessage 的数据
   * @returns {void} 无返回值
   * @example
   * Page({ // 插件
      navToH5: function(e) {
        if (!this.TMSBridge) {
          const { TMSBridge } = requireMiniProgram(); // 引入小程序扩展能力
          this.TMSBridge = TMSBridge.bind(wx);        // 绑定当前调用域
        }
        this.TMSBridge.navigateToWebview({          // 跳转至H5页面
          url: 'https://tai.qq.com/test.html',
          message: ({ data }) => {
            // console.log('on postMessage:', data)
          },
        });
      },
    });
   */
  navigateToWebview({
    fpsc,
    url: webUrl,
    disableShare = true,
    imageUrl = '',
    title = '',
    from = '',
    navbarFrontColor = '',
    navbarBackgroundColor = '',
    complete = DEFN,
    message: cb,
  }) {
    const url = encodeURIComponent(webUrl);
    const routerPath = TMSBridge.navPageMap.get(webviewPath);
    const queryObj = {
      url,
      disableShare,
      image: imageUrl,
      title,
      from,
      navbarFront: navbarFrontColor,
      navbarBg: navbarBackgroundColor,
    };
    this.scope(fpsc).navigateTo({
      url: `${routerPath}?${serialize(queryObj)}`,
      complete,
      events: {
        onMessage: (res) => {
          typeof cb === 'function' && cb(res);
        },
      },
    });
  }

  /**
   * navigateToPlugin 方法 从插件中跳转到小程序中的另一个插件
   * @param {object} [setting] 配置信息(以下是setting的详解)
   * @param {string} setting.appId 需要跳转的插件 appId
   * @param {string} [setting.url] 需要跳转的插件路径和参数
   * @param {boolean} setting.fpsc 是否强制使用插件页面wx作用域
   * @param {string} setting.moduleName 需要跳转的插件标识（即将废弃）
   * @param {function} setting.complete 跳转成功后的回调函数
   * @returns {void} 无返回值
   * @exmaple 插件跳转另一个插件
    Page({
      navToPlugin: function(e) {
         if (!this.TMSBridge) {
          const { TMSBridge } = requireMiniProgram(); // 引入小程序扩展能力
          this.TMSBridge = TMSBridge.bind(wx);        // 绑定当前调用域
        }
        this.TMSBridge.navigateToPlugin({          // 跳转至目标插件页面
          url: '/inde?a=1&b=2',
          appId: 'xxxId',
        });
      },
    });
   */
  navigateToPlugin(setting) {
    const { appId, url, fpsc, moduleName, complete = DEFN } = setting;
    const name = appId || moduleName;
    let page = TMSBridge.navPageMap.get(name);
    page = page.replace(/\$\{(\w+)\}/g, (mstr, key) => {
      if (setting[key]) return setting[key];
      return mstr;
    });
    this.scope(fpsc).navigateTo({
      complete,
      url: `${page}${/\?/.test(page) ? '&' : '?'}name=${name}&path=${encodeURIComponent(url)}`,
    });
  }

  /**
   * chooseAddress 方法 插件调用主程序获取地址信息
   * @param {object} [setting] 配置信息(以下是setting的详解)
   * @param {function} setting.complete 选择地址后，回调函数，回调函数入参见下
   * @param {object} setting.complete.callback 以下回调函数的入参详解
   * @param {string} setting.complete.callback.name 收货人姓名
   * @param {string} setting.complete.callback.adCode 邮编
   * @param {string} setting.complete.callback.phone 收货人手机号码
   * @param {string} setting.complete.callback.region 行政区划信息（如：["广东省", "深圳市", "南山区"]）
   * @param {string} setting.complete.callback.errMsg 错误信息（成功时为空字符串）
   * @returns {void} 无返回值
   * @example
    Page({
      tapAddress: function(e) {
        if (!this.TMSBridge) {
          const { TMSBridge } = requireMiniProgram(); // 引入小程序扩展能力
          this.TMSBridge = TMSBridge.bind(wx);        // 绑定当前调用域
        }
        this.TMSBridge.chooseAddress({              // 获取地址信息
          complete: (res) => {
            // console.log("address", res);
            // {"errMsg":"","name":"张三","phone":"13800138000",
            // "adCode":"100180","region":["北京市","北京市","海淀区"],"address":"西北旺东路9号院"}
          },
        });
      },
    });
   */
  chooseAddress({ complete = DEFN }) {
    const { appId } = this.getAppId('plugin');
    this.scope().navigateTo({
      url: `${TMSBridge.navPageMap.get(addressPath)}?from=${appId}`,
      events: {
        onAddressSelected: (address) => {
          complete(address);
        },
      },
    });
  }

  /**
   * choosePassenger 方法 插件调用主程序获取出行人信息
   * @param {object} setting 配置信息(以下是setting的详解)
   * @param {string} setting.picktype 选择方式：选择单个人 single， 选择多个人 multiple
   * @param {function} setting.complete 选择出行人信息后，返回时获取数据
   * @param {object} setting.complete.callback 以下回调函数的入参详解
   * @param {string} setting.complete.callback.name 姓名
   * @param {array.<string>} setting.complete.callback.pinyin 名字拼音（如：["ZHANG", "SAN"]）
   * @param {string} setting.complete.callback.idnumber 身份证号
   * @param {string} setting.complete.callback.mobile 手机号，格式：国别码-电话号
   * @returns {void} 无返回值
   * @example
   * Page({
      tapInput: function(e) {
        if (!this.TMSBridge) {
          const { TMSBridge } = requireMiniProgram(); // 引入小程序扩展能力
          this.TMSBridge = TMSBridge.bind(wx);        // 绑定当前调用域
        }
        this.TMSBridge.choosePassenger({              // 获取出行人信息
          complete: ({ list }) => {
            // console.log("passenger", list);
            // [{"name":"张三","pinyin":["ZHANG","SAN"],"mobile":"86-13813881388","idnumber":"450702198809168886"}]
          },
        });
      },
    });
   */
  choosePassenger({ picktype = 'single', complete = DEFN }) {
    const { appId } = this.getAppId('plugin');
    this.scope().navigateTo({
      url: `${TMSBridge.navPageMap.get(passengerPath)}?from=${appId}&picktype=${picktype}`,
      events: {
        onPassengerSelected: (data) => {
          complete(data); // { list: [] }
        },
      },
    });
  }
}

export default TMSBridge;
 

TMSBridge

TMSBridge 类

object bind

bind 绑定当前调用域

参数

字段名	类型	说明	默认值	是否可选
wxc	object	需要执行方法的 wx 调用域	---	否

返回值

类型	说明
object	当前链式调用

示例代码

Example

Page({
      navToPlugin: function(e) {
        if (!this.TMSBridge) {
          const { TMSBridge } = requireMiniProgram(); // 引入小程序扩展能力
          this.TMSBridge = TMSBridge.bind(wx);        // 绑定当前调用域
        }
      },
    });

void navigateToMP

navigateToMP 方法 从插件中跳转到指定小程序的指定页面

参数

字段名	类型	说明	默认值	是否可选
setting	object	配置信息(以下是setting的详解)	---	是
setting.appId	string	需要跳转的小程序的appId，appId为空时表示跳转到当前小程序	---	否
setting.page	string	需要跳转页面的路径或名称	---	是
setting.query	string	需要跳转页面的参数	---	否
setting.fpsc	boolean	是否强制使用插件页面wx作用域	---	否
setting.complete	function	跳转成功后的回调函数	---	否
setting.message	function	用于页面的回传数据	---	否

返回值

类型	说明
void	无返回值

示例代码

Example

Page({
      navToPlugin: function(e) {
        if (!this.TMSBridge) {
          const { TMSBridge } = requireMiniProgram(); // 引入小程序扩展能力
          this.TMSBridge = TMSBridge.bind(wx);        // 绑定当前调用域
        }
        this.TMSBridge.navigateToMP({          // 跳转至小程序页面
          page: 'realname',
          query: 'from=hlzh',
          message: (res) => {
            // console.log(res);
          },
        });
      },
    });

void navigateToWebview

navigateToWebview 方法 从插件中跳转到小程序的 web-view 容器打开 H5

参数

字段名	类型	说明	默认值	是否可选
setting	object	配置信息(以下是setting的详解)	---	是
setting.fpsc	boolean	是否强制使用插件页面wx作用域	---	否
setting.url	string	需要跳转的 H5 链接	---	是
setting.disableShare	boolean	需要跳转的 H5页面是否禁止分享	---	否
setting.image	string	需要跳转的 H5 分享的图片	---	否
setting.title	string	需要跳转的 H5 分享的title	---	否
setting.complete	function	跳转成功后的回调函数	---	否
setting.message	function	用于获取 H5 中的 postMessage 的数据	---	否

返回值

类型	说明
void	无返回值

示例代码

Example

Page({ // 插件
      navToH5: function(e) {
        if (!this.TMSBridge) {
          const { TMSBridge } = requireMiniProgram(); // 引入小程序扩展能力
          this.TMSBridge = TMSBridge.bind(wx);        // 绑定当前调用域
        }
        this.TMSBridge.navigateToWebview({          // 跳转至H5页面
          url: 'https://tai.qq.com/test.html',
          message: ({ data }) => {
            // console.log('on postMessage:', data)
          },
        });
      },
    });

void navigateToPlugin

navigateToPlugin 方法 从插件中跳转到小程序中的另一个插件

参数

字段名	类型	说明	默认值	是否可选
setting	object	配置信息(以下是setting的详解)	---	是
setting.appId	string	需要跳转的插件 appId	---	否
setting.url	string	需要跳转的插件路径和参数	---	是
setting.fpsc	boolean	是否强制使用插件页面wx作用域	---	否
setting.moduleName	string	需要跳转的插件标识（即将废弃）	---	否
setting.complete	function	跳转成功后的回调函数	---	否

返回值

类型	说明
void	无返回值

void chooseAddress

chooseAddress 方法 插件调用主程序获取地址信息

参数

字段名	类型	说明	默认值	是否可选
setting	object	配置信息(以下是setting的详解)	---	是
setting.complete	function	选择地址后，回调函数，回调函数入参见下	---	否
setting.complete.callback	object	以下回调函数的入参详解	---	否
setting.complete.callback.name	string	收货人姓名	---	否
setting.complete.callback.adCode	string	邮编	---	否
setting.complete.callback.phone	string	收货人手机号码	---	否
setting.complete.callback.region	string	行政区划信息（如：["广东省", "深圳市", "南山区"]）	---	否
setting.complete.callback.errMsg	string	错误信息（成功时为空字符串）	---	否

返回值

类型	说明
void	无返回值

示例代码

Example

Page({
      tapAddress: function(e) {
        if (!this.TMSBridge) {
          const { TMSBridge } = requireMiniProgram(); // 引入小程序扩展能力
          this.TMSBridge = TMSBridge.bind(wx);        // 绑定当前调用域
        }
        this.TMSBridge.chooseAddress({              // 获取地址信息
          complete: (res) => {
            // console.log("address", res);
            // {"errMsg":"","name":"张三","phone":"13800138000",
            // "adCode":"100180","region":["北京市","北京市","海淀区"],"address":"西北旺东路9号院"}
          },
        });
      },
    });

void choosePassenger

choosePassenger 方法 插件调用主程序获取出行人信息

参数

字段名	类型	说明	默认值	是否可选
setting	object	配置信息(以下是setting的详解)	---	否
setting.picktype	string	选择方式：选择单个人 single， 选择多个人 multiple	---	否
setting.complete	function	选择出行人信息后，返回时获取数据	---	否
setting.complete.callback	object	以下回调函数的入参详解	---	否
setting.complete.callback.name	string	姓名	---	否
setting.complete.callback.pinyin	array.<string>	名字拼音（如：["ZHANG", "SAN"]）	---	否
setting.complete.callback.idnumber	string	身份证号	---	否
setting.complete.callback.mobile	string	手机号，格式：国别码-电话号	---	否

返回值

类型	说明
void	无返回值

示例代码

Example

Page({
      tapInput: function(e) {
        if (!this.TMSBridge) {
          const { TMSBridge } = requireMiniProgram(); // 引入小程序扩展能力
          this.TMSBridge = TMSBridge.bind(wx);        // 绑定当前调用域
        }
        this.TMSBridge.choosePassenger({              // 获取出行人信息
          complete: ({ list }) => {
            // console.log("passenger", list);
            // [{"name":"张三","pinyin":["ZHANG","SAN"],"mobile":"86-13813881388","idnumber":"450702198809168886"}]
          },
        });
      },
    });