Taro簡(jiǎn)介

Taro 是基于凹凸實(shí)驗(yàn)室出品的一個(gè)開放式跨端跨框架解決方案，目前3.0版本已經(jīng)支持vue，對(duì)于vue開發(fā)者省去了學(xué)習(xí)成本，今天就基于vue搭建一個(gè)demo。

官網(wǎng)：taro.aotu.io/

項(xiàng)目地址： github.com/NervJS/taro

環(huán)境搭建

安裝

npm i -g @tarojs/cli

創(chuàng)建模板項(xiàng)目

taro init myTaro

選擇vue即可，感興趣的可以選擇vue3，并且支持TypeScript語法。

項(xiàng)目結(jié)構(gòu)

├── dist                          編譯結(jié)果目錄
├── config                        配置目錄
|   ├── dev.js                    開發(fā)時(shí)配置
|   ├── index.js                  默認(rèn)配置
|   └── prod.js                   打包時(shí)配置
├── src                           源碼目錄
|   ├── pages                     頁面文件目錄
|   |   ├── index                 index頁面目錄
|   |   |   ├── index.config.js   index頁面配置
|   |   |   └── index.less        index頁面樣式
|   |   |   └── index.vue         index頁面布局
|   ├── app.config.js             項(xiàng)目全局配置
|   ├── app.less                  項(xiàng)目總通用樣式
|   └── app.js                    項(xiàng)目入口文件
└── package.json
復(fù)制代碼

啟動(dòng)命令

微信小程序 ：

npm run dev:weapp

h5頁面 ：

npm run dev:h5

項(xiàng)目啟動(dòng)后打開微信開發(fā)工具,選擇項(xiàng)目文件即可預(yù)覽

微信小程序開發(fā)： mp.weixin.qq.com/

Taro強(qiáng)大之處在于，可以在熟悉的vscode里面寫vue代碼，只需要編譯成weapp即可，taro可以一直監(jiān)聽文件修改，做到了同步編譯，對(duì)于開發(fā)來說是非常便捷。

Taro Ui Vue

安裝 Taro UI Vue

npm install taro-ui-vue

Taro-ui-vue 是為了適配 taro3.0支持vue而在Taro-ui的基礎(chǔ)上重構(gòu)的ui庫(kù),如果用React搭建項(xiàng)目請(qǐng)選擇 Taro-ui

PS：使用Taro-ui-vue必須選擇TS語法,否則會(huì)報(bào)錯(cuò)

引入所需組件

引用官網(wǎng)說法：

由于引用 node_modules 的模塊，默認(rèn)不會(huì)編譯，所以需要額外給 H5 配置 esnextModules ，在 taro 項(xiàng)目的 config/index.js 中新增如下配置項(xiàng)：

h5: {
  esnextModules: ['taro-ui-vue']
}
復(fù)制代碼

全局引入scss

官網(wǎng)可能由于脫胎于Taro Ui，導(dǎo)致說明文檔未作修改

// page.js
import { AtButton } from 'taro-ui-vue'
// 除了引入所需的組件，還需要手動(dòng)引入組件樣式
// app.js
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
復(fù)制代碼

vue開發(fā)修改為 import 'taro-ui-vue/dist/style/index.scss' 即可，后續(xù)引入同理

組件內(nèi)按需引入，樣例如下

樣式

代碼

<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
      })
    },
    // 底部取消按鈕回調(diào)(Taro Ui 內(nèi)部封裝)
    handleCancel() {
      this.showToast('handleCancel');
      this.isOpened1 = false;
    },
    // 關(guān)閉dialog前回調(diào)
    handleClose() {
      this.showToast('handleClose');
      this.isOpened1 = false;
    },
    clickBtn1() {
      this.showToast('點(diǎn)擊了按鈕一')
    },
    clickBtn2() {
      this.showToast('點(diǎn)擊了按鈕二')
    },
    delectlocal() {
      this.showToast('清除了位置')
      this.isOpened1 = false;
    },
  }
}
</script>
復(fù)制代碼

總結(jié)

Taro作為多端統(tǒng)一開發(fā)解決方案，目前來說是非常值得去運(yùn)用于開發(fā)的，官方維護(hù)速度快，社區(qū)活躍，無論是React還是Vue開發(fā)都可以快速上手。