h5链接跳转到小程序_微信无法跳转外部链接

h5链接跳转到小程序_微信无法跳转外部链接最近项目有个需求,在微信小程序中跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面。1、跳转外部链接(官方文档)1)入口//跳转到入口wx.navigateTo({url:&#39

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

最近项目有个需求,在微信小程序中跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面。

1、跳转外部链接(官方文档

1)入口

//跳转到入口
wx.navigateTo({url: '../out/out'})

2)app.json

{
  "pages": [
    "pages/main/main",
    "pages/logs/logs",
    "pages/out/out"  ,
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "sitemapLocation": "sitemap.json"
}    

3)新建out文件夹

h5链接跳转到小程序_微信无法跳转外部链接

 

 

 4)pages/out/out.wxml

//指向网页的链接
<web-view src="https:www.test.com/h5info"></web-view>

注意:外部链接需要到小程序配置业务域名(需要后端协助哦)。

 

2、从H5页面跳回小程序

1)安装jssdk包,才能调用跳转的方法哦~

npm install wechat-jssdk --save

2)调用方法,亲测有效,这里举一个例子(还有多个详情查看官方文档)

//同小程序使用方法,url和在小程序的格式一样即可
wx.miniProgram.navigateTo({url: ''})

 

3、小程序跳转H5页面(传参数)

目录结构与上面保持一致。

1)  入口

wx.navigateTo({url: '../out/out?name=zhangsan'})

2)pages/out/out.js

// pages/out/out.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      url: `https://www.test.com/h5info?name=${options.name}}`
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
})

3)  pages/out/out.wxml

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

4)  h5页面,获取参数

//获取url参数 
getParams(params) {
   const reg = new RegExp("(^|&)" + params + "=([^&]*)(&|$)", "i");
    const r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return decodeURIComponent(r[2]);
    }
    return null;
  }

//调用
const name = getParams(name);

 

(完)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167056.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Linux运维必备技能:如何在 Vim 中删除多行?

    Linux运维必备技能:如何在 Vim 中删除多行?我们都会犯错,犯错是人之常情,改进它也很重要。如果你在Vim中出错,你可以dw在普通模式下使用删除一个单词。您键入dd它会删除当前行。如果要在Vim中删除多行,可以使用相同的ddVim命令,将行数添加到该命令中。因此,10dd将从光标底部删除10行(包括光标所在的行)。让我们详细了解如何在以效率着称的编辑器中删除一行或多行。删除单行以下是在Vim中删除单行文本的步骤:按Escape(Esc)键进入Normal模式确保光标位于要删除的行上。快速按下dd这

  • TensorFlow2.0安装_tensorflow中run

    TensorFlow2.0安装_tensorflow中runTensorflow2.4.1前言Tensorflow简介Anaconda简介Anaconda安装TensorFlowCPU&GPUTensorflow安装Pycharm&TensorflowTensorflow&HelloworldHelloworldSession()后序前言目前考虑进入梦寐以求的机器学习、人工智能等领域的学习,因此安装主流的机器学习框架Tensorflow迫在眉睫。然而网上的网上安装教程大多是1.xx版本的。目前安装的环境

  • vs2015注册码[通俗易懂]

    vs2015注册码[通俗易懂]VisualStudioProfessional2015简体中文版(专业版)KEY:HMGNV-WCYXV-X7G9W-YCX63-B98R2VisualStudioEnterprise2015简体中文版(企业版)KEY:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV专业版:HMGNV-WCYXV-X7G9W-YCX63-B98R2企业版:HM6NR-QXX7C-DFW2Y…

  • 用Python发免费短信的正确姿势

    用Python发免费短信的正确姿势前言今天带大家来玩一玩,如何用Python来实现免费短信。关于发短信,其实适用场景还挺多的。只有你想不到的场景,没有玩不转的场景!比如作为一个IT人员,经常会有监控服务器之说,那么自动告警的短信或者来电就显得非常重要了。再比如,你可以用发短信的功能,自己来实现一个温馨天气预报提示给你的爸爸妈妈。。。等等下面进入今天的主题-twilio网站。https://www.twilio.com/console准备工作先来介绍下这个网站主要用于发短信和来电,提供了完备的相关api。而

  • 官方下载:Office 2007 SP2简体中文正式版

    官方下载:Office 2007 SP2简体中文正式版微软刚刚发布了Office2007办公套装的第二个SP升级服务包,同时放出的还有服务器版的OfficeServers2007SP2。Office2007SP2不但集成了截止2009年2月

  • Git代码管理之.gitignore文件

    Git代码管理之.gitignore文件

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号