更新记录

1.0.0（2022-04-24）

• 新发布

平台兼容性

sn-uniapp-starter

介绍

自定义 uniapp starter，打造自己的uniapp模板项目

特性

• 基于vuex自定义国际化，支持vue2/vue3，vue/nvue
• 支持 unplugin-auto-import
• weex-v-show支持vue2/vue3，参见v-show-view组件
• 支持pinia，见pinia分支

使用

国际化

1. 基于vuex实现，易扩展，兼容@dcloudio/uni-i18n（即uni-ui也支持国际化）
2. API设计兼容uniapp官方国际化方案

• 获取当前语言

  • vue2

    this.$i18n.locale

  • vue3

    import { useLang } from '@/hooks/lang.js'
    const { i18n } = useLang()
    i18n.locale

• 设置语言

  • vue2

    this.$i18n.locale = 'en'

  • vue3

    import { useLang } from '@/hooks/lang.js'
    const { i18n } = useLang()
    i18n.locale = 'en'

• template中使用

  • 使用前提

    vue3需要导入 @/hooks/lang.js

    <text>{{$t('app.name')}}</text>

• nvue中使用

  • vue2

    import extendsGlobal from '@/global.js'
    export default extendsGlobal({
        data() {
            return {}
        }
    })

  • vue3

    <script setup>
        import { useLang } from '@/hooks/lang.js'
        const { i18n, $t } = useLang()
        const changeLocale = locale => {
            i18n.locale = locale
        }
    </script>

  其次，使用$t('key')

  <text>{{$t('app.name')}}</text>

• 支持动态切换语言包

  vue2

  this.$i18n.messages = {
      en: {
          'app.name': 'test'
      },
      'zh-Hans': {
          'app.name': '测试'
      },
      'zh-Hant': {
          'app.name': '測試'
      }
  }

  vue3

  i18n.messages = {
      en: {
          'app.name': 'test'
      },
      'zh-Hans': {
          'app.name': '测试'
      },
      'zh-Hant': {
          'app.name': '測試'
      }
  }

组件

v-show-view - 类似v-show指令组件的view

• vue2

  <v-show-view :show="showTest">
      <text style="font-size: 50rpx;">weex-show 内容</text>
  </v-show-view>

  export default {
      data() {
          return {
              showTest: true
          }
      }
  }

• vue3

  <v-show-view :show="showTest">
      <text style="font-size: 50rpx;">weex-show 内容</text>
  </v-show-view>

  <script setup>
  const showTest = ref(true);
  </script>

已知问题

从HBX 3.4.3 Alpha开始，app-nvue已经支持vue3