1. 程式人生 > >吐槽小程式開發踩過的坑,以及一些解決方法

吐槽小程式開發踩過的坑,以及一些解決方法

網路請求相關

bug: http狀態碼不管是什麼,一律被解析成200

0.png

要真正解決,只能等官方去fix這個bug了.

發出請求需要注意的幾個細節

1.header要設定正確:

get請求時為

header:{
            "content-type":'application/json'
        },

post請求時為:

 header:{
        "content-type":'application/x-www-form-urlencoded'
    },

2.header不要寫成head.(我之前就是這裡寫錯了,還一直以為是微信的bug….)
3.content-type要小寫.

4.引數的拼接

get請求時:
引數要自己變成xx=yyy&hhh=uuu的形式,並自己加問號,拼接在路徑後面,然後設定給url.不能直接將引數設定給data.微信是不會自動給你裝拼的.

post請求時:分兩種情況,
如果伺服器api需要的是xx=yyy&hhh=uuu形式(key-value)的引數,那麼需要自己拼裝成這樣的一個字串,然後設定給data
如果伺服器需要的是一個json,那麼要將攜帶引數的物件的value進行urlencode後,將整個json設定給data.

post的兩種情況

引數的拼接:
引數的拼接程式碼.png

公測開放後,強制要求請求全部為https

配置伺服器的頁面,https是寫死的,不可更改

如果用了這個列表以外的域名,直接就被開發工具攔截,請求無法發出去,提示請求不在域名列表中.

解決辦法:伺服器相關api升級ssl

圖片

沒有設定初始圖的api,也沒有圖片快取,於是,網路不好時,情況是這樣的:

1478586977352_12.png

沒有設定圖片載入失敗後統一的處理,必須每個image標籤都寫處理方式

下面兩張圖片載入失敗,於是一片空白.充分感受到api設計人員的業餘.

1478587104169_13.png

view標籤不識別’/n’換行符,text元件可以.但是text元件會不響應margin和padding值.

dialog(modal)的content無法解析換行符:

後來在真機上執行是可以識別js的換行符的,只是在開發工具中不行.

1478587247214_14.png

1478587261184_15.png

對話方塊樣式太少,可修改的樣式太少

看看手機端的常見對話方塊常用樣式有哪些吧

要彈出其他樣式,自定義樣式的,怎麼辦?自己寫css吧.拿這個去改改:

    .dialogcover {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;


    }

    .dialogcover:target {
        opacity:1;
        pointer-events: auto;
    }

    .dialogcontainer {
        width: 80%;
        position: fixed;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 40%;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #ffffff;
        z-index: 99999;
        opacity:1;
    }

toast有成功和loading狀態,竟然沒有失敗狀態,are you OK?更奇葩的是,它的寬度居然是寫死的,字一多就醜得要死

不管有沒有,我們自己直接拿成功的toast包裝好showFailToast()方法,,到處用著先.
最後如果官方真不提供,自己用css寫一個!

1478588274190_20.png

點選事件被上層view消費,還會傳遞到下層

點選了去支付後,不僅會跳到支付頁面,還會呼叫後面整個item的點選事件,跳到訂單詳情頁

注: 評論區提出來了,這個是因為我用bindtap來響應事件時,事件還會一層層往下傳,用catchtap就不會了.

事件分為冒泡事件和非冒泡事件:

  1. 冒泡事件:當一個元件上的事件被觸發後,該事件會向父節點傳遞
  2. 非冒泡事件:當一個元件上的事件被觸發後,該事件不會向父節點傳遞。
  3. bind事件繫結不會阻止冒泡事件向上冒泡,catch事件繫結可以阻止冒泡事件向上冒泡。

1478587384784_16.png

navigateTo無法封裝到另一個js方法中,只能直接寫,而且失敗還不走失敗的回撥

1478587493211_17.png

1478587500074_18.png

解決辦法: 儘量用navigator標籤吧.

block的item不能講iteminfo整個obj傳回來,只能傳基本資料型別

1478588311355_21.png

拿到的是:

1478588330540_22.png

通過scrollview來實現上拉載入更多,一直沒有觸發載入更多的事件

使用豎向滾動時,需要給scroll-view一個固定高度,通過 WXSS 設定 height。
如果scroll-view高度設定為100%,則不能觸發上拉重新整理和下拉載入事件……

wxml模板不生效

import 寫法有坑:

  1. 模板檔名與檔案內部的模板名必須一致,否則不生效.這是個大坑,我的之前不顯示就是因為pagestate.wxml檔案裡模板名寫成了name=”pageState”
  2. 路徑(../)代表退出當前資料夾,退兩次就到了根目錄,然後進入到template/pagestate.wxml這個路徑不必寫在wxml的最上方,任何地方都可以寫,最好就寫在用之前的一行.方便到處拷貝.
  3. 模板中資料多時,引用時資料應該封裝成data中一個欄位,用…bean來拆解,自動分發.尤其是一個頁面中多次引用這同一個模板時,只需要用bean1,bean2來區分即可,不需要改模板中的欄位.所以,不要在模板檔案中直接寫死.

例子:模板檔案pagestate.wxml:

<template name="pagestate" >

    <view class ="empty_view" wx:if="{{!emptyHidden}}"   >
        <view class="center_wrapper" >
            <view class="center_child" >
                <icon type="info" size="45"/>
                <view class="msg"> {{emptyMsg}}</view>
            </view>
        </view>
    </view>

    <view class ="error_view" wx:if="{{!errorHidden}}"  >
        <view class="center_wrapper">
            <view class="center_child" >
                <icon type="warn" size="45" />
                <view class="msg"> {{errorMsg}}</view>
                <button  class = "retrybtn"  type="warn"  loading="{{btnLoading}}"
                         disabled="{{btnDisabled}}" catchtap="onRetry" hover-class="other-button-hover"> 點選重試 </button>
            </view>
        </view>
    </view>
 </template>

例子:模板使用時的格式:

    <import src="../../template/pagestate.wxml"/>
    <view >
        <template is="pagestate" data="{{...netStateBean}}"/>
    </view>

開發工具更新後

原先height:auto失效,必須指定image的高度為具體數值,不然高度為0.

tab切換

tab切換時,注意wxml裡和js裡要用同一型別的值來判斷當前,比如wxml裡用string,那js裡就不能用int

1478588589240_23.png
Data裡,tabIndex的值只能取字串(用單引號或雙引號),不能取int.