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


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 入门讲解1
Apr 15 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
vue实现自定义多选按钮
Jul 16 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
PHP取进制余数函数代码
2012/01/19 PHP
php中hashtable实现示例分享
2014/02/13 PHP
浅谈php和.net的区别
2014/09/28 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
Python抓取京东图书评论数据
2014/08/31 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
在python中画正态分布图像的实例
2019/07/08 Python
Python进行特征提取的示例代码
2020/10/15 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
外贸业务员岗位职责
2013/11/24 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
商超业务员岗位职责
2015/02/13 职场文书
老乡聚会通知
2015/04/23 职场文书
首次购房证明
2015/06/19 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书