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


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 分页控件实现代码
Nov 30 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
Node 自动化部署的方法
Oct 17 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
php实现网站插件机制的方法
2009/11/10 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
关于php开启错误提示的总结
2019/09/24 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
原生js实现自定义滚动条组件
2021/01/20 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python显示天气预报
2014/03/02 Python
Python中多线程thread与threading的实现方法
2014/08/18 Python
python批量提取word内信息
2015/08/09 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python类的动态绑定实现原理
2020/03/21 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
keras 多任务多loss实例
2020/06/22 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
中专毕业生个人职业生涯规划
2014/02/19 职场文书
林肯就职演讲稿
2014/05/19 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
小学见习报告
2014/10/31 职场文书
运动会观后感
2015/06/09 职场文书
初中团委工作总结
2015/08/13 职场文书
php引用传递
2021/04/01 PHP
详解PHP设计模式之依赖注入模式
2021/05/25 PHP