欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

微信小程序跳转到其他网页(外部链接) 有大用

微信小程序跳转到其他网页(外部链接)

置顶 2018年03月08日 13:48:50 棋鬼王 阅读数:57926            


个人类型海外类型的小程序不支持 web-view 标签  也就是说个人申请的小程序,就别想跳转了!!!!

1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢?

2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开) 

3.wxml

   1. index.wxml   (按钮页面)

  1. <view class='wrapper'>                        
  2. <button class='wepay' bindtap='goBaidu'>点击跳转</button>                        
  3. </view>                        
           

   2.out.wxml  (百度页面),

<web-view src="https://www.baidu.com/"></web-view>
           
//放心你没有看错就这么一行就行了//把你要跳转的界面用src 就可以了,以后要跳转到哪,src里面地址就写哪!
           

    3.别忘了,要在app.json中配置一下路由,

  1. "pages":[
  2. "pages/a/a",
  3. "pages/b/b"                        
  4. ],
           

    电脑上是可以跳转的,体验版的话,在手机上是不好使的,除非你已经在小程序后台完成了配置域名,但是!!!!            

注意!!这是顶级注释请看第四条            


4.需要配置业务域名并上传验证文件:            

这个是我本人的,前端技术QQ交流群,有不会的问题,可以在在群里面问            

如果文章对你有帮助  希望各位可以给我的群 冲冲人气             

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

  1. goBaidu:function(){
  2. wx.navigateTo({
  3. url:'../out/out', //                        
  4. success:function() {
  5. },       //成功后的回调;                        
  6. fail:function() { },         //失败后的回调;                        
  7. complete:function() { }      //结束后的回调(成功,失败都会执行)                        
  8. })
           

6.效果图

           

这是我的微信公众号            

不定期更新前端知识


来自  https://blog.csdn.net/qq_32113629/article/details/79483213



微信小程序是否支持跳转到外部url网页链接

原创 时间:08-06 16:03 阅读:5083次 来源:山东奔奔兔信息科技有限公司

摘要:用微信小程序提供的组件支持跳转到外部url网页链接,该url在原小程序内打开,跳转的域名必须为https域名,配置业务域名,且跳转域名需通过服务器根目录上传文件验证。

用微信小程序提供的组件支持跳转到外部url网页链接,该url在原小程序内打开,跳转的域名必须为https域名,配置业务域名,且跳转域名需通过服务器根目录上传文件验证。

比如我是我是腾讯新闻小程序,是否可以跳转到腾讯新闻网址的任一url?

可以,用到微信小程序提供的组件,下图是官方介绍

01.jpg

按规则写入要跳转的链接即可实现在小程序内打开网页。

注意,这个链接需要满足2个条件,第一个在小程序管理后台设置跳转的域名为业务域名,注意这个域名必须是https协议的;

第二个需要下载一个校验文件放置跳转域名的服务器根目录下,也就是讲这个跳转域名的服务器你必须有上传文件权限。

此外,注意跳转这个链接只能在原小程序内打开,不是新开一个浏览器去访问url。

002.jpg 

比如我是腾讯新闻小程序,是否能做个链接到360导航首页?

不可以,因为就算借助web-view组件,刚才讲了跳转的域名有个条件是下载一个校验文件放置跳转域名的服务器根目录下,测试版可以看看效果,但是现实真机操作中,腾讯是无法获取360服务器的ftp权限的,所以是实现不了,大部分应用场景都是跳转到自家产品的url。
 

 


声明:本文由山东奔奔兔信息科技有限公司企业号发布,依据企业号用户协议,该企业号为文章的真实性和准确性负责。创头条作为品牌传播平台,只为传播效果负责,在文章不存在违反法律规定的情况下,不继续承担甄别文章内容和观点的义务。

来自  http://www.ctoutiao.com/891889.html


微信小程序跳转到其他网页(外部链接)


1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢?

2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开)

3.wxml

   1. index.wxml   (按钮页面)

  1. <view class='wrapper'>
  2. <button class='wepay' bindtap='goBaidu'>点击跳转</button>
  3. </view>

   2.out.wxml  (百度页面),把你要跳转的界面用src 就可以了,以后要跳转到哪,src里面地址就写哪!

    电脑上是可以跳转的,体验版的话,在手机上是不好使的,除非你已经在小程序后台完成了配置域名

<web-view src="https://www.baidu.com/"></web-view>//放心你没有看错就这么一行就行了

    3.你要新建项目,别忘了,要在app.json中配置一下路由,

"pages":[

  1. "pages/index/index",
  2. "pages/logs/logs",
  3. "pages/out/out"
  4. ],

4.需要配置业务域名并上传验证文件(自行百度)

5.index.js

  1. goBaidu:function(){
  2. wx.navigateTo({
  3. url:'../out/out'//
  4. success:function({
  5. }, //成功后的回调;
  6. fail:function({ }, //失败后的回调;
  7. complete:function({ } //结束后的回调(成功,失败都会执行)
  8. })

6.效果图


来自  https://blog.csdn.net/xinzi11243094/article/details/80943607


建站宝盒是基于对数万中小企业用户建站需求而打造的一款自助建站系统。由上千套网站模版、上百种网站功能模块、手机网站、网站推广相结合组成。帮助企业一步跨越了从注册域名、租用主机、网站开发到最终发布网站的复杂过程,实现了网站即买即开通。那么在用建站宝盒时如何在小程序添加外部链接

方法/步骤

  1. 1

    首先我们打开登录小程序


  2. image.png


  3. 2

点击左侧导航栏<设置>,<开发设置>

image.png


  1. image.png
  2. 3

    往下拉至<业务域名>,点击修改


  3. image.png

  4. 4

    需要管理员扫码进入


image.png


  1. 5

    添加要跳转的超链接网址。添加前先浏览器打开该网址确保能打开。确保是有效和已备案域名,且https协议开头。添加网址点击保存。 注意:配置绑定域名的网站必须添加微信下载的校验文件,如下图箭头所示,下载文件添加到网站目录里面。否则当前链接不能打开


  2. image.png

  3. 6

    小程序业务域名最多可以添加20个,一年只能修改50次。要记得哦


  4. image.png


  5. 7

    保存完毕之后。现在可以添加超链接网址了。

    END
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。

来自  https://jingyan.baidu.com/article/cbf0e5004ba3f82eaa289301.html



微信小程序跳转外链web-view用法


小程序已经开放了,跳转外链的功能,意思是,在小程序里面可以直接跳转到一个h5页面中。 
这里写图片描述
注意上图中的两个信息: 
1.个人类型与海外。。。。不支持。 
2.配置域名白名单。 
基本的配置结束之后,我们就来开始用web-view这个插件了。 
这里写图片描述 
这里写图片描述

<web-view src="https://hx.qq.com/zlkdatasys/mct/proj_1/download.shtml?media=20180320wx&back=cururl"> </web-view>
  • 1

由于这样写在页面上,这个链接会自动跳转。所以我另建了一个outurl文件夹,新建一个index.wxml页面将这个代码放在这个页面里面,然后在本页面点击‘下载手游’的时候通过路由跳转来达到目的。

<navigator url="/pages/outurl/index">
        <image src='../../images/btn-download.jpg' class='btn-download'></image>
</navigator>
  • 1

  • 2

  • 3

谢谢阅读,谢谢点赞!


来自  https://blog.csdn.net/a419419/article/details/79807272




普通分类: