微信小程序 封装路由 mini-router

微信小程序 封装路由 mini-router,第1张

目前mini-router支持微信小程序里的路由的所有方法,函数名对比:

当你输入一个在pages模块中找不到的路由时(log),mini-router会抛出错误,例如:

mini-router内置了一个属性 params ,它会根据你跳转的页面,动态的更换当前属性的值。

参数存储在storage里,你可以通过小程序调试工具看到:

获取参数时,你不必知道它存储在storage里的key是什么,你只要拿 app.$router.params 就可以了

mini-router 通过 back 或者 backHome 函数实现反向传值(反向携带参数)

当你选择不携带参数返回时,在首页你将拿不到 app.$router.params ,因为 mini-router 会把 params 软删除,如果你需要的话,你还是可以从storage里拿到它。

mini-router同小程序一样,提供三种状态 success , fail , complete

不同于小程序,mini-router使用链式调用来处理这三种状态,

上面的都是通过params传参,传的参数缓存在了storage里,新增加的query类型传参,将参数拼接到了url后面:

Github: https://github.com/hellolad/mini-router

本地小程序开发工具测试请求接口都很正常,使用预览和真机调试功能在手机上运行请求接口总是失败。

小程序上线后,部分手机请求接口正常,部分手机请求接口失败,将请求接口复制到谷歌浏览器中查询总是成功的。

restful 接口定义为: https://ip:port/bus/:router_name ,其中 router_name 是个变量。实际请求接口为: https://ip:port/bus/993路 ,可以看到:请求地址中的变量 router_name 被 993路 给替换了。问题就出在这里, 请求地址中含有中文

在 小程序开发工具 、 谷歌浏览器 和 部分请求成功的手机 上最终发出的请求都会对请求地址中的中文汉字进行编码,如下:

在 开发工具中预览功能 、 开发工具中真机调试功能 和 部分请求不成功的手机 上最终发出的请求并不会对中文进行编码,如下:

上面分析了请求接口失败是因为部分手机没有对请求地址中的中文进行编码,解决方法为利用 js 自带的 api encodeURIComponent() 处理。

有一点需要注意:不能对整个请求地址进行编码,那么的话会对所有除字母、数字以外的符号进行编码,会变成下面这样,实际请求中仍然会报错。

在处理 restful 接口过程中,有一步用具体指(如: 991路 )替换请求地址中的变量(如: https://ip:port/bus/:router_name 中的 :router_name ),此时先对 991路 进行编码再替换变量值即可。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11618595.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存