uniapp初識筆記

寫在前面：

頁面佈局 儘可能不要flex 佈局了，ios滾動不流暢。底部有固定按鈕的，使用fixed。

 

一、引入less
經過編輯器，工具-插件安裝- less編譯

二、換行
<text>\n</text>
三、view標籤，至關於div。
這裏的塊狀元素 沒有 佔全行。須要手動設置寬度

四、radio 標籤使用
包裹在 radio-group 標籤裏，使用change事件變動 數據；
修改默認樣式，該樣式須要在app.vue根文件裏導入；頁面組件裏 使用不起做用。

五、input 佔位符的樣式修改
placeholder-class屬性    String    "input-placeholder"    指定 placeholder 的樣式類

六、px與rpx 混用
場景：知道自定義導航欄的高度（px）；tab欄高度（rpx）。
導航欄、tab欄須要fixed。內容區域須要計算出距離頂部的距離。
可用：
內容區域新增一佔位view，使用rpx設置高度，margin-top 使用px；。

七、組件標籤 仍然存在
由於使用的是 自定義組件模式。舊版 默認是 非自定義組件模式，不會有標籤

八、樣式修改
一些樣式 在微信開發工具獲取不到，能夠用谷歌瀏覽器來打開，修改。

九、綁定類
以對象的方式綁定不起做用，須改成類名。

十、uni.chooseimg 轉爲buffer，
 

uni.request({
        url: url, // 選擇圖片api返回的圖片路徑
        method:'GET',
        responseType: 'arraybuffer',
        success: ress => {
            
            
            let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer轉成base64
            base64 = 'data:image/jpeg;base64,' + base64 //不加上這串字符，在頁面沒法顯示的哦
            
            const buffer = Buffer.from(base64, 'base64');
            // const arrayBuffer = uni.base64ToArrayBuffer(base64)
            
            console.log('buffer:', buffer)
            resolve(buffer)
        }
        })

 

十一、獲取手機號
經過button組件，指定open-type 能夠獲取。但沒法調用api，只能點擊觸發。

十二、返回上一頁後 進行事件觸發。
在 onShow 生命週期函數處理。

1三、checkbox 第一次選中失效。使用示例代碼
緣由：對象id是 數值，選中的數組項 是字符串。確認爲字符串就行了。includes(item.id+''）

1四、路由傳參

<navigator :url="'/pages/store-info/store-info?id='+item.id"

onLoad(options) {
            getShopInfo(options.id).then(res => this.info = res)
        }

 

1五、image標籤，失敗時設置默認圖片
經過 @error 事件來處理。 img 能夠是外網圖片，也能夠是經過import導入 的本地圖片。
handleError(item) {    
              //src爲for循環中綁定的對象的屬性。直接傳對象。  
              item.src= img;  
            }  
注意：只有當 src存在值，但load失敗纔會進入錯誤處理。src爲空，不會觸發。