uni-app开发中的问题

网络请求问题

  • uni-app中发送网络请求,由于原生API request不支持配置拦截器,并且也不支持使用axios,所以需要使用@escook/request-miniprogram插件来封装请求拦截器

    分包问题

  • 在项目根目录下创建分包的根目录subpkg
  • pages.json中和pages节点平级的位置声明subPackages节点,用来定义分包相关结构
  • 之后在subpkg中新建需要分包的页面,创建时选择分包为subpkg,创建完成后,页面信息就会自动添加到subPackages下的pages目录下
"subPackages": [
{
//代表分包根目录
"root": "subpkg",
"pages": [
{
"path" : "goods_detail/goods_detail",
"style" :
{
"navigationBarTitleText": "商品详情",
"enablePullDownRefresh": false
}

}
]
}
],

uni.switchTab和uni.navigateTo

  • 跳转到 tabBar 页面必须使用uni-switchBar,并关闭其他所有非 tabBar 页面。
  • uni.navigateTo跳转到应用内的某个页面,但是不能跳转到tabBar页面

切换一级菜单,滚动条的位置还在上个一级菜单滑动的位置

  • 解决方法:scroll-view标签有个属性scroll-top,可以设置滚动条的位置,所以我们可以设置一个属性,当切换一级菜单时,将该属性置为0,但是有个问题:scroll-top如果没有变化,一直是0,那这样不会起效果,所以我们可以让该值在0和1之间切换,如果是0,就把它置为1,如果是1就置为0,虽然会有一像素的偏差,但是肉眼看不到

    页面跳转时携带的参数

  • 页面跳转时携带的参数可以在跳转的页面的onLoad的生命周期中取到

    关于上拉触底刷新数据和下拉刷新

  1. pages.json中对想要设置的页面的style中添加onReachBottomDistance属性,进行上拉触底的距离设置,添加enablePullDownRefresh属性,进行下拉刷新设置

  2. 在页面中上拉触底函数onReachBottom中进行操作

  3. 在页面下拉刷新函数onPullDownRefresh中进行清除原有数据,并再次请求数据.注意:需要手动关闭下拉刷新,调用请求数据的函数时,传递一个函数作为参数,该函数为关闭下拉刷新的函数

    // 重新发送请求
    this.getGoodsList(() => uni.stopPullDownRefresh())
    //在getGoodsList中判断,如果有这个参数,就执行该函数
    async getGoodsList(callback) {
    ...
    callback && callback()
    ...
    }

    问题记录

  4. 关于uni-num-box输入非法数字,就会显示NAN,所以在源码中将数字先转为number,如果是NAN,默认置为1

  5. 问题:使用滑动删除组件uin-swiper-action,会报错TypeError: this.swipeaction.closeOther is not a function
    解决方法:在uni-modules/uni-swipe-action/uni-swipe-action-item/mpwxs.js的methods的closeSwipe方法,修改为如下所示,添加了条件编译

    closeSwipe(e) {
    if (!this.autoClose) return
    // #ifdef H5
    this.swipeaction.closeOther(this)
    // #endif
    },
  6. 问题:使用官方接口uni.chooseAddress报错,报错信息:chooseAddress:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json
    解决方法:manifest.json 文件”mp-weixin” 节点 加一行配置"requiredPrivateInfos":["chooseAddress"]。原因为使用地理位置相关的接口需要提前进行配置

登录

  1. 首先点击登录按钮,open-type属性选择getUserInfo,然后通过@getuserinfo中定义的回调获取用户信息.
<button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
  1. 通过uni.login,获取code
  2. 通过第一步获取的信息和第二步获取的code封装参数,发送登录请求
  3. 登录成功后得到token,通过uni.setStoragesync存储在本地
  4. 在之后的支付请求时,需要在请求头中携带token
Author: Yang Wa
Link: https://blog.wxywxy.cn/2022/07/31/uni/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.