微信小程序跳转到其他网页(外部链接)的实现方法


Posted in Javascript onSeptember 20, 2019

个人类型和海外类型的小程序不支持 web-view 标签  也就是说个人申请的小程序,就别想跳转了!!!!

1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢?

2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开) 

3.wxml

1. index.wxml   (按钮页面)

<view class='wrapper'>
 <button class='wepay' bindtap='goBaidu'>点击跳转</button>
 </view>

2.out.wxml  (百度页面),

<web-view src="https://www.baidu.com/"></web-view>
//放心你没有看错就这么一行就行了
//把你要跳转的界面用src 就可以了,以后要跳转到哪,src里面地址就写哪!

3.别忘了,要在app.json中配置一下路由,

"pages":[
 "pages/a/a",
 "pages/b/b"
 ],

电脑上是可以跳转的,体验版的话,在手机上是不好使的,除非你已经在小程序后台完成了配置域名,但是!!!!

注意!!这是顶级注释:请看第四条

4.需要配置业务域名并上传验证文件:

4.1校验文件需要放在你要跳转到的网站的根目录下面才可以!!!也就是说你想跳转到别人网站网页里面 需要得到别人的同意!!

那比如这个跳转到www.baidu.com 就是行不通的了,只能是自己在开发的时候玩玩(在开发者工具中点设置-项目设置-在不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 前面打上对勾),在正式发布时候肯定是行不通的!!!

4.2那你想跳转到自己的网站中就需要配置域名、下载校验文件了!!再次强调 个人类型与海外类型的小程序暂不支持使用web-view

进入到小程序后台 https://developers.weixin.qq.com   设置-开发设置 -业务域名

微信小程序跳转到其他网页(外部链接)的实现方法

微信小程序跳转到其他网页(外部链接)的实现方法

4.3web-view 的 src可以是可打开关联的公众号的文章地址! (打开公众号这块也是个坑)

5.index.js

goBaidu:function(){
 wx.navigateTo({
  url:'../out/out', //
  success:function() {
 
  },  //成功后的回调;
  fail:function() { },   //失败后的回调;
  complete:function() { }  //结束后的回调(成功,失败都会执行)
 })

6.效果图

微信小程序跳转到其他网页(外部链接)的实现方法

微信小程序跳转到其他网页(外部链接)的实现方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
vue 实现单选框设置默认选中值
Nov 07 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
微信用户访问小程序的登录过程详解
Sep 20 #Javascript
解决layUI的页面显示不全的问题
Sep 20 #Javascript
小程序如何获取多个formId实现详解
Sep 20 #Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 #Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 #Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 #Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 #Javascript
You might like
PHP实现多文件上传的方法
2015/07/08 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
详解javascript void(0)
2020/07/13 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
python调用百度语音REST API
2018/08/30 Python
flask session组件的使用示例
2018/12/25 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Python requests模块实例用法
2019/02/11 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
2014年高三毕业生自我评价
2014/01/11 职场文书
人事文员岗位职责
2014/02/16 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
授权委托书怎么写
2014/09/25 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
环卫处个人工作总结
2015/03/04 职场文书
体育委员竞选稿
2015/11/21 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python