小程序共同解決方案

• 顏色 一律hex值，不要設(shè)置blue之類憔辫，只有black和white可用
• 按鈕 在小程序默認(rèn)有個(gè)點(diǎn)擊效果背景色俱箱，設(shè)置屬性hover-class="none"廊移，去除默認(rèn)背景色
  或者在uni.scss設(shè)置 hover-class="button-primary_hover"全局類樣式
• button組件在各個(gè)平臺(tái)類型樣式不一樣导披，在uni.scss設(shè)置button-primary全局樣式類

支付寶小程序 相似坑不同解決方案

route插件編程式導(dǎo)航丟失底部tab組件

• 換成uniapp.switchTab 然后return

  // #ifdef MP-WEIXIN
      uni.switchTab({ url: '/pages/about/about' })
      return
      // #endif

hbuilderx運(yùn)行時(shí)編譯笋粟，能打開開發(fā)者工具但是不能直接打開項(xiàng)目怀挠，手動(dòng)打開

• 猜測(cè)由于沒有生成sourcemap文件，開發(fā)工具不能識(shí)別項(xiàng)目

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

route插件編程式導(dǎo)航丟失底部tab組件

• 換成uniapp.switchTab 然后return

      // #ifdef MP-ALIPAY
      uni.switchTab({ url: '/pages/about/about' })
      return 
      // #endif

hbuilderx運(yùn)行時(shí)編譯害捕，不要填appid绿淋，等打開項(xiàng)目再填，才能讓微信開發(fā)工具打開項(xiàng)目

微信小程序特有

• 自定義組件使用slot的自定義組件內(nèi)部取決于調(diào)用組件時(shí)賦值
• uniapp自定義組件使用slot尝盼，會(huì)造成slot與組件包裹slot的div隔開
• 在調(diào)用sticky組件時(shí)吞滞，設(shè)置style="width: 100%"
• onTabItemTap事件最低微信小程序 模擬器版本為2.5.2 官方文檔真機(jī)為1.9.0 可信度不知，如果你要在模擬器看效果盾沫，得用2.5.2的版本
• position:fixed;設(shè)置裁赠，才不出現(xiàn)怪異布局

  position: fixed;
  left: 50%;
  transform: translateX(-50%);

• position:absoult;要設(shè)置left:0;z-index:100;才不出現(xiàn)怪異布局
• 自定義組件調(diào)試時(shí)，調(diào)試工具會(huì)有時(shí)右側(cè)樣式不動(dòng)
• 自定義組件疮跑， 不能直接對(duì)象賦值style屬性组贺，只能一個(gè)一個(gè)屬性賦值
• 使用swiper組件時(shí)凸舵，設(shè)置style="width: 100%"
• 由于編譯后出現(xiàn)奇怪布局祖娘，目前只做col組件，而且要設(shè)計(jì)好書寫樣式和html規(guī)范啊奄，全局設(shè)置一個(gè)row類名的flex樣式渐苏，直接填充到div的類名，才能用flex布局
• 編寫mixins時(shí)菇夸，到真機(jī)調(diào)試時(shí)琼富，可能會(huì)出現(xiàn)is not exsits提示，請(qǐng)重新編譯庄新，并運(yùn)行

支付寶小程序特有

• 頁(yè)面滾動(dòng)不支持duration
• 對(duì)于ajax攔截器取消請(qǐng)求報(bào)錯(cuò)不會(huì)顯示
• 底部彈出框會(huì)使模擬器導(dǎo)航有返回按鈕鞠眉，不用管薯鼠，真機(jī)不會(huì)
• 點(diǎn)擊另一個(gè)tab時(shí)，當(dāng)前tab會(huì)執(zhí)行onHide但是不會(huì)執(zhí)行滾動(dòng)事件 h5
• 原生的button文本內(nèi)容不參與padding
• 使用u-swiper組件時(shí)械蹋，設(shè)置style="width: 100%"找到u-swiper文件.u-swiper-wrap要加width:100%

• 對(duì)于找不到對(duì)象屬性值出皇，會(huì)保持上次的值

  
  
  image.png

h5特有

• 由于h5的導(dǎo)航是模擬的，設(shè)置position:fixed;距離頂部是導(dǎo)航頂部哗戈，跟小程序頂部是導(dǎo)航底部不一樣

uview ui框架問題

• 吸頂不行 支付寶小程序恢復(fù)不了初始狀態(tài)郊艘，從fixed布局恢復(fù)不了relative布局
• 按鈕不行 點(diǎn)擊卡
• 柵格布局 微信小程序靈活性不夠，樣式太難改動(dòng)

書寫樣式總結(jié)

• 針對(duì)支付寶小程序不支持調(diào)用組件class類不起作用 外加基礎(chǔ)div

  
  
  image.png
• 針對(duì)微信小程序使用slot的自定義組件內(nèi)部寬度取決于調(diào)用組件時(shí)賦值唯咬，針對(duì)柵格系統(tǒng)纱注，調(diào)用組件數(shù)組綁定寬度相同類名
  
  image.png

uni-simple-router 特有

• 記得路由的path要跟page.json保持一致path，雖然多寫一遍胆胰，但是為了攔截效果還是得寫好
• 不支持router-view 這種嵌套路由的形式開發(fā)小程序
• 編程式導(dǎo)航不支持切換小程序tab
• 插件路由攔截只適用于navigator跳轉(zhuǎn)狞贱，對(duì)于用戶點(diǎn)擊原生的tab，只能通過監(jiān)聽onhide和ontabitemtap事件來做一些處理煮剧，再通過mixins封裝
• 在攔截路由的js文件新增一個(gè)方法beforeSwicthTab斥滤，一個(gè)屬性
  
  Router.from
• 由于可以使用mixins，已經(jīng)整合到一個(gè)文件草娜，利用mixins的事件函數(shù)可以混合的特點(diǎn)

uni-ajax

• 與axios不同的是挑胸，get和post請(qǐng)求參數(shù)，get不再需要包一層對(duì)象宰闰，跟post一樣直接傳遞
• 由于考慮到ajax有停止請(qǐng)求需要茬贵，所以封裝時(shí)，以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);
      })
    });
  },
};