微信小程序跳转功能实战笔记

背景：1、vue-cli3环境  vue项目中使用微信小程序的方法

           2、要实现从web-view内嵌的H5页面返回小程序

遇到的问题：1、微信提供了5种返回方法，但不知道用哪个，没用对的话，功能不起作 

                      2、引入微信方法库时候，会存在一些问题api方法库：

解决过程:

测试：拥有一个微信开发工具，一个生成二维码工具，用于调试，还有一个苹果手机和一个安卓手机

微信api库：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

vue写一个demo页，url是小程序项目里的app.json中的路径。（小程序demo是用来扫描二维码跳转H5页面的）

微信跳转方法有5个，对于自己的需求哪个有用还是不知道的，所以需要5种方法都测试下,总有一个是适合自己的

vue demo.vue

<template>

<div>

   <div @click="navigateTo">wx.miniProgram.navigateTo</div>

    <div @click="navigateBack">wx.miniProgram.navigateBack</div>

    <div @click="switchTab">wx.miniProgram.switchTab</div>

    <div @click="reLaunch">wx.miniProgram.reLaunch</div>

    <div @click="redirectTo">wx.miniProgram.redirectTo</div>

  </div>

</template>

<script>

import Vue from "vue";

import wx from "weixin-js-sdk";

Vue.use(wx);

export default {

  name: "demo",

  methods: {

    navigateTo() {

      var ua = window.navigator.userAgent.toLowerCase();

 

      if (ua.match(/MicroMessenger/i) == "micromessenger") {

        //判断是不是微信

        wx.miniProgram.getEnv(function(res) {

          console.log("envRes", res);

          if (res.miniprogram) {

            //表示已在小程序环境中

            console.log("已在小程序环境内");

            wx.miniProgram.navigateTo({

              url: "pages/index/index", //小程序跳转路径

              success: function() {

                console.log("success", "navigateTo");

              },

              fail: function() {

                console.log("跳转回小程序的页面fail", "navigateTo");

              },

            });

          } else {

            console.log("不在小程序环境内", "navigateTo");

          }

        });

      }

    },

    navigateBack() {

      var ua = window.navigator.userAgent.toLowerCase();

 

      if (ua.match(/MicroMessenger/i) == "micromessenger") {

        //判断是不是微信

        wx.miniProgram.getEnv(function(res) {

          console.log("envRes", res);

          if (res.miniprogram) {

            //表示已在小程序环境中

            console.log("已在小程序环境内");

            wx.miniProgram.navigateBack({

              url: "pages/index/index", //小程序跳转路径

              success: function() {

                console.log("success", "navigateBack");

              },

              fail: function() {

                console.log("跳转回小程序的页面fail", "navigateBack");

              },

            });

          } else {

            console.log("不在小程序环境内", "navigateBack");

          }

        });

      }

    },

    switchTab() {

      var ua = window.navigator.userAgent.toLowerCase();

 

      if (ua.match(/MicroMessenger/i) == "micromessenger") {

        //判断是不是微信

        wx.miniProgram.getEnv(function(res) {

          console.log("envRes", res);

          if (res.miniprogram) {

            //表示已在小程序环境中

            console.log("已在小程序环境内");

            wx.miniProgram.switchTab({

              url: "pages/index/index", //小程序跳转路径

              success: function() {

                console.log("success", "switchTab");

              },

              fail: function() {

                console.log("跳转回小程序的页面fail", "switchTab");

              },

            });

          } else {

            console.log("不在小程序环境内", "switchTab");

          }

        });

      }

    },

    reLaunch() {

      var ua = window.navigator.userAgent.toLowerCase();

 

      if (ua.match(/MicroMessenger/i) == "micromessenger") {

        //判断是不是微信

        wx.miniProgram.getEnv(function(res) {

          console.log("envRes", res);

          if (res.miniprogram) {

            //表示已在小程序环境中

            console.log("已在小程序环境内");

            wx.miniProgram.reLaunch({

              url: "pages/index/index", //小程序跳转路径

              success: function() {

                console.log("success", "reLaunch");

              },

              fail: function() {

                console.log("跳转回小程序的页面fail", "reLaunch");

              },

            });

          } else {

            console.log("不在小程序环境内", "reLaunch");

          }

        });

      }

    },

    redirectTo() {

      var ua = window.navigator.userAgent.toLowerCase();

 

      if (ua.match(/MicroMessenger/i) == "micromessenger") {

        //判断是不是微信

        wx.miniProgram.getEnv(function(res) {

          console.log("envRes", res);

          if (res.miniprogram) {

            //表示已在小程序环境中

            console.log("已在小程序环境内");

            wx.miniProgram.redirectTo({

              url: "pages/index/index", //小程序跳转路径

              success: function() {

                console.log("success", "redirectTo");

              },

              fail: function() {

                console.log("跳转回小程序的页面fail", "redirectTo");

              },

            });

          } else {

            console.log("不在小程序环境内", "redirectTo");

          }

        });

      }

    },

  },

};

</script>

<style lang="less" scoped>

.main {

  width: 100%;

  div {

    height: 0.8rem;

    line-height: 0.8rem;

    border-bottom: 0.02rem solid #000000;

  }

}

</style>

 

还有一个问题，就是vue项目里如果是引用微信方法的script脚本，在ios系统里是不起作用的，需要使用npm进行安装，安装命令是：npm i weixin-js-sdk@1.4.0-test

我的实战经验，希望能帮到你们。