微信小程序课程设计记单词app实现-CSDN博客

本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/149426314

文章目录

1. 前言

在移动互联网时代，利用碎片化时间学习已经成为现代人的普遍需求。微信小程序因其无需安装、即用即走的特性，成为开发轻量级学习应用的理想平台。本文将详细介绍如何开发一款基于微信小程序的单词记忆应用，分享从设计到实现的全过程。

2. 项目概述

2.1 功能需求

记单词App主要包含以下核心功能：

首页顶部轮播图
单词学习（展示、发音）
单词搜索
单词搜索历史记录(方便查阅)
复习词（可以将陌生的单词添加到复习词库，方便随时查看）
首页每日一句英语显示

2.2 技术选型

app前端：微信小程序原生开发
数据库：小程序自带Storage API缓存数据
开发语言：javascript

3. 核心页面实现

3.1 首页实现

首页展示学习进度和快速入口：

// index.js
import http from '../../net/http'
Page({

	data: {
		bannerList: [{
			"_id": 0,
			"img_url": "https://img0.baidu.com/it/u=1556157413,4030339435&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
		},
		{
			"_id": 1,
			"img_url": "https://img2.baidu.com/it/u=1647277424,3775238791&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
		},
		{
			"_id": 2,
			"img_url": "https://img0.baidu.com/it/u=2646816725,565686172&fm=253&fmt=auto&app=138&f=JPEG?w=1477&h=500"
		},
		{
			"_id": 3,
			"img_url": "https://img2.baidu.com/it/u=2004861905,663621055&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
		},
		{
			"_id": 4,
			"img_url": "https://img1.baidu.com/it/u=1676616357,1953409916&fm=253&fmt=auto&app=120&f=JPEG?w=886&h=500"
		},
		{
			"_id": 5,
			"img_url": "https://img1.baidu.com/it/u=907767258,3028128115&fm=253&fmt=auto&app=138&f=JPEG?w=872&h=400"
		},
		],
		//每日一句英语
		dailyEng: {},

	},

	onLoad() {
		this.dailyEnglish();
	},

	/**
 * 搜索点击事件
 */
	onClickSearchHandle() {
		console.log("onClickSearchHandle")
		wx.switchTab({
			url: '/pages/search/search',
		})
	},


	/**
	 * 每日一句励志英语
	 */
	async dailyEnglish() {
		const res = await http.get("https://open.iciba.com/dsapi/", null, { isLoading: false })
		this.setData({
			dailyEng: res.data
		})
	},

	onRecordHandle() {
		wx.navigateTo({
			url: '/pages/record/record',
		})
	},

	onStudyHandle() {
		wx.switchTab({
			url: '/pages/study/study',
		})
	},
	onReViewHandle() {
		wx.navigateTo({
			url: '/pages/reviews/reviews',
		})
	}
})

3.2 单词学习页

// pages/study/study.js
//导入数据
import { wordList } from '../../utils/dataservice'
import { getYoudaoTTS } from '../../utils/youdaoTTS';
Page({

  /**
   * 页面的初始数据
   */
  data: {

    word: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //随机从wordList取出一条数据
    this.getRandomWord();
  },


  /**
   * 从wordList中随机获取一个单词
   */
  getRandomWord() {
    const randomIndex = Math.floor(Math.random() * wordList.length); // 生成随机索引
    const randomWord = wordList[randomIndex]; // 获取随机单词对象
    this.setData({
      word: randomWord
    })
  },

  /**
   * 下一词
   */
  onNextHandle() {
    this.getRandomWord();
  },


  /**
   * 加入复习
   */
  onReviewHandle() {

    const reviews = wx.getStorageSync('reviews') || []
    reviews.unshift(this.data.word)
    wx.setStorageSync('reviews', reviews)
    wx.showToast({
      title: '添加成功',
      icon: 'success'
    })
    //下一题
    this.getRandomWord();
  },


  /**
   * 实现语音
   */
  async onVoiceHandle() {
    try {
      const text = this.data.word.entry;
      const filePath = await getYoudaoTTS(text); // 获取音频文件路径

      // 1. 创建音频上下文（建议提前初始化）
      if (!this.audioCtx) {
        this.audioCtx = wx.createInnerAudioContext();
      }

      // 2. 确保文件存在（关键检查）
      const fs = wx.getFileSystemManager();
      try {
        await new Promise((resolve, reject) => {
          fs.access({
            path: filePath,
            success: resolve,
            fail: () => reject(new Error('音频文件不存在'))
          });
        });
      } catch (fsErr) {
        throw new Error('音频文件写入失败: ' + fsErr.message);
      }

      // 3. 设置音频源并播放（添加事件监听）
      this.audioCtx.src = filePath;
      this.audioCtx.onCanplay(() => {
        this.audioCtx.play(); // 确认可播放后再启动
      });
      this.audioCtx.onError((err) => {
        console.error('播放器错误:', err.errMsg);
        wx.showToast({ title: '播放器错误', icon: 'none' });
      });
      this.audioCtx.onEnded(() => {
        // 恢复按钮状态操作
      });

    } catch (err) {
      console.error('TTS全流程错误:', err);
      wx.showToast({
        title: err.message,
        icon: 'none'
      });
    } finally {
      //这里可以做一些其它操作
    }
  }
})

3.3 单词搜索页


// pages/search/search.js
import http from '../../net/http'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    keyword: '',
    entriesList: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  onInput(options) {
    this.setData({
      keyword: options.detail.value
    });
  },
  /**
  * 搜索
  */
  async search() {
    const message = this.data.keyword.trim();
    if (!message) {
      wx.showToast({
        title: '请输入单词',
        icon: 'error'
      })
      return;
    }
    const prams = {
      num: '1',
      doctype: 'json',
      q: this.data.keyword
    }
    const res = await http.get("http://dict.youdao.com/suggest", prams)
    this.setData({
      entriesList: res.data.data.entries
    })

    //保存搜索记录
    let records = wx.getStorageSync('records') || []
    // 1. 将新数据（数组）展开并合并到原数组
    records = [...res.data.data.entries,...records];
   // 2. 去重：基于 entry 字段（假设 entry 是唯一标识）
   const uniqueEntries = new Set();
    records = records.filter(item => {
      if (!uniqueEntries.has(item.entry)) {
        uniqueEntries.add(item.entry);
        return true;
      }
      return false;
    });

    // 3. 限制总数（例如最多保留 50 条）
    if (records.length > 50) {
      records = records.slice(-50); // 保留最后 50 条
    }
    wx.setStorageSync('records', records);

  }
})

3.4 复习词库页


// pages/reviews/reviews.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    entriesList: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      entriesList: wx.getStorageSync('reviews') || []
    })
  },



  /**
   * 删除
   */
  onDelHandle(event) {
    const word = event.currentTarget.dataset.item
    const reviews = wx.getStorageSync('reviews')
    wx.showModal({
      title: '温馨提示',
      content: '我已记牢，确定从复习词中删除？',
      complete: (res) => {
        if (res.confirm) {
          const filterList = reviews.filter(item => item.entry !== word.entry)
          this.setData({
            entriesList: filterList
          })
          //保存数据
          wx.setStorageSync('reviews', filterList)
          wx.showToast({
            title: '删除成功',
            icon: 'success'
          })
        }
      }
    })
  }



})