诗词小程序，让诗词文化在小程序中绽放

2023-12-21 20:08:30

前言

小程序是腾讯微信推出的新型应用开发平台，它无需安装即可使用，且具备跨平台、低成本、易开发等优点。云开发则是微信小程序提供的一套后端云服务，它可以帮助开发者快速搭建并维护小程序后端。

技术选型

本项目采用Taro+TypeScript+Dva+微信小程序云开发技术栈进行开发。其中，Taro是一个跨平台开发框架，它可以帮助开发者使用同一套代码开发出可以在微信、支付宝、百度等多个平台运行的小程序。TypeScript是JavaScript的超集，它可以帮助开发者编写出更健壮、更易维护的代码。Dva是一个前端状态管理框架，它可以帮助开发者更好地管理小程序的状态。微信小程序云开发则是微信小程序提供的一套后端云服务，它可以帮助开发者快速搭建并维护小程序后端。

项目结构

项目结构如下：

├── client  # 微信小程序代码
│   ├── app.config.js  # 微信小程序配置文件
│   ├── app.js  # 微信小程序主入口文件
│   ├── components  # 微信小程序组件
│   ├── pages  # 微信小程序页面
│   ├── store  # 微信小程序状态管理
│   ├── utils  # 微信小程序工具类
│   └── package.json  # 微信小程序 package.json 文件
├── cloud  # 云函数代码
│   ├── index.js  # 云函数入口文件
│   ├── package.json  # 云函数 package.json 文件
├── config  # 配置文件
│   ├── dev.js  # 开发环境配置
│   ├── prod.js  # 生产环境配置
│   └── default.js  # 默认配置
└── package.json  # 项目 package.json 文件

开发步骤

1. 创建项目

# 使用 Taro CLI 创建一个新的 Taro 项目
taro init my-poetry-app

2. 安装依赖

# 安装 Taro 依赖
cd my-poetry-app
npm install

# 安装 TypeScript 依赖
npm install typescript @types/node @types/react @types/react-dom

# 安装 Dva 依赖
npm install dva dva-core dva-loading

3. 配置项目

# 修改 Taro 项目的配置文件 app.config.js
# 将 "framework": "react" 修改为 "framework": "vue"
{
  "pages": [
    "pages/home/index",
    "pages/detail/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "诗词小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#000000",
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "首页",
        "iconPath": "assets/images/home.png",
        "selectedIconPath": "assets/images/home_active.png"
      },
      {
        "pagePath": "pages/detail/index",
        "text": "详情",
        "iconPath": "assets/images/detail.png",
        "selectedIconPath": "assets/images/detail_active.png"
      }
    ]
  },
  "framework": "vue"
}

4. 编写代码

在client/pages/home/index.vue文件中编写首页代码：

<template>
  <view class="home-page">
    <view class="search-bar">
      <input type="text" placeholder="搜索诗词" v-model="keyword" />
      <button @click="search">搜索</button>
    </view>
    <view class="poetry-list">
      <view class="poetry-item" v-for="item in poetryList" :key="item.id">
        <view class="title">{{ item.title }}</view>
        <view class="author">{{ item.author }}</view>
        <view class="content">{{ item.content }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { getPoetryList } from '@/api/poetry'

export default {
  setup() {
    const store = useStore()
    const keyword = ref('')
    const poetryList = ref([])

    const search = () => {
      if (!keyword.value) {
        return
      }

      getPoetryList({ keyword: keyword.value }).then(res => {
        if (res.code === 0) {
          poetryList.value = res.data
        }
      })
    }

    return {
      keyword,
      poetryList,
      search
    }
  }
}
</script>

<style>
.home-page {
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
}

.search-bar input {
  width: 100%;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.search-bar button {
  width: 60px;
  height: 30px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.poetry-list {
  margin-top: 20px;
}

.poetry-item {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

.poetry-item .title {
  font-size: 18px;
  font-weight: bold;
}

.poetry-item .author {
  font-size: 14px;
  color: #999;
}

.poetry-item .content {
  font-size: 16px;
}
</style>