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账号...

(1)


相关推荐

  • pycharm怎么快速注释_pycharm怎么全部注释

    pycharm怎么快速注释_pycharm怎么全部注释Pycharm如何快速注释一行功能快捷键注释一行“ctrl+/”取消该行注释“ctrl+/”(同上)

  • flash咏鹅课件_咏鹅flash动画课件下载

    flash咏鹅课件_咏鹅flash动画课件下载咏鹅flash动画课件下载文欣赏咏鹅鹅,鹅,鹅,曲项向天歌。白毛浮绿水,红掌拨清波。本动画声情并茂的展示了这首著名的诗文,朗读者感情丰富,是很好的小学一年级语文Flash动画课件关键词:北师大版一年级上册语文Flash动画课件下载,一年级语文Flash动画课件下载,咏鹅Flash动画课件下载,.swf格式;更多关于《咏鹅》PPT课件,请点击咏鹅ppt标签。《咏鹅》PPT:《咏鹅》PPT第…

  • MySQL数据库:存储过程Procedure

    MySQL数据库:存储过程Procedure

  • python安装dlib库_pycharm安装dlib失败

    python安装dlib库_pycharm安装dlib失败dlib库可以实现人脸的检测,所以有些小伙伴在学习人脸识别和检测的时候有可能会用到此库。本人python版本为3.7,在dlib的下载官网上只找到python3.6的版本,当然还有很多文章上写的是安装cmake进行编译再安装boost然后再使用pipinstalldlib安装即可,但是本人试了很多还是不行。3.7版本的dlib资源文件在csdn的其它文章中就有,淘宝0.5元即可下载,下载完成后将文件放置python文件下的Scripts文件夹中即可,结果如图。然后启动cmd,使用pipinstall

  • 怎么新建pytest的ini文件_bikini

    怎么新建pytest的ini文件_bikini前言pytest配置文件可以改变pytest的运行方式,它是一个固定的文件pytest.ini文件,读取配置信息,按指定的方式去运行查看pytest.ini的配置选项pytest-h找到以下

  • java jvm优化(一)

    java jvm优化(一)转自http://ifeve.com/jvm-optimize-1/java由堆来分配所需内存。java有3个代,年轻代、年老代、永久代垃圾回收:当堆的空间不足以存放新的对象时,这是需要分配内存,也就是垃圾回收启动。GC算法:引用计数器回收、跟踪回收下面转自http://www.importnew.com/13827.htmlGC种类:4种1.串行垃圾回收器2.并行…

发表回复

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

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