前言
在小程序上用TS，并且用上uniapp这个框架,你说香不香，哈哈哈 ， 其中虽然弄了好久，看了些博客，感觉都很相同对自己没有啥帮助， 还是安装官网来安装 最为靠谱，哈哈
好了，少年面对疾风吧
好了 先来一发教程：
官网下载 软件 uniapp.dcloud.io/
聪明的你一地发现了2种安装方式，我也实践了了一些创建TS最快的方法，当然还是
用cli 命令行创建的
第一步
全局安装vue-cli
npm install -g @vue/cli
创建uni-app
使用正式版（对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-ts，
几秒过后，你可以看到 如下图 所示：
选中 默认模板 （typeScript ） 然后 回车等待几秒
然后在用编辑器xbuilder打开 (自己去下载下这个编辑器还是很好用的)
然后你打开会发现是这样的页面:
简单指导一下如何用TS在unaipp:
在新项目的vue文件中使用内联 TS
<script lang="ts">
按需引入vue装饰器
import { Component,Vue ,Watch} from "vue-property-decorator";
不管干啥先把下面这句话加上。
@Component({}) //必须
常见装饰器的使用
export default class Idnex extends Vue{
private title:String = 'myTitle'; //响应式属性
private num:Number = 123; //对标之前的data函数返回的对象
get age():Number{ //计算属性
return this.num;
}
onLoad(){
this.printTitle();
let a:string = '123';
}
@Watch('title') //watch，此处是监听title的变化
titleChange(newVal:Number,oldVal:Number){
console.log(newVal,oldVal);
}
printTitle():void{ //methods
console.log('hahahhhaha')
}
其实我默认index 页面是这样的：用TS改了下
<template>
<view class="content">
<image class="logo" :src="'../../static/logo.png'"></image>
<view>
<view v-for="(title, key) in titles" :key="key" class="title">{{title}}</view>
</view>
</view>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class Home extends Vue {
titles: string[] = ['title1', 'title2'];
onLoad() {
console.log(this.titles)
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
}
.logo{
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>
运行xbuilder的类似play 你在小程序上就可以看到了
是不是很 开心 哈哈
引入vant
- 项目根目录下新建 wxcomponents 目录 ，此目录应该与components 目录同级。
- 直接通过 git 下载 vant-weapp 最新源代码，并将dist目录拷贝到新建的wxcomponents目录下，并重命名dist@vant/weapp。
在你的 pages.json 文件下写
"globalStyle": {
"backgroundColor": "light",
"navigationBarBackgroundColor": "#fd4d67",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "white",
"usingComponents": {
"van-button": "wxcomponents/@vant/weapp/button/index",
"van-datetime-picker": "wxcomponents/@vant/weapp/datetime-picker/index",
"van-area": "wxcomponents/@vant/weapp/area/index",
"van-checkbox": "wxcomponents/@vant/weapp/checkbox/index",
"van-checkbox-group": "wxcomponents/@vant/weapp/checkbox-group/index",
"van-picker": "wxcomponents/@vant/weapp/picker/index",
"van-cell": "wxcomponents/@vant/weapp/cell/index",
"van-cell-group": "wxcomponents/@vant/weapp/cell-group/index",
"van-popup": "wxcomponents/@vant/weapp/popup/index",
"van-tabs": "wxcomponents/@vant/weapp/tabs/index",
"van-tab": "wxcomponents/@vant/weapp/tab/index",
"van-radio": "wxcomponents/@vant/weapp/radio/index",
"van-radio-group": "wxcomponents/@vant/weapp/radio-group/index",
"van-tag": "wxcomponents/@vant/weapp/tag/index",
"van-field": "wxcomponents/@vant/weapp/field/index",
"van-toast": "wxcomponents/@vant/weapp/toast/index",
"van-switch": "wxcomponents/@vant/weapp/switch/index",
"van-divider": "wxcomponents/@vant/weapp/divider/index",
"van-action-sheet": "wxcomponents/@vant/weapp/action-sheet/index",
"van-dialog": "wxcomponents/@vant/weapp/dialog/index",
"van-swipe-cell": "wxcomponents/@vant/weapp/swipe-cell/index",
"van-index-bar": "wxcomponents/@vant/weapp/index-bar/index",
"van-index-anchor": "wxcomponents/@vant/weapp/index-anchor/index",
"van-loading": "wxcomponents/@vant/weapp/loading/index"
}
页面中使用引入的UI组件
在App.Vue文件中style部分引入UI组件库
<script lang="ts">
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
@import "/wxcomponents/@vant/weapp/common/index.wxss";
/*每个页面公共css */
</style>
然后就可以愉快使用 用ts 和vant啦
BOOM shaka laka la
哈哈，开始你的uniapp TS 之旅吧
