微信小程序與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 ~