Taro简介
Taro 是基于凹凸实验室出品的一个开放式跨端跨框架解决方案，目前3.0版本已经支持vue，对于vue开发者省去了学习成本，今天就基于vue搭建一个demo。
官网：taro.aotu.io/
项目地址：github.com/NervJS/taro
环境搭建
安装
npm i -g @tarojs/cli
创建模板项目
taro init myTaro
选择vue即可，感兴趣的可以选择vue3，并且支持TypeScript语法。
项目结构
├── dist 编译结果目录
├── config 配置目录
| ├── dev.js 开发时配置
| ├── index.js 默认配置
| └── prod.js 打包时配置
├── src 源码目录
| ├── pages 页面文件目录
| | ├── index index页面目录
| | | ├── index.config.js index页面配置
| | | └── index.less index页面样式
| | | └── index.vue index页面布局
| ├── app.config.js 项目全局配置
| ├── app.less 项目总通用样式
| └── app.js 项目入口文件
└── package.json
启动命令
微信小程序 ：
npm run dev:weapp
h5页面 ：
npm run dev:h5
项目启动后打开微信开发工具,选择项目文件即可预览
微信小程序开发：mp.weixin.qq.com/
Taro强大之处在于，可以在熟悉的vscode里面写vue代码，只需要编译成weapp即可，taro可以一直监听文件修改，做到了同步编译，对于开发来说是非常便捷。
Taro Ui Vue
安装 Taro UI Vue
npm install taro-ui-vue
Taro-ui-vue 是为了适配 taro3.0支持vue而在Taro-ui的基础上重构的ui库,如果用React搭建项目请选择Taro-ui
PS：使用Taro-ui-vue必须选择TS语法,否则会报错
引入所需组件
引用官网说法：
由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项：
h5: {
esnextModules: ['taro-ui-vue']
}
全局引入scss
官网可能由于脱胎于Taro Ui，导致说明文档未作修改
// page.js
import { AtButton } from 'taro-ui-vue'
// 除了引入所需的组件，还需要手动引入组件样式
// app.js
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
vue开发修改为import 'taro-ui-vue/dist/style/index.scss'即可，后续引入同理
组件内按需引入，样例如下
样式
代码
<template>
<vivew>
<div @click="Click" class="MyTaro">Click Me</div>
<AtActionSheet
cancelText='取消'
:isOpened="isOpened1"
:on-cancel="handleCancel"
:on-close="handleClose"
title='清除位置信息后， 别人将不能查看到你'
>
<AtActionSheetItem :on-click="clickBtn1">
按钮一
</AtActionSheetItem>
<AtActionSheetItem :on-click="clickBtn2">
按钮二
</AtActionSheetItem>
<AtActionSheetItem :on-click="clickBtn3">
<text class='danger' @click="delectlocal">清除位置信息并退出</text>
</AtActionSheetItem>
</AtActionSheet>
</vivew>
</template>
<script>
import { AtActionSheet, AtActionSheetItem } from 'taro-ui-vue'
import './index.less'
import Taro from '@tarojs/taro'
export default {
name: 'AtActionSheetDemo',
components: {
AtActionSheet,
AtActionSheetItem,
},
data() {
return {
isOpened1: false
}
},
methods: {
Click() {
this.isOpened1 = true;
},
handleClose() {
this.isOpened1 = false
},
showToast (name) {
Taro.showToast({
icon: 'none',
title: name
})
},
// 底部取消按钮回调(Taro Ui 内部封装)
handleCancel() {
this.showToast('handleCancel');
this.isOpened1 = false;
},
// 关闭dialog前回调
handleClose() {
this.showToast('handleClose');
this.isOpened1 = false;
},
clickBtn1() {
this.showToast('点击了按钮一')
},
clickBtn2() {
this.showToast('点击了按钮二')
},
delectlocal() {
this.showToast('清除了位置')
this.isOpened1 = false;
},
}
}
</script>
