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);

 

(完)

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • win10环境下不通过cppan编译tesseract4.1动态库[通俗易懂]

    win10环境下不通过cppan编译tesseract4.1动态库[通俗易懂]在我的博客中,写了几篇关于tesseract如何编译Windows环境下的dll库,但那几篇都是基于cppan的环境依赖,而cppan的官方网站在2021年1月已经正式关闭了,因此那种方式将无法下载到对应的依赖环境,根据tesseract官方文档是使用SW的方式进行依赖下载,因此这篇博客将讲解使用基于SW的编译方式。1SW的环境配置在SW官方地址上下载sw.exe。将下载的sw.exe所在路径添加到系统环境变量PATH下。以管理员权限打开cmd,输入命令:swsetup这个命令主要是在用

    2022年9月30日
    3
  • BackTrack3(BT3激活成功教程wifi密码)

    BackTrack3(BT3激活成功教程wifi密码)BackTrack3(BT3激活成功教程)  准备工作  1、一个有可激活成功教程无线信号的环境。如我在家随便搜索出来的信号。  2、带无线网卡的电脑一台(笔记本台式机均可,只要无线网卡兼容BT3),我用的是三星NC10的上网本。  3、4G以上优盘一个(我用的是kingston8G的)  4、下载BT3,约900多兆。注:BT3全称BackTrack3,与我们常说的bt下载是完全不同的…

    2022年10月1日
    3
  • wsus补丁服务器如何给自己打补丁(windows补丁服务器)

    WSUS,全称Windowsserverupdateservices,是微软在其网络结构中提供的关于系统补丁更新的一个解决方案,完全免费,现在最新的版本是WSUS3.0SP2,在生产环境中部署WSUS的应用价值主要是提高网络资源的利用率,节省带宽,同时对于客户端计算机来说呢,更新效率也更高一些。在日常大家都习惯了用第三方工具给系统打补丁,局域网的PC数量少了便罢,如果多于50台,只是给系统以及微软产品打补丁这一项工作对于网络资源的占用就不可小觑,在Windowsserver2003以前…

    2022年4月18日
    429
  • 【7万字干货】2021Java实习必看面试两百题解析「建议收藏」

    JavaSE基础语法Q1:floatnumber=3.4;有没有问题?为什么?答:有问题,因为3.4是双精度数,将双精度型(double)赋值给浮点型(float)属于向下转型,可能会造成精度损失,所以必须进行强制类型转换,正确的写法是floatnumber=(float)3.4;/floatnumber=3.4F;。Q2:字符串拼接的方式以及效率?答:①使用+直接拼接,S…

    2022年4月7日
    39
  • Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

    Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇撑着下班前半小时我用vue写《哔哩哔哩项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2,技术栈有axios、Vh等,下班过来敲哈哈

    2022年6月24日
    28
  • rsync服务的三种模式测试[通俗易懂]

    rsync服务的三种模式测试[通俗易懂]目录1什么是rsync1.1rsync简介rsync特性1.3rsync的企业工作场景说明2rsync三种模式:2.1rsync常用参数选项2.2rsync本地模式2.3rsyncshell模式2.4rsyncdaemon模式3rsync服务故障模拟4rsync多模块实战5rsync排除及无差异同步实战6rsync优缺点6….

    2022年10月13日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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