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


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数据表格插件
Jul 17 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
javascript for循环性能测试示例
Aug 07 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 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 和 MySQL 基础教程(一)
2006/10/09 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
学习vue.js计算属性
2016/12/03 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
nodejs基础应用
2017/02/03 NodeJs
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
实习自我鉴定范文
2013/10/30 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
家装业务员岗位职责
2015/04/03 职场文书
2015年司机工作总结
2015/04/23 职场文书
小学信息技术教学反思
2016/02/16 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
python字符串常规操作大全
2021/05/02 Python