首页 > 电脑专区 > 电脑教程 >

微信小程序开发之实现小程序中打开另一个小程序

来源:互联网 2023-02-21 19:18:13 版权归原作者所有,如有侵权,请联系我们

微信小程序打开另一个小程序,主要有两种方法:1.超链接;2.点击按钮。这两种方法的参数大致类似,也略有不同,其实就跟超链接进行页面跳转和单击事件进行页面跳转一样。这里就详细介绍下这两种跳转的实现方法,并附带使用开发者工具进行调试的方法。hg4办公区 - 实用经验教程分享!

工具/原料

  • 微信开发者工具

全局配置

  • 1

    全局配置:hg4办公区 - 实用经验教程分享!

    跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下:hg4办公区 - 实用经验教程分享!

    App.jsonhg4办公区 - 实用经验教程分享!

    { hg4办公区 - 实用经验教程分享!

    ... hg4办公区 - 实用经验教程分享!

    "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ]hg4办公区 - 实用经验教程分享!

    }hg4办公区 - 实用经验教程分享!

    微信小程序开发之实现小程序中打开另一个小程序hg4办公区 - 实用经验教程分享!

  • 1
  • 超链接实现跳转到小程序

  • 1

    模板代码编写:hg4办公区 - 实用经验教程分享!

    如图,需要编写跳转小程序专用超链接并设置以下参数hg4办公区 - 实用经验教程分享!

    navigator target="miniProgram" open-type="navigate" app-id="wxdbcxxxxxxxx985f" path="pages/index/index?goods_id=201" extra-data="{{extraData}}" version="develop" bindsuccess="toMiniProgramSuccess">点击超链接打开绑定的小程序/navigator>hg4办公区 - 实用经验教程分享!

    微信小程序开发之实现小程序中打开另一个小程序hg4办公区 - 实用经验教程分享!

  • 2

    超链接方式相关参数设置说明:hg4办公区 - 实用经验教程分享!

    1.extra-data必须为Object类型,可以在data中定义,然后模板中引用;hg4办公区 - 实用经验教程分享!

    2.version可以为空,以小程序当前环境为准。如果设置有值,则只在当前小程序为非正式版时有效。如果设置为develop,那么最好先用微信预览最新编译过的需要跳转到的小程序,然后再扫码预览原来的小程序。不然的话跳转到的小程序可能不是最新版;hg4办公区 - 实用经验教程分享!

    3.bindsuccess回调事件在跳转到小程序返回之后触发,wx.navigateToMiniProgram Api则是在跳转同时触发。hg4办公区 - 实用经验教程分享!

    微信小程序开发之实现小程序中打开另一个小程序hg4办公区 - 实用经验教程分享!

  • 3

    业务逻辑处理:hg4办公区 - 实用经验教程分享!

    定义跳转小程序成功回调函数,如图hg4办公区 - 实用经验教程分享!

    toMiniProgramSuccess(res){ hg4办公区 - 实用经验教程分享!

    wx.showToast({ hg4办公区 - 实用经验教程分享!

    title: '通过超链接跳转其他小程序成功返回了' hg4办公区 - 实用经验教程分享!

    })hg4办公区 - 实用经验教程分享!

    }hg4办公区 - 实用经验教程分享!

    微信小程序开发之实现小程序中打开另一个小程序hg4办公区 - 实用经验教程分享!

  • 通过按钮单击事件实现

  • 1

    定义按钮组件:hg4办公区 - 实用经验教程分享!

    button bindtap='navigateToMiniProgram'>点击按钮打开其他小程序/button>hg4办公区 - 实用经验教程分享!

    微信小程序开发之实现小程序中打开另一个小程序hg4办公区 - 实用经验教程分享!

  • 2

    定义跳转到小程序的单击事件,调用wx.navigateToMiniProgramApi进行处理hg4办公区 - 实用经验教程分享!

    微信小程序开发之实现小程序中打开另一个小程序hg4办公区 - 实用经验教程分享!

  • 3

    相关参数说明:hg4办公区 - 实用经验教程分享!

    关于wx.navigateToMiniProgramApi,主要有以下下这些参数hg4办公区 - 实用经验教程分享!

    微信小程序开发之实现小程序中打开另一个小程序hg4办公区 - 实用经验教程分享!

  • 目标小程序接收来源小程序传递过来的参数

  • 1

    目标小程序可以在app.js的 App.onLaunch,App.onShow中获取到这份数据hg4办公区 - 实用经验教程分享!

    微信小程序开发之实现小程序中打开另一个小程序hg4办公区 - 实用经验教程分享!

  • 2

    开发者工具调试被打开的小程序时候正确的接收参数:hg4办公区 - 实用经验教程分享!

    开发者工具新建编译模式,先选择进入场景,输入1037就能快速定位到从小程序进入这个选项,然后就会显示设置appid及extraData的输入框hg4办公区 - 实用经验教程分享!

    微信小程序开发之实现小程序中打开另一个小程序hg4办公区 - 实用经验教程分享!

  • 3

    输出如下:hg4办公区 - 实用经验教程分享!

    微信小程序开发之实现小程序中打开另一个小程序hg4办公区 - 实用经验教程分享!

  • 注意事项

    • 尤其要注意extraData的格式,与来源小程序中传递过来的格式都有点不一样,请严格参照下边的代码:{"from":"xxxxx"}
    • navigateToMiniProgram Api需要用户主动触发跳转,且在跳转至其他小程序前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转其他小程序。如果用户点击取消,则回调 fail cancel;

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!hg4办公区 - 实用经验教程分享!


    标签: 操作系统微信小程序程序实现

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号