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


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 相关文章推荐
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
PHP 网页过期时间的控制代码
2009/06/29 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python使用pil生成缩略图的方法
2015/03/26 Python
python获取url的返回信息方法
2018/12/17 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Python 如何测试文件是否存在
2020/07/31 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
机关会计岗位职责
2014/04/08 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
暑假学习心得体会
2014/09/02 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
房屋买卖协议样本
2014/11/16 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
新闻稿怎么写
2015/07/18 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis