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


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 相关文章推荐
使用js画图之画切线
Jan 12 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
Angularjs过滤器使用详解
May 25 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
js实现网页版贪吃蛇游戏
Feb 22 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 获取本机外网/公网IP的代码
2010/05/09 PHP
PHP反射机制用法实例
2014/08/28 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
Python 中 Meta Classes详解
2016/02/13 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
pytest中文文档之编写断言
2019/09/12 Python
Python生成词云的实现代码
2020/01/14 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
三方合作协议书范本
2014/04/18 职场文书
租车协议书范本
2014/04/22 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
入党政审材料范文
2014/12/24 职场文书
大班下学期个人总结
2015/02/13 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
python turtle绘图命令及案例
2021/11/23 Python
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL