day09-25 uniapp 支付宝小程序 微信小程序 h5 uview router ajax坑

功能/事件/属性 支付宝小程序 微信小程序 H5
导航栏 \tab栏 真实 真实 模拟
导航头部背景色 titleBarColor navigationBarTextStyle navigationBarTextStyle
router插件编程式导航丢失底部tab组件 uni.switchTab uni.switchTab $Router.push
颜色 一律hex值 一律hex值 建议hex值
内置按钮 点击效果背景色 点击效果背景色
hbuilderx运行时编译完成 手动打开 不要填appid会自动打开项目 无需,采用npm命令
点击另一个tab时 当前tab会执行onHide但是不会执行滚动事件 当前tab会执行onHide但是不会执行滚动事件
调用组件同时设置style 不生效 生效 生效
有slot的子组件宽度自动取父容器 不会 不会,对于slot隔开的子组件调用时设置style
栅栏布局 flex 全局样式类row为flex+自定义组件col+调用组件数组绑定宽度相同类名 flex
编程式切换导航自动触发onTabItemTap事件 不会 不会

小程序共同解决方案

  • 颜色 一律hex值,不要设置blue之类,只有black和white可用
  • 按钮 在小程序默认有个点击效果背景色,设置属性hover-class="none",去除默认背景色
    或者在uni.scss设置 hover-class="button-primary_hover"全局类样式
  • button组件在各个平台类型样式不一样,在uni.scss设置button-primary全局样式类

支付宝小程序 相似坑不同解决方案

route插件编程式导航丢失底部tab组件

  • 换成uniapp.switchTab 然后return
  // #ifdef MP-WEIXIN
      uni.switchTab({ url: '/pages/about/about' })
      return
      // #endif

hbuilderx运行时编译,能打开开发者工具但是不能直接打开项目,手动打开

  • 猜测由于没有生成sourcemap文件,开发工具不能识别项目

微信小程序 相似坑不同解决方案

route插件编程式导航丢失底部tab组件

  • 换成uniapp.switchTab 然后return
      // #ifdef MP-ALIPAY
      uni.switchTab({ url: '/pages/about/about' })
      return 
      // #endif

hbuilderx运行时编译,不要填appid,等打开项目再填,才能让微信开发工具打开项目

微信小程序特有

  • 自定义组件使用slot的自定义组件内部取决于调用组件时赋值
  • uniapp自定义组件使用slot,会造成slot与组件包裹slot的div隔开
  • 在调用sticky组件时,设置style="width: 100%"
  • onTabItemTap事件最低微信小程序 模拟器版本为2.5.2 官方文档真机为1.9.0 可信度不知,如果你要在模拟器看效果,得用2.5.2的版本
  • position:fixed;设置,才不出现怪异布局
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  • position:absoult;要设置left:0;z-index:100;才不出现怪异布局
  • 自定义组件调试时,调试工具会有时右侧样式不动
  • 自定义组件, 不能直接对象赋值style属性,只能一个一个属性赋值
  • 使用swiper组件时,设置style="width: 100%"
  • 由于编译后出现奇怪布局,目前只做col组件,而且要设计好书写样式和html规范,全局设置一个row类名的flex样式,直接填充到div的类名,才能用flex布局
  • 编写mixins时,到真机调试时,可能会出现is not exsits提示,请重新编译,并运行

支付宝小程序特有

  • 页面滚动不支持duration
  • 对于ajax拦截器取消请求报错不会显示
  • 底部弹出框会使模拟器导航有返回按钮,不用管,真机不会
  • 点击另一个tab时,当前tab会执行onHide但是不会执行滚动事件 h5
  • 原生的button文本内容不参与padding
  • 使用u-swiper组件时,设置style="width: 100%"找到u-swiper文件.u-swiper-wrap要加width:100%
  • 对于找不到对象属性值,会保持上次的值


    image.png

h5特有

  • 由于h5的导航是模拟的,设置position:fixed;距离顶部是导航顶部,跟小程序顶部是导航底部不一样

uview ui框架问题

  • 吸顶不行 支付宝小程序恢复不了初始状态,从fixed布局恢复不了relative布局
  • 按钮不行 点击卡
  • 栅格布局 微信小程序灵活性不够,样式太难改动

书写样式总结

  • 针对支付宝小程序不支持调用组件class类不起作用 外加基础div


    image.png
  • 针对微信小程序使用slot的自定义组件内部宽度取决于调用组件时赋值,针对栅格系统,调用组件数组绑定宽度相同类名
    image.png

uni-simple-router 特有

  • 记得路由的path要跟page.json保持一致path,虽然多写一遍,但是为了拦截效果还是得写好
  • 不支持router-view 这种嵌套路由的形式开发小程序
  • 编程式导航不支持切换小程序tab
  • 插件路由拦截只适用于navigator跳转,对于用户点击原生的tab,只能通过监听onhide和ontabitemtap事件来做一些处理,再通过mixins封装
  • 在拦截路由的js文件新增一个方法beforeSwicthTab,一个属性
    Router.from去处理,要切换tab和onTabItemTap时要调用swicthTab并传入to,form,onhide的时候赋值
    Router.from
  • 由于可以使用mixins,已经整合到一个文件,利用mixins的事件函数可以混合的特点

uni-ajax

  • 与axios不同的是,get和post请求参数,get不再需要包一层对象,跟post一样直接传递
  • 由于考虑到ajax有停止请求需要,所以封装时,以ajax整体封装传参
  import _ajax from "./ajax_interceptors";
export default {
  get(url, params = {}) {
    return new Promise((resolve, reject) => {
      _ajax({
        method: "GET",
        url,
        data: params,
        success: (res) => {
          resolve(res);
        },
        fail: (err) => {
          reject(err);
        },
      }).then(task=>{
        // console.log("get task", task);
      })
    });
  },
  post(
    url,
    params,
    header = { "Content-Type": "application/json;charset=UTF-8" }
  ) {
    return new Promise((resolve, reject) => {
      _ajax({
        method: "POST",
        url,
        data: params,
        header,
        success: (res) => {
          resolve(res);
        },
        fail: (err) => {
          reject(err);
        },
      }).then(task=>{
        // console.log("post task", task);
      })
    });
  },
};