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


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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
JQuery live函数
Dec 24 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
轮播图组件js代码
Aug 08 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
详解http访问解析流程原理
Oct 18 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 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 header Content-Type类型小结
2011/07/03 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
Python线程创建和终止实例代码
2018/01/20 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
护士自我介绍信
2014/01/13 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
2015年组织部工作总结
2015/04/03 职场文书
开会通知
2015/04/20 职场文书
邹越演讲观后感
2015/06/15 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
python 安全地删除列表元素的方法
2022/03/16 Python
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python