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


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 仿QQ滑动菜单效果代码
Sep 03 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
js实现拖拽效果
Feb 12 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 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个人网站架设连环讲(一)
2006/10/09 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
PHP图片加水印实现方法
2016/05/06 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
python web框架 django wsgi原理解析
2019/08/20 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
如何写好建议书
2014/03/13 职场文书
太空授课观后感
2015/06/17 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
Django框架之路由用法
2022/06/10 Python