vue 后台管理系统 实现扫码二维码跳转到小程序，小程序显示与二维码相关联的信息页面，同时不需要用户在小程序内登录，且该信息页面要求用H5编写

需求：在后台管理系统生成二维码，打印二维码，家长扫码时，实现扫码二维码跳转到小程序，小程序显示与二维码相关联的信息页面，同时不需要家长在小程序内登录就能查看该二维码对应的认课老师的任教信息。要求用H5编写代码。

思路：可以将这个需求分解为几个步骤来处理：

一. 生成二维码

在Vue后台管理系统中，我们需要为每条需要展示的信息生成一个唯一的标识符（如ID或UUID），并基于这个标识符生成一个二维码。这个二维码将包含足够的信息（比如一个URL或者是一个加密后的标识符），以便小程序在扫描后能识别并加载相应的信息。

在这里，我是直接向后端同事获取对应的接口，根据要求传入所需入参，来调用后端接口获取二维码。

二. 编写h5页面，获取地址及URL参数值

1、H5网页地址：小程序和H5不是同一个环境，H5应用运行在浏览器环境中。需要为该H5页面添加路由到Vue Router中，编写H5页面，获取该H5的网页地址。

2、小程序的参数及值：将小程序的值通过URL传给H5页面接收后，通过window.location.hash来获取整个哈希值（包括#号），在通过split等操作获取小程序通过地址带入的参数及值。

<template>
  <div class="XXInformation" style="height:100%">
    <h3 class="title">关于{{personForm.name}}的个人任教信息</h3>
    <p>{{personForm.detail}}</p>
  </div>
</template>

<script>
import {h5XxAction} from '@/api/user';
export default {
  name: 'h5XxInformation',
  data() {
    return {
      personForm:{name:null,detail:null},
    }
  },
  created() {
    let hash = window.location.hash; // 获取整个哈希值，包括#号  
    hash = hash.substring(1); // 移除开头的#号
    let xxString= hash.split('?')[1]; // 假设哈希值中一定包含?号，这里不做错误处理  
    let params = new URLSearchParams(xxString);
    let personValue = params.get('deadId');
    h5XxAction({id:personValue}).then((res) =>{     
       this.personForm=res['data'] || {};
    });
  },
  methods: {
  }, 
}
</script>
<style lang="scss">
.XXInformation {
  margin: 20px;
  line-height: 18px;
  text-align: center;
}
</style>

三. 编写小程序端

1、利用web-view组件：通过使用web-view，开发者可以在小程序中直接展示H5页面，而无需将用户引导到外部浏览器。web-view 展示的内容通常是H5页面，即使用HTML5、CSS和JavaScript等技术开发的网页。

2、获取小程序新增页面的页面路径：在小程序新增web-view页面，该新增页面的页面路径是扫码后跳转到小程序指定页面的路径，提交微信审核、发布后，将该页面路径提供给后端开发。

// 新增页面.wxml
<web-view src="{{src}}">
</web-view>

3、添加编译模式：

1）微信开发者工具上添加二维码的编译模式：

2）通过生命周期函数onLoad(options){} , 监听页面加载并调试options.scene。

4、通过URL传值：将小程序的参数及值通过URL传给H5页面接收，即将options.scene加至需要打开的H5地址的后面。

/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let scene = decodeURIComponent(options.scene&&options.scene.replace('=','%3D'));
    this.data.src ='H5网页地址?'+scene;
    this.setData({
      src: this.data.src
    });
  },

通过以上步骤，我可以在Vue后台管理系统中实现扫码跳转到小程序，并在小程序中无登录展示相关信息的功能。