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

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文件夹

4)pages/out/out.wxml

//指向网页的链接

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

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

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

(完)

小程序接入h5页面_微信小程序跳转外部链接(h5页面)以及数据交互相关推荐

  1. a标签跳转后关闭当前页面_微信小程序2020-day-2 导航项目(跳转三种形态)

    day-2 导航项目(跳转三种形态) 转发跳转:保留当前页面,跳转新页面,可返回 重定向跳转:关闭当前页面,跳转,不可返回,不能指定标签导航页面 跳转标签导航:跳转到标签导航页面,标签导航跟随选中 a ...

  2. java小程序显示多种按钮_微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能...

    看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 先来个效果图 html {{item.text}} 查看更多 收起 wxss .box ...

  3. python天气查询小程序加背景图_微信小程序开发背景图显示功能

    这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...

  4. 小程序商店刷榜_微信小程序游戏跳一跳刷榜原理解析!

    最近微信出了一个"跳一跳"的小游戏,这个游戏其实在之前有手机端版本,无奈微信借助强大的用户把这游戏又拿起来弄火了,而且通过最新版的微信可以看出,微信已经开始重视小程序的入口释放了, ...

  5. 微信小程序存在的风险_微信小程序开发技术风险存在,如何规避是重点

    微信小程序开发技术风险存在,如何规避是重点 微信小程序自上线以来已经历经三年的时间,不断推陈出新,推展业务,如今已形成了一定规模和影响力,线上购物.在线点餐.预订服务.便捷出行.小游戏等多种多样的小程 ...

  6. 微信小程序存在的风险_微信小程序存在哪些风险

    微信小程序存在哪些风险?之前一直在给大家爱关于微信小程序的各种好处,但是它其实也是存在一定的风险的,今天小编就来给大家讲一下微信小程序都存在哪些风险. 由于微信主程序会通过 JS 接口向小程序暴露规定 ...

  7. 微信小程序超级占内存_微信小程序占用内存小,用户再也不用担心内存不足问题了...

    内存占用小,微信小程序,让用户再也不用担心小程序不足内存问题了,时下,一站式支持常用APP(手机应用软件)的微信小程序受到市民青睐. 微信小程序,是一种不需要下载安装即可使用的应用,它实现了应用&qu ...

  8. 小程序商店刷榜_微信小程序怎么通过“硬广”“软广”来运营引流?运营干货...

    随着互联网的飞速发展,如今微信小程序已经成为家喻户晓的一款应用了,生活中随处可见的微信小程序成为了许多人日常生活中必不可少的应用.那么对于小程序商家来说营销策划方案显得格外重要,如果想要引入更多流量用 ...

  9. 小程序全局悬浮窗_微信小程序悬浮窗弹出怎么实现?

    微信小程序悬浮窗弹出怎么实现?很多的微信小程序管理员会在微信小程序界面开发微信小程序悬浮窗弹出功能,接下来小编会为大家介绍微信小程序悬浮窗弹出关注实现的全部步骤哦. 微信小程序悬浮窗弹出怎么实现? 微 ...

最新文章

  1. python3.9出了吗_Python 3.9 正式版要来了,会有哪些新特性?
  2. CentOS 关闭、启动网卡
  3. 车联网大数据框架_FEV:基于最新网关技术管理车联网大数据
  4. Python操作Redis的5种数据类型
  5. 如何将自定义数据源集成到Apache Spark中
  6. 大规模Schedule任务实现方案
  7. 基于layui的select区域联动
  8. 简约商业计划书PPT模板
  9. 工业无线开关量信号传输器
  10. 欧拉回路和Hanmilton回路
  11. 康宁发布第五代大猩猩玻璃 坚韧度更强更耐摔
  12. java obd_XTOOL X100 PAD3通过OBD给2014 BMW CAS4 Key编程
  13. 最新微信ipad协议 CODE获取 公众号授权等
  14. Daniel Sabbah:软件工程的转折点
  15. centos 7使用gcc编译c语言,CentOS 7编译安装gcc 4.9.4
  16. wchar_t 转换 string std::string 转换 wchar_t
  17. 基于光栅波导结构的 R ARMR 系统的 建模
  18. python :SyntaxError: Non-ASCII character '\xe5' in file 错误
  19. java集合及遍历器的初步认识
  20. WIN10下安装Oracle提示无法添加用户XXXX到XXXX组中办法

热门文章

  1. teamviewer LAN 设置代理
  2. 短视频制作小技巧,配音字幕都要跟上,做好细节才能成功
  3. 关闭upupoo悬浮窗口
  4. 使用U盘安装windows系统时提示找不到任何设备驱动程序
  5. Hack The Box - Access Writeup
  6. linux下查找配置文件
  7. 陌生男女社交软件交流手册
  8. 已知x,h求y(信号处理)
  9. 萌新带你开车上p站(一)
  10. 基于QT的网络音乐播放器(一)