H5页面跳转小程序wx.miniProgram undefined 问题解决

uniapp开发的HTML5页面跳转小程序:wx.miniProgram undefined 问题解决

背景

小程序开发过程中有新的需求，需要实现在小程序中内嵌H5页面，然后H5项目也能返回小程序的功能。由于要研究是否可行，先准备了一个简单的小程序，小程序只有两个页面：一个页面内嵌H5页面，另一个为小程序的普通页面。如果能通过内嵌H5页面跳转小程序的普通页面，则说明方案可行。

问题现象

内嵌H5页面很简单，通过web-view可以实现，这里就不多做介绍。H5页面中只有个简单的返回按钮，用来返回小程序的普通页面。写完之后运行发现点击返回按钮页面没有任何反应。页面效果如下，点击按钮没有任何反应。

分析问题

通过阅读代码，发现是wx.miniProgram为undefined，导致报错，代码很简单如下：

经过查找分析，发现是js引入没有成功，js引入代码如下：

后面百度发现，原来uniapp不能像上图中那样引用js，需要动态引入，如下：

var script = document.createElement('script');
  script.src = "js地址";
  document.body.appendChild(script);

解决方法

在app.vue文件中动态引入js

这样就不会有undefined问题了！搞定！收工！