Taro Vue3 Nutui开发小程序

秋凉_
2,920 阅读5分钟

前言

由于最近有微信小程序开发的需求，打算通过Taro来实现，截止到目前Taro在github上的star数已经到了33.4k，因工作关系，平时用vue较多，Taro也支持vue，所以选择上面列举的相关进行搭建，在项目的实际开发过程中遇到的问题，也会在相关系列文章持续更新。

先借用官方的话介绍一下什么是Taro，开放式跨端跨框架解决方案，轻松构建可以运行在 小程序/Web/APP 上的应用Taro['tɑ:roʊ]，泰罗·奥特曼，宇宙警备队总教官，实力最强的奥特曼。而Nutui是京东风格的轻量级移动端 Vue 组件库。

IDE说明

开发中，改动代码只需要改动源码，也就是vscode中的代码，不要去修改微信开发者工具中的代码。
vscode:用于源码编写。
微信开发者工具:用于导入打包后的文件(dist目录)，实时查看页面。

初步搭建

1.首先确保有Node环境，npm源设置为可用npm config set registry https://registry.npmmirror.com,这里我设置了淘宝镜像。全局安装Taro CLI,npm i -g @tarojs/cli
2.taro init 命令创建一个全新的项目,按照提示选择安装自己需要的依赖。
3.cd到项目目录，pnpm install安装依赖
4.打开package.json找到scripts里的脚本，可以看到运行微信小程序的命令是"dev:weapp",然后终端里pnpm dev:weapp，等编译完成，就会在项目根目录生成dist目录。（下面会介绍项目源码各个目录）。
5.打开微信开发者工具，导入项目，目录选择刚才在源码根目录下生成的dist目录进行导入，AppID可以先输入一个测试的。（注意默认会给你小程序和小游戏的两个，选择小程序的输入）。

image.png
好，至此，你已经成功的开启了属于你的Taro版的hello world。那么真的成功了吗？别急，让我们修改一下源码中src/pages中index.vue来新增一个按钮。

<template>
  <view class="index">
    <view>
      <img src="" alt="" />
    </view>
    {{ msg }} <Dongdong />
    <view class="btn">
      <nut-button type="primary" @click="handleClick('text', msg2, true)"
        >点我</nut-button
      >
      <nut-button type="info">新增按钮</nut-button>
    </view>
    <nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover" />
  </view>
</template>

ctrl s保存，等待编译完成，兴冲冲打开微信开发者工具，0.o尊嘟假嘟，为啥没变化，需要手动点微信开发者工具的编译才能刷新界面，啊这，那这也太low了吧。 遇事不决去baidu？no no no，因为前端日新月异的更新速度，你搜索的答案往往都已经是过时的，遇事不决要立刻马上去官方文档。
好，定位到文档-编译配置详情，mini.hot,Taro v3.4.0 开始支持。
好好好，我迅雷不及掩耳盗铃小叮当之势，打开了我的package.json，妙啊～～～，恰好Taro的版本是3.6.13。
定位到config目录下的dev.ts（如果你用js应该就是dev.js），改之。

module.exports = {
  env: {
    NODE_ENV: '"development"',
  },
  defineConstants: {},
  mini: {
    hot: true,
  },
  h5: {},
};

然后终端ctrl c终止，然后重新编译pnpm dev:weapp，再次修改页面。

image.png
妙啊，你成功了你知道吗！

画个界面吧

流程已经跑通了，你肯定迫不及待想要画个界面了吧，好好好，你直接化身为产品经理，开..等等，开画之前先了解一下项目结构吧（引自文档）：

├── babel.config.js # Babel 配置
├── .eslintrc.js # ESLint 配置
├── config # 编译配置目录
│ ├── dev.js # 开发模式配置
│ ├── index.js # 默认配置
│ └── prod.js # 生产模式配置
├── package.json # Node.js manifest
├── dist # 打包目录
├── project.config.json # 小程序项目配置
├── src # 源码目录
│ ├── app.config.js # 全局配置
│ ├── app.css # 全局 CSS
│ ├── app.js # 入口组件
│ ├── index.html # H5 入口 HTML
│ └── pages # 页面组件
│ └── index
│ ├── index.config.js # 页面配置
│ ├── index.css # 页面 CSS
│ └── index.jsx # 页面组件，如果是 Vue 项目，此文件为 index.vue

好了开画！

<template>
  <view>
  <nut-row>
    <nut-col :span="24">
      <view
        v-for="(item, index) in [1, 2, 3, 4, 5]"
        :key="index"
        class="content-box"
      >
        <nut-card
          :img-url="state.imgUrl"
          :title="state.title"
          :price="state.price"
          :vipPrice="state.vipPrice"
          :shopDesc="state.shopDesc"
          :delivery="state.delivery"
          :shopName="state.shopName"
        ></nut-card>
      </view>
    </nut-col>
  </nut-row>

  <nut-tabbar bottom safe-area-inset-bottom placeholder @tab-switch="tabSwitch">
    <nut-tabbar-item tab-title="标签" :icon="Home"></nut-tabbar-item>
    <nut-tabbar-item tab-title="标签" :icon="Category"> </nut-tabbar-item>
    <nut-tabbar-item tab-title="标签" :icon="Find"></nut-tabbar-item>
    <nut-tabbar-item tab-title="标签" :icon="Cart"></nut-tabbar-item>
    <nut-tabbar-item tab-title="标签" :icon="My"></nut-tabbar-item>
  </nut-tabbar>
</template>

<script setup>
import { reactive, toRefs } from 'vue';
import {
  Dongdong,
  Home,
  Category,
  Find,
  Cart,
  My,
} from '@nutui/icons-vue-taro';

const state = reactive({
  imgUrl:
    '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
  title:
    '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
  price: '388',
  vipPrice: '378',
  shopDesc: '自营',
  delivery: '厂商配送',
  shopName: '阳澄湖大闸蟹自营店>',
});

const tabSwitch = (item, index) => {
  console.log(item, index);
};
</script>

<style lang="scss">
.content-box {
  padding: 0 10px 0 15px;
  margin-bottom: 15px;
}
</style>

image.png

尾声

基于vue3的setup语法糖的写法，是不是方便又简洁，加上Nutui库的助力，你画页面的速度是不是可以快了很多，可以让你更加专注于业务的开发，此文只是作为Taro开发小程序的开篇，先让各位看到效果，你才有兴趣进一步的研究，我会实际结合项目中遇到的问题解决进行分享，以及组件化的开发的分享，渐进式的去完善Taro开发小程序系列的文章，如果你对此也感兴趣可以来个免费的一键三连。

24年补 开发中遇到的一个小地方

如果想去操作dom，注意不要直接在exec去修改值（页面不会更新），回调的函数去操作。

//dom
<view id="target" class="curveBox"></view>

// js
const leftCal = ref(0);
const changeLeft = num => {
  leftCal.value = num;
};

// 注意要用回调函数的形式去修改值，如果直接在exect直接操作leftCal.value页面不会更新
const calPosition = () => {
  Taro.nextTick(() => {
    Taro.createSelectorQuery()
      .select('#target')
      .boundingClientRect()
      .exec(res => {
        let tempLeft = (number.value / 750) * res[0].width - 70;
        changeLeft(tempLeft);
      });
  });
};

onMounted(() => {
  calPosition();
});
avatar
文章
阅读
粉丝