小程序实现轮播图跳转页面和小程序
小程序实现轮播图跳转页面和小程序
文章目录
- 小程序实现轮播图跳转页面和小程序
- 跳转小程序
- Object object
- 使用限制
- 需要用户触发跳转
- 需要用户确认跳转
- 示例代码
在我们开发微信小程序时候,有的时候需要轮播图点击时跳转到相应的页面,那么接下来我们一起来编辑开发一下。
跳转小程序
这里我们我们先编辑第一种,跳转小程序 这里使用到 ***wx.navigateToMiniProgram(Object object)***打开另一个小程序
接下来我们看一下他的我们使用到的参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appId | string | 是 | 要打开的小程序 appId | |
path | string | 否 |
打开的页面路径,如果为空则打开首页。path 中 ? 后面的部分会成为 query,在小程序的 App.onLaunch 、App.onShow 和 Page.onLoad 的回调函数或小游戏的 wx.onShow 回调函数、wx.getLaunchOptionsSync 中可以获取到 query 数据。对于小游戏,可以只传入 query 部分,来实现传参效果,如:传入 “?foo=bar”。
|
|
extraData | object | 否 |
需要传递给目标小程序的数据,目标小程序可在 App.onLaunch ,App.onShow 中获取到这份数据。如果跳转的是小游戏,可以在 wx.onShow、wx.getLaunchOptionsSync 中可以获取到这份数据数据。
|
|
envVersion | string | release | 否 | 要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版,则打开的小程序必定是正式版。 |
envVersion的和法值
合法值 | 说明 |
---|---|
develop | 开发版 |
trial | 体验版 |
release | 正式版 |
shortLink | string | 否 | 小程序链接,当传递该参数后,可以不传 appId 和 path。链接可以通过【小程序菜单】->【复制链接】获取。 | 2.18.1 |
---|---|---|---|---|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
使用限制
这里我们要注意使用限制,在开发中规避掉。
需要用户触发跳转
从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序。
需要用户确认跳转
从 2.3.0 版本开始,在跳转至其他小程序前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转其他小程序。如果用户点击取消,则回调 fail cancel
。
示例代码
wx.navigateToMiniProgram({appId: '',path: 'page/index/index?id=123',extraData: {foo: 'bar'},envVersion: 'develop',success(res) {// 打开成功}
})
接下来我们来编辑点击轮播图跳转小程序
首先我们在云开发内容管理创建好模型,并且上传数据,并修改权限完成。
完成后效果如上图所示,轮播图编写请查看往期视频
云开发开发图书馆预约小程序-day1
我们在前段给轮播图一个点击事件 bindtap="tzym"
<view class="banner"><swiper class="swip_main" indicator-dots autoplay interval="60000" circular><block wx:for="{{mglist}}"><swiper-item><image style="width: 100%;height: 100%;" mode="aspectFill" src="{{item.photo}}" bindtap="tzym"></image></swiper-item></block></swiper>
</view>
然后我们在js页面进行事件编辑
tzym(){wx.navigateToMiniProgram({appId: 'wx818bb12761ba7347',path: 'page/index/index',envVersion: 'develop',success(res) {// 打开成功}})},
实战演示
我们可以思考我们是不是可以将里面的appid和路径保存在数据库轮播图之中,我们就可以实现在后台对轮播图和跳转的小程序进行实时的编辑更改操作呢。
跳转页面就是将我们wx.navigateToMiniProgram改成下发即可
wx.navigateTo({url: 'url',})
小程序实现轮播图跳转页面和小程序相关推荐
- 【微信小程序】小程序实现轮播图效果--swiper组件(一步步教你如何实现)
文章目录 前言 1.引入外部链接图片资源 2.让swiper来调整适应图片的宽高 3.实现轮播效果--autoplay 总结 欢迎点赞,收藏,加关注 前言 此例子是用微信小程序组件swiper来实现轮 ...
- 微信小程序实现轮播图(超简单)
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...
- php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
- 微信小程序swiper图片尺寸_微信小程序 swiper 轮播图 高度自适应
微信小程序 swiper 轮播图 高度自适应 发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
- 微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件 在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
- 新增轮播图跳转web页面、轮播、推荐歌单数据存储( 简易音乐 七)
新增轮播图跳转web页面.轮播.推荐歌单数据存储( 简易音乐 七) 关于 效果图 第一步,添加引用 新增数据库实体类 修改fragment代码 新增WebActivity页面加载网页 关于 本篇主 ...
- 轮播图代码,带定时器和小圆圈(易懂)
简单的显示隐藏(带小圆圈和左右按钮,js写) <!DOCTYPE html> <html lang = "en" > <head ><me ...
- 仿优酷视频焦点轮播图布局html页面前端源码
大家好,今天给大家介绍一款,仿优酷视频焦点轮播图布局html页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 可以用菜单控制切换(图2) 图2 整体布局简洁明了,干净简单(图3) 图3 代 ...
- 微信小程序 点击轮播图跳转到微信公众号文章
一.获取微信公众号文章列表 要想获取微信公众号的文章列表,需要登录公众号运行账号,进行一下相关的设置. 1.1微信公众号获取文章列表 api接口文档: https://developers.weixi ...
最新文章
- 计算机网络协议分层体系结构
- SpringMvc多语言配置
- Shell脚本编程01:基础知识
- Docker swarm mode
- npm run 脚本背后的事情
- 疾风之刃的最新服务器,疾风之刃6月16日数据互通公告 数据互通服务器查询介绍...
- ASP.NET状态管理之十三(总结)
- 南京大学开源!ResT:高效Transformer架构!
- 图书馆管理系统——还书和延期操作
- CodeIgniter辅助函数
- SimpleXML系列函数操作XML
- markdown 表格代码在线生成工具
- pdf文件过大怎么办?3种免费压缩PDF的方法
- 比特bit,字节Byte,带宽流量和流速的关系,存储容量单位
- 把谷歌主题背景图片保存下来
- windows系统更新失败无法启动的解决方法
- HPD健康产品申明认证
- 【分享】女生教你怎么追MM--送给没有女朋友的来此灌水的GG们
- 文件操作的实例——下载并合并流式视频文件
- bin/hive出错:Exception in thread main java.lang.RuntimeException: java.net.ConnectException: Call Fr