微信小程序跳转外部链接的详细实现方法

2024-11-28 23:10:35

微信小程序跳转外部链接

在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接

实现方法如下：

1、配置业务域名

小程序管理后台——开发(开发管理)——开发设置：新增业务域名

在这里将你需要的外部链接域名配置完之后，再下载校验文件(校验文件需要放到当前域名的根目录下)

2、不勾选 “不校验合法域名”

开发者工具进行 “不校验合法域名”配置

3、刷新项目配置

4、打开外部链接

以上操作均完成之后，便可以打开外部链接

<web-view src="{{src}}"> </web-view>

情况1：外部链接没有带参数

  //跳转前处理外部链接
   handlePdf(e){
    wx.navigateTo({
      url: '../../outer/outer?src='+e.currentTarget.dataset.url+'&title=合同详情'
    })
  },

 //跳转后获取参数
  data: {
    src:"",
  },
  /**
 * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      src:options.src
    })
    //设置当前标题
    wx.setNavigationBarTitle({
      title: options.title,
    })
  },

情况2：外部链接带参数

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

  //跳转前处理外部链接
   handlePdf(e){
    let url="https://xxx/#/pdfInfo?url="+e.currentTarget.dataset.url
    wx.navigateTo({
      url: '../../outer/outer?src='+encodeURIComponent(url)+'&title=合同详情'
    })
  },

  //跳转后获取参数
  data: {
    src:"",
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      src:decodeURIComponent(options.src)
    })
    //设置当前标题
    wx.setNavigationBarTitle({
      title: options.title,
    })
  },

总结

到此这篇关于微信小程序跳转外部链接的文章就介绍到这了,更多相关微信小程序跳转外部链接内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

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

个人类型和海外类型的小程序不支持 web-view 标签也就是说个人申请的小程序,就别想跳转了!!!! 1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢? 2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开) 3.wxml 1. index.wxml (按钮页面) <view class='wrapper'> <button class='wepay' bindtap='goBaidu'>点击跳转</button> </vie
微信小程序跳转外部链接的详细实现方法

目录微信小程序跳转外部链接 1.配置业务域名 2.不勾选 “不校验合法域名” 3.刷新项目配置 4.打开外部链接总结微信小程序跳转外部链接在开发小程序过程中,我们可能会有这样的需求,在小程序中打开H5或者外部链接实现方法如下: 1.配置业务域名小程序管理后台——开发(开发管理)——开发设置:新增业务域名在这里将你需要的外部链接域名配置完之后,再下载校验文件(校验文件需要放到当前域名的根目录下) 2.不勾选 “不校验合法域名” 开发者工具进行 “不校验合法域名”配置 3.刷新项目配置
微信小程序scroll-view锚点链接滚动跳转功能

html <view class="list"> <view bindtap='jumpTo' wx:for="{{keys}}" data-item="{{item}}">{{item}}</view> </view> <scroll-view scroll-into-view="{{toitem}}" scroll-y="true" scroll-w
安卓版微信小程序跳一跳辅助

今天一上班被github上的一篇名为<教你用python玩跳一跳>吸引,它的星也瞬间从3400涨到4400 原作者主要就是用python 脚本去玩微信小程序跳一跳,本次是基于安卓机型配合Mac电脑进行测试 ios版本请移动 ios 直通车点击打开链接 ios 直接改分版本戳这里飞机票大致就是需要先去安装adb 然后执行作者的脚本 1.先安装brew(如果有可忽略,直接执行第二步) 官网下载 2.在mac终端中输入以下指令安装adb 环境: brew cask install
微信小程序之蓝牙的链接

微信小程序之蓝牙的链接微信小程序蓝牙连接2.0说明: 1.本版本区分了ANDROID和IOS系统下蓝牙连接的不同方式. 2.兼容了更多情况下的链接包括: (1)未开启设备蓝牙,当监听到开启了蓝牙后自动开始连接. (2)初始化蓝牙失败后每3000ms自动重新初始化蓝牙适配器. (3)安卓端开启蓝牙适配器扫描失败,每3000ms自动重新开启. (4)IOS端获取已连接蓝牙设备为空,每3000ms自动重新获取. (5)安卓端蓝牙开始链接后中断扫描,连接失败了,重新开始扫描. (6)IOS端开始连接设
微信小程序跳转页面的两种方法详解

微信小程序跳转页面小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i
微信小程序跳转传递数据的实例

微信小程序跳转传递数据的实例点击view 跳转页面 <view class="album_image" data-album-obj="{{item}}" bindtap="imageclick"> <image style="width:98%;" src="{{item.data[0].url}}"></image> </view> 声明变量 dat
微信小程序跳转传参数与传对象详解及实例代码

微信小程序跳转传参数传对象微信小程序跳转传参一般都是传字符串到下一页,如果要想传对象怎么办呢? 我的解决办法是先将对象转换为json字符串然后到下个页面将json字符串,再转化为对象.如下: let str=JSON.stringify(e.currentTarget.dataset.item); wx.navigateTo({ url: '../toMybaby/babyDetail/babyDetail?jsonStr='+str, success: function (res) {
微信小程序跳转方式总结

微信小程序跳转方式总结一共算是有四种方式. 1.使用组件.<navigator>标签.来实现. 特点:点击有按下的效果 <navigator url="../job_detail/job_detail?isShowCompanyDetail=true&iscollect={{item.iscollect}}"> 跳转 </navigator> 2.给页面布局加监听时间bindtap事件.然后在方法里面.通过wx.navigatorTo来实
微信小程序实现提交input信息到后台的方法示例

本文实例讲述了微信小程序实现提交input信息到后台的方法.分享给大家供大家参考,具体如下: wxml文件:  <view class="fl_form"> <text>您的姓名</text> <input type="text" placeholder='请输入您的姓名' value="{{userName}}" bindblur='userNameInput
微信小程序基于本地缓存实现点赞功能的方法

本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法.分享给大家供大家参考,具体如下: wxml中的写法注意: 1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果: 2. 为图片绑定点击事件bindtap="toCollect",两个image标签都要绑定! <image wx:if="{{collection}}" src="/images/icon/pic1.png" bind