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


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 表单取值赋值的一些基本操作
Oct 11 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
为什么node.js不适合大型项目
Apr 28 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
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
python实现简单的socket server实例
2015/04/29 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
详解Python多线程下的list
2020/07/03 Python
如何利用python发送邮件
2020/09/26 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
施工安全协议书
2013/12/11 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
倡议书的格式写法
2015/04/28 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang