备忘录

coderljw 2024-10-13

Uni App
备忘录

小于 1 分钟

# 1. WebView

空地址会导致 WebView 错误跳转，使用 v-if 解决。

<web-view
  v-if="src"
  :src="src"
  :webview-styles="{ color: $mainColor }"
></web-view>

1
2
3
4
5

export default {
  name: 'WebView',
  data() {
    return {
      src: '',
    }
  },
  onLoad({ url }) {
    this.src = url
  },
  onReady() {
    this.setWebView()
  },
  methods: {
    // App配置
    setWebView() {
      try {
        const { statusBarHeight } = uni.$u.sys()
        const currentWebview =
          this.$scope.$getAppWebview() || this.$parent.$scope.$getAppWebview()
        const wv = currentWebview.children()[0]
        wv.setStyle({
          top: 44 + statusBarHeight,
          bottom: 0,
          scalable: true,
        })
      } catch (e) {}
    },
  },
}

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

# 2. IOS 安全域

要在当前使用界面获取，避免出现安全域为负数的情况（一开始存 Vuex 中了）。

onShow() {
  uni.getSystemInfo({
    success: ({ safeAreaInsets, screenHeight, safeArea }) => {
      this.bottomSafeArea =
        safeAreaInsets.bottom > 0
          ? safeAreaInsets.bottom
          : screenHeight - safeArea.bottom
    },
  })
},

1
2
3
4
5
6
7
8
9
10

# 3. Tips

可使用 trim 修饰符解决 input 输入框类型为 password 时的样式问题。
App 中修改轮播图小点样式使用 /deep/ .uni-swiper-dot、/deep/ .uni-swiper-dot-active。微信小程序中将 uni 改为 wx /deep/ .wx-swiper-dot、/deep/ .wx-swiper-dot-active。

小程序 Eslint