uniapp开发小技巧

uniapp开发小技巧

记录一下uniapp开发常用的小技巧

1. view沾满屏幕剩余空间

onReady() {
    //	获取可视区域的高度
    uni.getSystemInfo({
      success: res => {
        //	想要沾满屏幕剩余空间的元素（class/id）
        //	注意：如果是scroll-view，这里要写scroll-view外层的（class/id）
        let query = uni.createSelectorQuery().select('.listHeight')
        query
          .boundingClientRect(data => {
            let topHeight = data.top
            //	可用高度减去top高度要在里面设置，放在外面app端不生效
            this.listHeight = `${res.windowHeight - topHeight}px`
          })
          .exec()
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注： 必须要写在 onReady 生命周期中

2. 兼容 IOS 底部安全区域适配

// 兼容 IOS 底部安全区域适配
.safeAreaInsetBottom{
  padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
  padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2
  box-sizing: content-box;
}
1
2
3
4
5
6

3. 自定状态栏样式

// 自定状态栏样式
.u-status-bar {
  background: #1697d9 !important;
}
1
2
3
4

注：写在 App.vue 里可以更改全局状态栏样式

4. 条件编译

作用：条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同的平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef APP-PLUS
	需要条件编译的js
#endif

/* #ifdef APP-PLUS */
	需要条件编译的css
/* #endif */

;
	需要条件编译的vue/nvue 模板里使用
;

1
2
3
4
5
6
7
8
9
10
11
12

%PLATFORM% 可取值如下：

5. 图片上传功能注意事项

如果图片上传功能的时候，遇到 iOS 无法上传图片的问题，请求一直返回statusCode:500，返回的data也是空

1、图片 后缀 无法识别,例如 jpg、JPG 两种格式( iOS 模拟器存在这两种格式图片)，后端可能无法识别 JPG 这种格式(叫后端改)
2、没有添加请求头，iOS 上传图片 一定要添加 header

实例：

	 uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: config.HTTP_REQUEST_URL + '/pic/upload', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          header: {
            token: uni.getStorageSync('token') || ''
          },
          formData: {
            user: 'test'
          },
          success: res => {
            setTimeout(async () => {
              resolve(res.data)
            }, 1000)
          }
        })
      })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

6. 小程序canvas渲染出现报错ReferenceError: getCanvasHandlers is not defined

在 微信开发工具——详情——本地设置——调试基本库，把基本库调试到最新的版本就可以解决这个问题。

7.Input输入框限制输入小数点两位数

<input type="number" @input="handleInput" v-model="appIntegral" />
<view class="submit" @click="submit()">提交</view>
 
export default {
data() {
	return {
		appIntegral: "",
	}
},
methods: {
handleInput(e) {
  let value = e.detail.value; // 接收变量
  value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
  value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
  // value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入2个小数
  // value = value.replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3');//只能输入3个小数
  // value = value.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3'); //只能输入4个小数
  // value = value.replace(/^(\-)*(\d+)\.(\d\d\d\d\d).*$/, '$1$2.$3'); //只能输入5个小数
  if (value.indexOf(".") < 0 && value != "") { 
  //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额  
	  value = parseFloat(value);
  }
  this.$nextTick(function() {
		this.appIntegral = value
	// e.detail.value = value    赋值回去
  })
},
submit(){
let num = Math.abs(this.appIntegral);  //取绝对值
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

8. APP不同意隐私政策，在第二次打开应用的时候都不会弹出隐私政策

解决方法在androidPrivacy.json内加入：

"disagreeMode" : {
        "showAlways" : true
},
1
2
3

9. uniapp中IOS输入框type=“number“没有小数点问题

输入框限制只能输入数字时，我通常会使用type="number"属性，但其在IOS系统中显示时会不能输入小数点，因此我去查询了一些资料，记录一下。
需要只能输入数字且需要小数点时，使用属性digit，即type=“digit”