小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题

问题描述：
点击小程序中的一个按钮或者一个banner图片，通过小程序web-view组件到进入一个vue的页面中，在该vue页面中点击图片无法按照要求回到指定的小程序中，点击操作没有任何反应。
解决思路：
小程序的官方文档中有如下介绍，引入微信的JSSDK1.3.2就可以执行在网页中跳转到小程序等功能。

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })

这里笔者一开始并没有才上直接引入上述文档的方式，而是通过如下方式引入的JSSDK.
安装：

npm install weixin-js-sdk --save

使用：
在需要使用的vue文件中使用如下方式：

import wx from 'weixin-js-sdk'

引入之后，读者可以在create或者mounted中通过console.log(wx)的形式，在控制台上打印出相关信息，如果没有打印出来的是undefined，说明微信jssdk并没有引入，这时候，读者可以通过以下方式引入。

var wx = require('weixin-js-sdk');

引入之后，同样需要打印微信对象，只有出现正常的对象体，才能说明引入成功。
如果以上两种方式都没有引入成功，读者就需要使用最直接的方式了，在index.html中使用

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

这种形式来进行直接引用。
正常情况下，import的方式是可以引入成功的，如果读者没有引入成功，请尝试刷新浏览器重试。
如果读者使用了eslint校验，使用微信方法的时候报错，可使用如下方式取消校验。
在调用微信方法的代码上一行加入如下注释：

// eslint-disable-next-line

即可忽略校验。
当我们确定正常引入之后，我们在页面中使用了wx.miniProgram.navigateTo()方法，但是，却没有反应，这该怎么解决呢？
请检查webpack.prod.conf.js文件中，是否有以下内容：

new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false}},sourceMap: config.build.productionSourceMap,parallel: true}),

将以上内容替换为以下内容：

new UglifyJsPlugin({test: /\.js$/i}),

ok，重新编译运行项目，在web-view中的点击事件就会有效果了。
感兴趣的读者可以关注博主，查看博主其他文章——小圣贤君。

小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题相关推荐

好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
vue如何获取年月日_好程序员web前端教程分享Vue相关面试题
好程序员web前端教程分享Vue相关面试题,Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来好程序 ...
ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了).拿来调试DeveMobile 与EaseMobile 主题时候发现了不少问题,现在在一 ...
vue h5网页点击按钮 -- 跳到微信小程序 wx-open-launch-weapp；onMenuShareAppMessage 分享图片不显示，且方法已废弃
h5网页点击按钮,唤醒微信小程序是否可以做? 可以!!,就是有点限制. 通过wx-open-launch-weapp就可以实现,但是限制微信服务号才可以使用.也就是说必须是微信环境下. 文章最下边, ...
微信小程序内使用echart实现中国地图，点击省跳转省地图，再点击市跳转到市区详情
目的:在微信小程序内实现一张中国地图,上面要写上一些全国数据,点击省 => 省地图,并请求数据,点击市区 => 跳转到市区地图这样一个功能,具体实现效果如下: 思路: 1.首先我们要先画 ...
微信公众号微信服务号如何实现服务号点击消息跳转进入小程序
时间:2020-07-27 目前微信服务号的图文消息只支持点击只能跳H5,从下图可以看出只能配置url,并不能配置小程序页面: 那么我们需求来了,现在必须要给用户推一条消息,而且用户点击消息要求跳 ...
魅族html查看程序退出,魅族MX2左下角屏幕失灵自动点击怎么解决_魅族2程序自动返回退出的原因...
类型:手机主题大小:5.0M语言:中文评分:5.0 标签: 立即下载先说说这个问题是怎么来的.可以肯定的是魅族2左下角屏幕失灵绝对不是机子硬件问题,换屏幕什么的你就去找坑吧!很简单就能解决的问题, ...
vue swiper中点击预览图片全屏预览图片 vue点击查看大图
希望实现的效果,见下图使用到的插件使用到的插件 vue-photo-preview 第一步:安装插件 npm install vue-photo-preview --save 第二步:引用 imp ...
vue项目中点击button下载文件到浏览器
代码实现在src 下面的 directive 文件夹下新建目录 down-load-url down-load-url / index.js文件 /*index.js文件* 后端返回文件的url,前 ...

小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题

小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题相关推荐

最新文章

热门文章