微信小程序与H5的通讯

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

1、为何

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

2、是什么

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

3、怎么作

一、首先实现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;
复制代码

二、使用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 ~