vue实现快应用落地页

1,325 阅读2分钟

URL 跳转配置

URL 跳转配置是指在 H5 页面中可以通过调用接口跳转到应用。

接入方式

使用本功能,需要在网页中嵌入以下 js,支持 HTTP 与 HTTPS 访问。

 <script type="text/javascript" src="//statres.quickapp.cn/quickapp/js/routerinline.min.js"></script>

注意:appRouter 和 channelReady 方法需要在 body 标签内调用,不支持在 head 标签里调用。(直接调用或引入外部 JS 文件调用均可)

调起应用

appRouter(packageName, path, params, confirm)

packageName:配置跳转快应用的包名,包名和 manifest.json 的"package"属性保持致。

path:配置跳转的页面路径,对应 manifest.json 中 router 下 page 的 path 字段。
如果不传 path 值或 path 值为空字符串,跳转时会打开首页

params:配置透传给快应用页面的参数。如果不传 params,会默认使用当前加载此 appRoute
函数的网页 url 的参数值作为 params 的值。

confirm	:配置在跳转确认弹窗中显示的文案。当confirm值被框架转换为Boolean类型,且结
值为 false 时,如 confirm 值为空字符串、undefined、null 等,表示无需用户确认直
跳转;否则,表示跳转时需要用户确认,且弹框显示 confirm 文案。

vue导入快应用sdk

 mounted() {
	 const s = document.createElement('script');
	 s.type = 'text/javascript';
	 s.src = '//statres.quickapp.cn/quickapp/js/routerinline.min.js';
	 document.body.appendChild(s);
	},

事件触发快应用中心跳转

appRouter('com.xx.xx',
        '/target',
       { param1: 12, param2: 34 })

全部代码

import headTop from 'src/components/header/head'
import alertTip from 'src/components/common/alertTip'

export default {
  data() {
    return {
      system: null,
      showAlert: false,
      alertText: null,
    }
  },
  created() {
    //判断系统
    let u = navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
      this.system = 'Android';

    } else if (isIOS) {
      this.system = 'IOS';

    } else {
      this.system = 'pc';
      alert('请使用移动设备打开该网页')
      console.info("请使用移动设备登录")
    }
  },
  mixins: [],
  components: {
    headTop,
    alertTip,
  },
  props: [],
  mounted() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = '//statres.quickapp.cn/quickapp/js/routerinline.min.js';
    document.body.appendChild(s);
    console.info("===========mounted===============")
  },
  methods: {

skipQuickApp() {
  //如果是ios用户则提示,否则直接下载
  if (this.system == 'IOS') {
    this.showAlert = true;
    this.alertText = 'IOS用户请前往AppStore下载'
  } else {
    try {
      appRouter('com.xxx.xxx',
        '/Reader',
        { params1: xxx, params2: xxx })
    } catch (e) {
      console.info(e)
      alert('跳转失败')
    }
  }
}
}
}
</script>