创建uniapp + TypeScript + uview-ui的前端工程

创建uniapp + TypeScript + uview-ui的前端工程

1. 使用vue命令生成一个uniapp工程，在命令行输入：

vue create -p dcloudio/uni-preset-vue my-ts-uni

选择 默认模板(TypeScript)

2. 安装uview-ui，首先进入my-ts-ui目录

cd my-ts-ui

修改package.json文件

"@dcloudio/vue-cli-plugin-uni": "^2.0.0",

然后输入以下命令：

sudo apt install make
sudo apt install g++
yarn add node-sass@npm:dart-sass -D
yarn add sass-loader@10 -D
yarn add uview-ui

3. 用HbuilderX打开my-ts-ui目录，开始配置工程文件。首先引入uView主JS库，在项目根目录中的main.ts中，引入并使用uView的库，注意这两行要放在import Vue之后。

import uView from 'uview-ui';
Vue.use(uView);

引入uView的全局SCSS主题文件：在项目src目录的uni.scss中引入此文件。

@import 'uview-ui/theme.scss';

引入uView基础样式：在项目src目录的App.vue中引入此文件，这里要注意给style标签加入lang="scss"属性

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
</style>

配置easycom组件模式，此配置需要在项目根目录的pages.json中进行。请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

 {
    "easycom": {
            "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },

    // 此为本身已有的内容
    "pages": [
            // ......
    ]
}

温馨提示uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。

添加uview-ui的声明文件，编辑sfc.d.ts文件，在下面添加一行：

declare module 'uview-ui';

src目录下添加vue.config.js文件：

module.exports = {
  transpileDependencies: ['uview-ui']
};

编辑tsconfig.json文件，增加下面这一个配置：

"noImplicitAny": false,

4. 输入示例项目，安装成功

<template>
  <view class="wrap">
    <view class="key-input">
      <view class="title">输入验证码</view>
      <view class="tips">验证码已发送至 +139****0000</view>
      <u-message-input
        :focus="true"
        :value="value"
        @change="change"
        @finish="finish"
        mode="bottomLine"
        :maxlength="maxlength"
      ></u-message-input>
      <text :class="{ error: error }">验证码错误，请重新输入</text>
      <view class="captcha">
        <text :class="{ noCaptcha: show }" @tap="noCaptcha"
          >收不到验证码点这里</text
        >

        <text :class="{ regain: !show }">{{ second }}秒后重新获取验证码</text>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      maxlength: 4,
      value: "",
      second: 3,
      show: false,
      error: false,
    };
  },
  computed: {},
  onLoad() {
    // this.getCaptcha()
    let interval = setInterval(() => {
      this.second--;
      if (this.second <= 0) {
        this.show = true;
        if (this.value.length != 4) {
          this.error = true;
        }
        clearInterval(interval);
      }
    }, 1000);
  },
  methods: {
    // 收不到验证码选择时的选择
    noCaptcha() {
      uni.showActionSheet({
        itemList: ["重新获取验证码", "接听语音验证码"],
        success: function (res) {},
        fail: function (res) {},
      });
    }, // change事件侦听
    change(value: any) {
      console.log("change", value);
    }, // 输入完验证码最后一位执行
    finish(value: any) {
      console.log("finish", value);
    },
  },
});
</script>
<style lang="scss" scoped>
.wrap {
  padding: 80rpx;
}
.box {
  margin: 30rpx 0;
  font-size: 30rpx;
  color: 555;
}
.key-input {
  padding: 30rpx 0;
  text {
    display: none;
  }
  .error {
    display: block;
    color: red;
    font-size: 30rpx;
    margin: 20rpx 0;
  }
}
.title {
  font-size: 50rpx;
  color: #333;
}
.key-input .tips {
  font-size: 30rpx;
  color: #333;
  margin-top: 20rpx;
  margin-bottom: 60rpx;
}
.captcha {
  color: $u-type-warning;
  font-size: 30rpx;
  margin-top: 40rpx;
  .noCaptcha {
    display: block;
  }
  .regain {
    display: block;
  }
}
</style>