小程序实现轮播图跳转页面和小程序

小程序实现轮播图跳转页面和小程序

在我们开发微信小程序时候，有的时候需要轮播图点击时跳转到相应的页面，那么接下来我们一起来编辑开发一下。

跳转小程序

这里我们我们先编辑第一种，跳转小程序 这里使用到 ***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',
    })