微信小程序与H5的通信

如何实现小程序与h5页面之间的通信呢？ok，让我们在小程序文档里找寻答案 developers.weixin.qq.com/miniprogram…
没错，猪脚正是 web-view

一、为什么

首先考虑为什么要实现小程序与h5页面之间的通信？
最主要的是便于项目的维护，App端、微信端、小程序若共用一套代码，岂不是很方便我们这些搬砖工呢？想想就开心吧

二、是什么

web-view 是小程序提供的承载网页的容器。会自动铺满整个小程序页面，个人类型 的小程序 暂不支持使用，但可以在开发者工具预览效果。值得注意的是 每个页面 只能有 一个 <web-view></web-view>，它会覆盖其他组件

三、怎么做

1、首先实现h5页面跳转到小程序

html代码中引入JSSDK

<script https://res.wx.qq.com/open/js/jweixin-1.3.0.js></script>

如果是vue-cli项目，通过npm安装

npm install weixin-js-sdk

然后在需要引用jssdk的页面引入

import wx from 'weixin-js-sdk';

我的项目是用了vue-cli，所以只在main.js进行全局配置就好

import Vue from 'vue';
import Router from 'vue-router';
import wx from 'weixin-js-sdk';

Vue.use(Router);
const routes = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/views/index.vue'), // 路由懒加载
    meta: {
      title: '标题',
    },
  },
];
const router = new Router({
  routes,
});

// 设置变量
window.isWxProgram = false;

// 判断是否是小程序环境
wx.miniProgram.getEnv((res) => {
  window.isWxProgram = res.miniprogram;
});

// 通过路由的beforeEach来进行限制,定义全局钩子
router.beforeEach((to, from, next) => {
  // 跳转路由时,如果有title则设置标题
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  // 如果是小程序环境
  if (window.isWxProgram) {
    // 跳转至小程序（传参）
    wx.miniProgram.navigateTo({ url: `/pages/detail/detail?param=${encodeURIComponent(to.fullPath)}` });
    // 保持当前路由不进行跳转
    next(false);
  } else {
    next();
  }
});
export default router;

2、使用web-view组件显示h5页面

.wxml
<web-view src="{{url}}"></web-view>

.js
Page({
  data: {
    url: '',
  },
  onLoad: function (options) {
    const url = decodeURIComponent(options.param);  //接受网页参数
    this.setData({
      url: `http://localhost:8081/#${url}` // 跳转到网页地址并传参
    })
  },
})

总结

到这里，小程序与H5的通信就实现啦 ~
是不是很简单呢，嘻嘻嘻

金主粑粑，I Need You ~