接触小程序这十天，从看别人的开源项目到现在自己做一个项目，整个过程有起有落，我学到了很多接下来跟大家分享一下我的学习过程，一起交流，一起学习：选题是一个项目的开始，我们首先要做的就是选择一个主题，是否选择模仿一个项目或选择我们自己的原创一个项目必须面对选择一个主题。对于不同层次的学习者，主题的选择是不同的。对于我自己来说，我还是一个小程序新手，所以就谈谈我目前对选题的看法。作为新手，我更喜欢选择自己觉得容易上手的项目。比如先模仿一个开源项目，熟悉一些小程序的组件和API，也就是熟悉一些小程序的开发套路。不要为了做项目而做项目。你肯定知道做项目的目的是为了学习，还是为了完成老板的任务，又或者是为了更多的星星等等，这个我得自己去想。说了这么多，还没说我做了什么。我做的是模仿知乎。目的是通过本次学习，对小程序有更好的理解。本研究也是在前人的铺垫下进一步研究，从前辈那里学到了很多思路，感觉非常好。下面我将与大家分享我在整个项目编写过程中遇到的一些想法、问题和看法。项目实现了功能：列表渲染数据上拉刷新下拉加载更多页面跳转传递参数页面跳转按钮点击弹窗图片轮播顶部导航等以及上面的页面跳转评论功能是当前项目有的部分已经实现，其他功能后续会继续实现。该项目的初衷是在整个项目开始之前。我想过这个问题。我为什么要写这个项目？，编程技巧，编程思想，对小程序的熟悉程度等等，所以在写代码的时候，我用的比较多的是以前没有接触过的东西，比如commonJS中文件导入的方法，还有ES6中的modules，很多人可能不会理解为什么这样使用它，显然可以这样做。对于一个学习者来说，在一个项目中需要尽可能多地使用不同的方法，让自己知道有这样一个东西的存在，并学会掌握它，以方便在以后的项目中使用，这才体会到做这个项目的价值。也就是说，对于现在的我来说，方知乎这个项目的初衷就是想多学习一些自己没有接触过的东西，让自己对编程有更好的理解。项目介绍项目开始的时候，我首先想到的就是文件布局。一个完整的项目应该有一个合理的文件结构，需要模块化来增强项目的可读性，也更便于日后的运维。方便的。看自己的文件目录：上面是你项目的主目录，可以按照自己的想法分解，但是还是有很多问题，写的不是很好，很多的实现代码函数不单独使用。不同的文件分开写入一个文件，需要进一步优化。模块化是编程中一个非常重要的思想，可以很好的实现代码的复用性，节省一定的开发时间。最近在看前端工作流的一些东西。项目目录也分为开发目录和在线目录。通过babel、gulp、webpack等对开发文件进行一些处理也是一个很好的主意。我明白这一点。数量不多，还在学习中。可以在以后的项目开发中使用，增加自己企业级开发的实践。这也是大家可以学习的一个方向。在后台数据方面，数据在开发项目中必不可少。当前项目中的页面不再是静态页面。把数据写到si里是没有价值的，而且还增加了编程的工作量。非常冗长。这就需要模拟后台数据，可以实现数据的列表式渲染，减少很多工作量。这就产生了一个问题，后台数据怎么模拟，用什么来模拟数据。很多人会使用第三方提供者，比如使用easy-mock，通过wx.request()获取数据，实现页面加载数据，相信大家都会用到这种方法。如果我们在本地写假数据，应该用什么来写，如何获取数据，初学者应该不是很清楚（大佬除外）。这是我们可以学习和学习使用不同的方式做一件事的地方，就会达到做这个项目的目的。说到这里，数据应该放在js文件中。一般后台数据都是json格式的，放在js文件中是最合理的。这时候，问题又出现了。我们如何获取其中的数据呢？想到这里，就不知道怎么获取里面的数据了。看到前辈们都是用require()来获取数据的。想想这是什么。我没有足够的开发经验。如果我不知道这是什么，我会主动去了解它。这是什么？原来这是node.js中CommonJS中的模块实现。JS之前并没有很好的实现模块化编程。几乎所有代码都写在一个文件中。CommonJS的出现实现了JS的模块化。同时，我也知道ES6也有自己的模块化方式。用导入导出的方式实现模块化编程，感觉自己又学会了。我在自己的项目中使用这两种方式来获取数据：看上图，可以看到我在一个项目中两种方式都用过，贴出来的你可能看不懂，不用懂，现在去看看ES6中的CommonJS和Modular知识，你又会学到东西！！！有人会不明白，为什么要在本地写假数据？这不占用存储容量吗？为什么要使用两种模块化方法？一个有用吗？Project”，我想的更多的是通过这个项目我能学到什么。在这里我知道了两种模块化的方法，以后可以花更多的时间去学习这两种模块化的方法。这就是我想要的结果。在真正的项目开发，不要在本地放假数据，也不要同时用两种方法做一件事情。现在可以玩了，哈哈哈哈哈哈！！！引用第三方框架想必很多人都想过自己的项目是用第三方框架还是写原生代码，这个问题看自己的想法，我说说自己的看法，我现在接触前端的时间不长，而且很多东西不是很清楚，想自己写wxss的样式，对样式属性比较熟悉，其实第三方框架我也不是很会用，但还是要多用。“使用框架。在这个项目中，大部分的wxss文件都是我自己写的。后面一些功能的样式我也使用了第三方框架，比如weui，在小程序的UI框架中比较常用。这个很有用，微信团队开发的一个框架，提供了很多组件，可以减少很多开发时间。我的态度是，如果是学习的态度，我觉得还是自己写native代码提升更快。如果是实际开发项目，能用框架就用框架，不要自己造轮子。项目主要功能实现过程中的思考小程序开发模式与我们传统的开发模式有很大的不同。在传统开发中，我们通常使用dom操作来动态改变页面。我的感觉是一种寻找的方式。使用DOM操作，找到一个元素，然后改变元素的行为，从而改变页面的状态，而小程序的开发模式是MVVM，数据绑定页面，数据的改变使得页面的状态改变，这种传统的发展是非常不同的。小程序开发很容易踩坑。我在这个项目中踩过这个坑。我必须了解MVVM模型。1.按钮点击弹出事件屏蔽此问题举报varutil=require('../../utils/ut伊尔.js');constapp=getApp();Page({//页面初始数据data:{//数据源feed:[],//更多按钮触发弹窗showModalStatus:false,},//弹窗触发事件powerDrawer:function(e){//获取数据源letfeed=this.data.feed;//获取点击按钮时设置的数据值data-answerIdletanswer_id=e.currentTarget.dataset.answerid;//获取数据值data-statu单击按钮时设置letcurrentStatu=e.currentTarget.dataset.statu;//遍历数据源for(letkeyoffeed){if(key.answer_id===answer_id){key.isSelected=true;}}this.setData({feed:feed,});//弹窗this.util(currentStatu);}})//数据源模板varnext={"data":[{"topic":"Education","answer_id":1,...},{"topic":"Education","answer_id":2,...},{...},...]}上面是点击按钮窗口事件的主要代码，因为列表是类型数据渲染，基础页面的布局只写一个，通过js中的数据绑定，可以将数据源中的所有数据导入到页面中，可以减少很多工作量，现分享给大家你。写这个触发事件遇到的问题，看下图就知道问题出在哪里了：看到图就知道问题了，单独点击一个，其他的框也会触发pop-upwindowevent,listrenderingData很容易遇到问题，遇到的坑，为什么会出现这种问题，原因很简单，因为我们在写页面布局的时候，使用了dynamic填充数据，只写了一个基本样式，每个数据都有一个bindtap触发事件。起初，我遇到了这个问题。我的思路是，数据源中的数据写在一个数组中，每个数据都有自己的固定。“answer_id”，然后我在触发弹窗的时候填了一个数据data-answerId="{{item.answer_id}}"，设置的值也是answer_id，所以想找每个的IDdata通过搜索answer_id与触发按钮时的数据集进行比较。如果值相同，则弹出自己的窗口。然而，问题并没有解决。下面是最初设计的代码：这个是通过查找来解决问题的。原因是你每次查的值和你触发时设置的值是一样的，所以解决不了问题。这种方式还停留在传统的开发设计中，比如dom操作，不断的查找，找到一个值，然后改变它。在小程序中单纯使用这种方法很难解决问题。其实只要正确理解MVVM模型，这个问题就可以很好的解决。数据绑定页面和数据修改页面的状态。解决这个问题的方法是给每个数据加上一个布尔值。当触发自身的按钮事件时，其布尔值为true，其他数据的布尔值为false。将操作绑定在一起以解决问题。2.评论功能评论{{item.feed_source_name}}{{item.content}}点赞{{item.good_num}}<text>回复{{item.comment_num}}{{item.time}}发布varutil=require('../../utils/util.js');letmyComment='';Page({data:{comment:[],content:"",},onTextChanged:function(e){//获取文本框的值，即输入评论的内容myComment=e.detail.value;},onSendClicked:函数（e）{//获取触发时设置数据的值letquestion_id=e.target.dataset.questionid;varthat=this,conArr=[];//定时器，100ms后触发setTimeout(function(){//设置评论的基础信息存储在数组中if(myComment.length>0){conArr.push({"feed_source_img":"../../images/icon9.jpeg","feed_source_name":"zero","time":util.formatTime(newDate()),"good_num":"0","comment_num":"0","content"":myComment})//从数据源获取评论页面的所有数据varfeed=util.getData2();letcomment_data=feed.comment;//找到指定页面的评论数据constcomment=comment_data.filter((comment)=>{returnquestion_id==comment.question_id;})//待添加评论的基本信息数组conArr合并到数据源中的评论数据数组comment[0].ordinaryCommentvarcommentContent=评论[0].ordinaryComment.concat(conArr);//将新添加的conArr数组放在source数组的首位，这样触发评论时，评论内容会出现在页面的第一列。varnewCommentContent=commentContent.reverse();varnewComment=评论[0];评论[0].ordinaryComment=newCommentContent;that.setData({comment:comment,content:""})}},100)},})以上是评论功能的主要代码。实现这个功能，主要要解决的问题是找到指定问题的评论页，可以通过Array.filter()方法找到，然后要解决的问题就是在评论中添加填充的评论信息[0].ordinaryComment数据源中的评论数据数组，通过Array.concat()方法可以实现。最后将新的数据显示在页面上，并更新页面的状态。还有一个地方需要注意：如何在评论栏第一列Array中显示输入的评论信息。reverse()可以解决这个问题，从而更好的实现这个功能。3.其他功能总结比如比较常用的功能还有首页顶部的tab切换，可以使用swiper-item组件和bindtap进行事件绑定，可以实现这种tab切换效果，滚动-view组件可用于下拉刷新。组件提供了很多属性来实现很多功能，基本的弹窗功能组件有wx.showToast()、wx.showActionSheet(OBJECT)、wx.showModal(OBJECT)等，这些组件可以从官方文档中学习并学习使用基本组件。相关文档和工具Applet开发文档学习使用开发文档，多看开发文档，熟悉组件，避免不必要的麻烦提供commonJS学习比较强的模块化学习ES6模块化属于自己的模块化开发iconfont@font-face学习使用CSS3font-size属性页面图片不再是png格式，值得学习weui学习使用第三方框架，小程序需要学习weui小程序开发者工具小程序开发工具学完学了很多不错，我要知道做这个项目的目的是什么。我这个项目的目的是学习。我知道自己缺少什么，需要加强什么。在整个项目完成的过程中，我其实感受到了自己的功利主义，希望自己能快点完成这个项目。这在学习过程中是非常糟糕的。忘记了自己做项目的初衷。作为一个学习者，我们应该多想想这个项目能给我们带来什么。通过行动能给自己带来什么样的帮助？我们应该为自己实现这个项目的最大利益。好吧，我不管了，我要本着初心学习，做一个有思想的程序员！！！！！最后附上本项目的github地址和个人联系方式，大家可以一起交流学习，共同进步。项目地址：https://github.com/DengSongso...个人邮箱：DengSongsong1010@163.comwx:dss1000010文章和项目都不错，欢迎star，谢谢大家！！！
