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


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 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
javascript中递归的两种写法
Jan 17 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
javascript实现的动态文字变换
2007/07/28 Javascript
简明json介绍
2008/09/28 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
node.js的http.createServer过程深入解析
2019/06/06 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
使用python 获取进程pid号的方法
2014/03/10 Python
Python判断操作系统类型代码分享
2014/11/22 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
利用Python如何生成随机密码
2016/04/20 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
解决方案设计综合面试题
2015/08/31 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2014年教研组工作总结
2014/11/26 职场文书
放假通知
2015/04/14 职场文书