开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

背景

对于h5页面嵌入小程序和移动端混入式开发的一些跳转方式总结，提供给大家，掘友们相互学习，共同进步！

一.微信小程序内嵌h5

1.配置域名

在微信小程序后台，开发-开发管理-开发设置-业务域名这里添加需要嵌入到小程序里面 H5 页面的合法域名（最多200个）；

业务域名 | 微信开放文档developers.weixin.qq.com/miniprogram/dev/framework/ability/domain.html

2.使用web-view 组件

每个页面只能有一个 web-view组件，并且 web-view组件将默认展示在最高层级；

<web-view src="xxxxxxxxxx"></web-view>

web-view | 微信开放文档developers.weixin.qq.com/miniprogram/dev/component/web-view.html

二.嵌入的h5返回跳转到原小程序(微信浏览器内）

web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。

//安装插件
npm i -S weixin-js-sdk 

//引入
import wx from 'weixin-js-sdk'


 wx.miniProgram.getEnv((res: any) => {
      if (res.miniprogram) {
        wx.miniProgram.navigateTo({
          url: '/pages/message/customerService' //如果需要传递参数的话可以通过 url 路径拼接
        });
        return;
      } else {
        console.log('不在小程序中');
        return;
      }
    });

三.嵌入的h5返回跳转到指定小程序

注意查看开放对象的条件，看官方文档也有对应跳转app

目录 | 微信开放文档developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['showMenuItems'], // 必填，需要使用的JS接口列表，不能为空，为空的话安卓会有问题
  openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

注意：如果页面报错找不到模板wx-open-launch-weapp,可以在main.js配置

//main.js
Vue.config.ignoredElements = ['wx-open-launch-weapp'];


<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>

四.外部网页H5跳转小程序

1.使用URL Scheme的方式来实现（URL Scheme的有效期只有30天）

2.获取 URL Link（URL Link有效期最长 30 天）

获取 URL Scheme | 微信开放文档developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

urlscheme.generate | 微信开放文档developers.weixin.qq.com/miniprogram…

五.h5嵌入移动端（安卓）跳转

注意：需和安卓端约定把方法放到webview的window下然后直接调这个方法

window && window.Android && window.Android.insuranceRobot && window.Android.insuranceRobot()

vue微信小程序,移动端h5跳转

背景