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


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 相关文章推荐
javascript中setTimeout的问题解决方法
May 08 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
微信小程序自定义组件
Aug 16 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
利用javaScript处理常用事件详解
Apr 14 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
深入了解Python enumerate和zip
2020/07/16 Python
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
学校节能宣传周活动总结
2014/07/09 职场文书
踏青活动策划方案
2014/08/19 职场文书
干部作风建设心得体会
2014/10/22 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
小兵张嘎观后感
2015/06/03 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android