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为空，不会触发。