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