uniapp初識筆記

寫在前面：

頁面布局 盡量不要flex 布局了，ios滾動不流暢。底部有固定按鈕的，使用fixed。

 

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

2、換行
<text>\n</text>
3、view標簽，相當於div。
這里的塊狀元素 沒有 占全行。需要手動設置寬度

4、radio 標簽使用
包裹在 radio-group 標簽里，使用change事件變更 數據；
修改默認樣式，該樣式需要在app.vue根文件里導入；頁面組件里 使用不起作用。

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

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

7、組件標簽 仍然存在
因為使用的是 自定義組件模式。舊版 默認是 非自定義組件模式，不會有標簽

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

9、綁定類
以對象的方式綁定不起作用，須改為類名。

10、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)
        }
        })

 

11、獲取手機號
通過button組件，指定open-type 可以獲取。但無法調用api，只能點擊觸發。

12、返回上一頁后 進行事件觸發。
在 onShow 生命周期函數處理。

13、checkbox 第一次選中失效。使用示例代碼
原因：對象id是 數值，選中的數組項 是字符串。確認為字符串就好了。includes(item.id+''）

14、路由傳參

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

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

 

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