czh的踩坑笔记--微信小程序间跳转（navigateToMiniProgram）

必要函数

wx.navigateToMiniProgram(Object object)

相关链接

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html

配置

1. 要求互相之间跳转的小程序，都为同一个公众号主体下（现在好像也不限制了 2020年7月14日）。
**Ps. 这个接口由于微信频繁改动，最终文档和参考肯定按照微信文档为准**

跳转函数

wx.navigateToMiniProgram({
    appId: "要跳转的小程序 AppId ",
    path: '/pages/orderDetail/orderDetail?type=toOther&id=' + id,
    /* 这里要注意，使用path的传参之后会保存在 options.query 里 */
    /* 个人建议直接使用页面传值即可，毕竟是跨小程序传值，不建议进行高耦合的操作 */
    envVersion: 'trial',
    extraData: {
        id: '你要传的参数'
    },
    success(res) {
        wx.showToast({
        title: '跳转成功'
        })
        that.setData({
        exitApp: true
        })
    },
    fail(res) {
        wx.showToast({
        title: '跳转成功',
        icon: 'none'
        })
    }
})

接收函数

/* 这里需要注意，这个只是我自己写的方法 */
/* 这个放在 app.js 里 */
onShow: function (options) {
    this.globalData.onShowOptions = options.query
    /* 这里取出了path里的值 */
},

工具库

/* util.js 这个是我习惯的工具库文件,截取一段，仅作参考，需要时引用即可 */
// 确定 this.globalData.onShowOptions 的返回
const getQuery = (e) => {
    return new Promise((res, rej) => {
        wx.showLoading({
            title: '获取信息中'
        })
        let lock = 0
        let clock = setInterval(() => {
            if (getApp().globalData.onShowOptions) {
                res(getApp().globalData.onShowOptions)
                wx.hideLoading()
                clearInterval(clock)
            } else if (lock > 20) {
                wx.hideLoading()
                clearInterval(clock)
            } else {
                lock++
            }
        }, 100)
    })
}

module.exports = {
    getQuery
}

被跳转页面中的使用

onLoad: function (options) {
    app.getQuery().then((option) => {
        // 你的处理函数
    })
},

一个深渊巨坑

这个坑，应该是微信在真机上和开发者工具的编译方式不同导致的。
因为我在使用开发者工具的时候一直无法触发这个bug

toOtherMiniProgram(e) {
    let that = this
    let id = that.data.id
    wx.navigateToMiniProgram({
        appId: "跳转对象的appId",
        path: '页面路径?id=' + id,
        envVersion: 'trial',
        extraData: {
            id: id,
            type: 'toOther'
        },
        success(res) {
            that.setData({
            exitApp: true
            })
        }
    })
},

login(e){
    this.toOtherMiniProgram(this.data.id)
}

由于wx.navigateToMiniProgram 这个api需要在点击后才能使用
我在不断的测试后发现

在真机上运行的话，包裹了这个Api的函数的第一个入参，会在编译后被替换为 微信点击事件的对象，导致传参失败！！！

也就是说在上文中的函数login中调用函数toOtherMiniProgram时，不能直接传参

所以在调用包裹了这一类 需要点击才能触发的Api 的函数时，一定要仔细检查是否有参数被替换的bug

后言

1. 双向排查错误很重要。
2. JSON.stringify() 可以帮你在看不到终端输出的时候查看json数据。
3. 写代码的时候还是需要细心一点，敢于质疑自己写的代码以及相信他人的文档。
4. 希望不要再踩类似的坑（微信如果可以在跳转成功后返回跳转的参数的话，我估计也不会调试这么久了！）