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
• 由于可以使用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);
      })
    });
  },
};