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


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 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
JS跨浏览器解析XML应用过程详解
Oct 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
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
简历上的自我评价怎么写
2014/01/28 职场文书
国家助学金获奖感言
2014/01/31 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
医德考评自我评价
2014/09/14 职场文书
交通安全横幅标语
2014/10/07 职场文书
2014年医务科工作总结
2014/12/18 职场文书
起诉书格式范文
2015/05/20 职场文书