Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >基于mpvue开发微信小程序(项目已开源)

基于mpvue开发微信小程序(项目已开源)

原创
作者头像
杭州前端工程师
发布于 2018-05-12 03:33:22
发布于 2018-05-12 03:33:22
3.4K00
代码可运行
举报
文章被收录于专栏:前端大白专栏前端大白专栏
运行总次数:0
代码可运行

花了两周时间,我的微信小程序终于开发完了(平时上班,基本上都是业余时间开发的). 下面来介绍一下项目的功能以及结构. 用到的技术栈 vue2+weui+es6;要看项目 记得切换到dev分支上; 这是一款辅助记忆单词的微信小程序,项目调用了百度翻译api,这样可以获取百度翻译的数据.

项目目录

build为相关配置; config为开发相关配置文件; dist为打包文件; src为所写的js文件了: 这里面 assets为静态文件; components为组件; models为状态管理(这个项目没有用到model); pages为所写的页面; service与utils为自己的工具(习惯这样了)

加单词页面: pages => myIndex

这个页面可以添加单词,由于没有后端服务器,所以所有的单词都是保存到localstorage,下方是代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  submit(e) {
    if(!e.target.value){
      return
    }
    // wx.removeStorage('words');
    let array = PubliceService.getStoreage('words') || [];
    let value = e.target.value;
    let valueObj = value ? {[value.word]: value.explain}:{};
    for (let i = 0; i < array.length; i++) {
      if(array[i][value.word]){
        PubliceService.openConfirm({title: '单词有重复', content: '您输入的单词已存在列表中,是否替换?'}, () => {
          array[i][value.word] = value.explain;
          PubliceService.setStoreage('words', PubliceService.transformArrayData(array,false,true));
          this.inputValue = '';
          this.textareaValue = '';
        });
        return;
      }
    } // 判断所提交的单词是否有重复,如果有重复则提醒用户是否替换,有重复的话,直接给更新,然后终止 不继续往下走了;
    array.push(valueObj);
    this.inputValue = '';
    this.textareaValue = '';
    this.$forceUpdate();// 强制刷新页面
    wx.showToast({
      title:'新增成功',
      icon:'success',
      duation:1500
    });
    PubliceService.setStoreage('words', PubliceService.transformArrayData(array,false,true)) // 给这个数组对象加一个id
    bus.$emit('addHandle');
  };
 以上是首页的功能;

个人中心页面:pages=>my

这个相对简单,获取用户信息,然后根据在localstorage里的数组长度给它一个等级,等级规则定义在config里; 在mounted的函数里直接定义这个方法就可以;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  initPage(){
    let array = PubliceService.getStoreage('words');
    console.log(array);
    this.wordTotal = array.length;
    this.degree = PubliceService.returnDegree(this.wordTotal);
  }

单词列表页面 pages=>wordlist

然后就是最后的单词列表页面,花的时间相对来说多一些,因为涉及到了删除,编辑以及简单的修改数据的功能:

这里点击编辑会跳到编辑单词页面:

这个页面和首页很像,讲道理是可以复用的,没太多时间去弄这个. 就简单复用了一些组件,函数没的复用. 以下是我编辑函数保存时候的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  submit(e){
    // wx.removeStorage('words');
    let array = PubliceService.getStoreage('words') || [];
    let value = e.target.value;
    console.log(array,value);
    for(let i = 0;i<array.length;i++){
      for(let key in array[i]){
        if(key === value.word && key !== 'key'){
          array[i][value.word] = value.explain;
          console.log(array);
          wx.showToast({
            title:'更新成功',
            icon:'success',
            duation:1500
          });
          PubliceService.setStoreage('words',array);
          PubliceService.debounceLog(500,()=>{wx.navigateBack({delta:1})});

          return
        }
      }
    }
    let obj = {[value.word]:value.explain,key:array.length};
    array.push(obj);
    wx.showToast({
      title:'新增成功',
      icon:'success',
      duation:1500
    });
    PubliceService.debounceLog(500,()=>{wx.navigateBack({delta:1})});
    PubliceService.setStoreage('words',array);
    console.log(array)

  }

这里说明一下 用了双层循环的原因,因为当初在最开始写的时候需要做判断这里面是不是有重复的单词,然后当时为了图简单,直接把数据结构写成这样: [{test:'测试',key:0},{word:'单词',key:1}],只能说这样判断是否有重复是简单了很多,但是在我拿英文单词的时候就得for in循环了,列表上循环也是这样的,只能说没时间去弄了,既然写了就写了吧! 删除功能是通过es6的filter过滤的,这个时候之前在添加单词的key值就用上了.

由于是第一次用vue写东西,很多vue的基本知识都不是特别的扎实,各位老铁看了如果哪有问题,请一定及时帮我指出,最好能提一些建议,互相成长. 码云地址:https://gitee.com/kaykie/miniprogress

如果这个微信小程序对你有帮助的话,请一定给我一个星星,下一个个人微信小程序项目我会用vuex来写,希望能得到各位的支持,给点动力吧!

总结

我的本命框架是react,公司也是用的react来开发项目的(技术栈为react+redux-sage+antd+rn+react-router),刚开始从react转到vue做开发,还是有一些不习惯的,很多语法糖都不一样,我也是一边摸索一边写这个小程序,像项目中用到的bus,不同组件之前的通信,之前用react因为用的都是redux,所以相对来说还是新奇的.当然也有遇到过一些坑,我在我自己的博客上也有提及,这个坑自己在react开发中也是经常遇到过的,后来随着对vue越来越熟悉,发现也没有开始想像的那么难,当然了页面中还没有用到filter以及director;在下一个项目中我也要尝试的用一下.

另外不得不说,感谢美团对开源社区的贡献. 感谢star!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
hutool官网(hutool好用吗)
看本篇文章前,建议先对java源码的日期和时间有一定的了解,如果不了解的话,可以先看这篇文章:
全栈程序员站长
2022/07/28
18.6K0
hutool官网(hutool好用吗)
Hutool工具包-常用开发工具类(让代码更简洁)
Java微观世界
2025/01/20
6450
Hutool工具包-常用开发工具类(让代码更简洁)
带你认识Hutool工具包
Hutool 是一个小而全的 Java 工具类库,通过静态方法封装,降低相关 API 的学习成本,提高工作效率,使 Java 拥有函数式语言般的优雅,让 Java 语言也可以 “甜甜的”。
程序员Leo
2023/08/07
1K0
带你认识Hutool工具包
4hutool实战:DateUtil-格式化时间[通俗易懂]
java的SimpleDateFormat线程不安全出问题了,虚竹教你多种解决方案(万字长文*建议收藏)
全栈程序员站长
2022/07/01
4.3K0
一文带你入坑JDK8的新日期时间类 LocalDate、LocalTime、LocalDateTime
参考 https://blog.csdn.net/duan196_118/article/details/111597682 https://blog.csdn.net/qq_24754061/article/details/95500209 https://xijia.blog.csdn.net/article/details/106007147
时间静止不是简史
2023/02/23
5.2K0
一文带你入坑JDK8的新日期时间类 LocalDate、LocalTime、LocalDateTime
LocalDateTime、Date时间工具类
参考:Date、LocalTime、LocalDate、LocalDate-时间操作工具类_Hatsune_Miku_的博客-CSDN博客
CBeann
2023/12/25
3760
java最全最常用的日期工具类(随时补充)
@Slf4j public final class DateUtils { private DateUtils() { } private static final String FORMAT_YYYYMMDDHHMMSS = "yyyy-MM-dd HH:mm:ss"; public static final String FORMAT_YYYY_MM_DD = "yyyy-MM-dd"; public static final String FORMAT_
疯狂的KK
2023/04/10
1.3K0
日期工具类-操作字符串和Date、LocalDate互转,两个日期的时间差等
避免重复造轮子,相关方法基于hutool日期时间工具封装并做部分增强。需要先引入如下坐标
共饮一杯无
2022/11/28
1.4K0
【最爽的日期工具包LocalDate·超爽,超实用】(Java8版本)
需要的包: import java.time.DayOfWeek; import java.time.LocalDate; import java.time.LocalDateTime; import java.time.LocalTime; import java.time.format.DateTimeFormatter; import java.time.temporal.ChronoUnit; import java.time.temporal.TemporalAccessor; import j
红目香薰
2022/11/28
7250
JDK8中新的日期时间工具类真的很好用,还不清楚的快进来看看吧,建议收藏
  最近刚好有空给大家整理下JDK8的特性,这个在实际开发中的作用也是越来越重了,本文重点讲解下新的日期时间API。
用户4919348
2021/06/11
1.7K0
Scrapy笔记三 自动多网页爬取-本wordpress博客所有文章
学习自http://blog.csdn.net/u012150179/article/details/34486677
十四君
2019/11/27
8620
有了它,Java语法也可以变得甜甜的
Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,提高工作效率,使Java拥有函数式语言般的优雅,让Java语言也可以“甜甜的”。
wangweijun
2020/02/14
1.2K0
APP热搜榜接口提供 --- 百度
目的地-Destination
2024/08/07
2991
APP热搜榜接口提供 --- 百度
JDK8时间工具类
JDK8添加了java.time包,提供了很多方便。 用得比较多的几个类: Instant 在时间线上模拟单个瞬时点 Duration 以秒和纳秒为单位模拟一个数量或时间量。可以使用其他基于持续时间的单位访问它,例如分钟和小时 LocalDate 表示ISO-8601日历系统中没有时区的日期,例如 2019-03-31 LocalTime 表示ISO-8601日历系统中没有时区的时间,例如 16:50:30 LocalDateTime 表示ISO-8601日历系统中没有时区的日期时间,例如 2019-03-31T10:15:30 其中一些方法使用如下:
GreizLiao
2019/09/29
9470
【Java 基础篇】Java Date 类详解:日期和时间操作的利器
在 Java 编程中,处理日期和时间是一项常见但复杂的任务。Java 提供了许多用于日期和时间操作的类,其中 java.util.Date 类是最早的日期和时间类之一。然而,它存在一些问题,因此 Java 8 引入了 java.time 包,其中包含了 java.time.LocalDate、java.time.LocalTime 和 java.time.LocalDateTime 等新的日期时间类。这些新类提供了更多的功能和更好的可读性,使日期和时间处理变得更加方便。本篇博客将详细介绍 Java 中的 java.time 包,重点关注 LocalDate、LocalTime 和 LocalDateTime 类的使用。
繁依Fanyi
2023/10/12
1.5K0
【Java 基础篇】Java Date 类详解:日期和时间操作的利器
手机移动端日期时间控件lcalenda
http://618cj.com/2017/01/16/%E6%89%8B%E6%9C%BA%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%97%A5%E6%9C%9F%E6%97%B6%E9%97%B4%E6%8E%A7%E4%BB%B6lcalenda/
全栈程序员站长
2022/08/31
2K0
对接声网rtc-restful-api
阿超
2023/11/18
2430
求求你了,不要再自己实现这些逻辑了,开源工具类不香吗?
最近公司来了一批实习生,小黑哥负责带一个。这位小师弟说实话,基本功很扎实,做事也非常靠谱,深得小黑哥真传。
andyxh
2020/05/19
9960
探索java中的hutools工具库
Hutools是一个Java工具库,提供了丰富的工具模块,可以帮助开发人员简化日常开发任务,并提高工作效率。下面是一些在工作中常用的Hutools工具模块,会用到一些时间处理。或者一些ID生成。获得一些字符判断等非常常用的一些工具类。Hutools都做了一个非常漂亮的简化处理。也是新手值得非常学习的编码工具类
查拉图斯特拉说
2024/01/22
1.1K2
Java8时间方法LocalDate和LocalDateTime工具类
目的地-Destination
2023/10/12
5640
推荐阅读
相关推荐
hutool官网(hutool好用吗)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验