很多新手都喜欢自己完成项目。从项目规划、建设，到实施、调试、验收，全程由自己完成。当然，这对提高他们的整体发展和适应能力很有帮助。好了，废话不多说，下面开始介绍小白如何快速完成一个微信小程序。喜马拉雅App比较大，这里只完成了一些重要的功能。..本文将喜马拉雅电台App的栗子，做成了一个微信小程序。从本文中你可以得到以下技能点：如何为项目选择合适的工具如何快速分析项目功能并形成列表如何快速完成并构建一个页面并提供良好的接口以供复用如何处理短时间内解决不了的问题如何规划好每天的工作量，调整好工作心态提前准备好工具很重要，当然也很简单。..编辑器（我用的是vscode）：@VisualStudioCode微信web开发工具下载：@微信web开发工具笔记（我用的是有道云）：@有道云笔记github（每天提交）：@githubmarkman（基础页面样式注解，大公司有专门的ps设计师，这里会一点）：markManiconfont（阿里巴巴字体图标库）：@iconfontweui（本项目微信风格框架/css纯手写，初学者推荐纯手写，实在不行编写一些框架可以使用的样式）：@WEUI项目分析列表在这个例子中，我们只分析一个小模块：基础页面及其简单功能。首先，前提是HimalayaRadio是一款音频分享和有声读物的app。由于微信小程序2M的限制，我们的模块不能太大，功能不能完整，所以需要适当减少一些功能--->>减少功能。那么，由于人、时间、精力有限（单人完成），我们需要一个系统的流程来保证项目的顺利实施--->>资源控制。项目改进空间和后续维护提供了良好的接口--->>易于维护和升级。页面模块流式分类页面喜马拉雅APP分类页面原图：思路：该页面使用了两个模块，顶部固定搜索栏和滑动内容区。两个模块都可以使用绝对定位，搜索栏弹性布局，滑动项有分类、推荐、精品、直播、播报。分类模块最近浏览：flex布局，固定位置，最近浏览数据动态变化，初始隐藏置顶推荐：固定数据，固定图片娱乐，知识，生活，同功能布局，flex布局，使用wx:for循环，降低耦合和increasing可重复使用的滑动器旋转木马水平无缝滑动。详细说明：1.整个页面的滚动条优化::-webkit-scrollbar{width:0;height:0;color:transparent;}2.所有文字不能贴边页面{width:100vh;height:100vh;overflow:hidden;background-color:#f8f8f8;padding:020rpx;}3.图标采用统一样式，增加class提供color改变颜色，提高复用性、维护性、可读性--（不过我这里用的是图片，一开始想用图标，但是微信引用不能引用http，因为页面是静态的，所以可以用图片）。iconfont{width:45rpx;height:45rpx;overflow:hidden;display:inline-block;color:#fff;}.iconfont-enjoy{color:#xxx;}//自定义颜色.iconfont-knowl{color:#xx;}//customcolor.iconfont-knowl{color:#xx;}//自定义颜色4,font:simplescriptfont,smoothanti-aliasing,font-family:"lucidagrande","lucidasansunicode",lucida,helvetica,"HiraginoSansGB","微软雅黑","文泉驿微黑",sans-serif;-webkit-font-smoothing:subpixel-antialiase;5.swiper-item...BalabalaMarkManDesigner：小程序最终效果图：由于选中页面的页面太多，我们不会展示太多不重要的过程。如果想了解更多，可以直接进入app查看原图详情。如果需要，可以在不修改html的情况下动态修改knee数据库中的数据。{{item.title}}2.为所有文本留出足够的空间，如果没有足够的空间：overflow:hidden;white-space:nowrap;text-overflow:ellipsis;3。所有图片均预留位置，优化边框，预留小图标。如果需要直接引用类或者添加模块，当然可以在使用vue模板模块时直接封装。.FineQuality-icon{width:18rpx;height:18rpx;position:absolute;left:-35rpx;top:5rpx;transform:rotate(-45deg);}.FineQualityBac{width:0;height:0;border-left:40rpxsolid#ff4612;border-bottom:40rpxsolidtransparent;position:absolute;left:0;top:10rpx;}4.所有循环都用块标签包裹，方便测试和维护。5、各模块之间无直接连接，便于解耦。6、半像素问题：.xxx:after{content:'';position:absolute;width:200%;height:200%;border:1pxsolid#888;top:1px;left:-1px;-webkit-transform-origin:00;-moz-transform-origin:00;-ms-transform-origin:00;-o-transform-origin:00;transform-origin:00;-webkit-transform:scale(0.5,0.5);-ms-transform:scale(0.5,0.5);-o-transform:scale(0.5,0.5);transform:scale(0.5,0.5);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}7.以数据为中心的微信小程序缺陷：css的用户体验不是很好，看图解释。原图：小程序：有没有发现什么？是的，底线的滑动方式不同。在应用程序中，当你稍微滑动时，导航的底线会滚动。可以看出是同时发生的，而在app中的微信小程序中，由于是以数据为中心的，直接设置slide的效果就是添加一个数据关联current绑定bindChange事件，但是中间的过渡无法实现。当然，实现它也不是不可能。自己用外挂的swiper插件会增加你的代码量和复杂度很多，而且微信直接把各种css选择器禁用了，还得加很多类，哎。。麻烦后期优化空间：如果图片区域不是加载成功，可以显示背景图片，用js控制每张图片的加载。如果加载不成功，将显示未显示的图像或图标。页面摘要页面的其余部分是一个基本结构和一堆模块加js交互的组合。快速完成一个复杂的页面只需要三个步骤：绘制基本结构、添加功能模块、js交互。1、绘制基本结构：拿到设计稿，第一步就是看页面的基本结构。这个时候，细节并不重要。查看整体结构，添加合适的类命名格式，可以为内部模块提供合理的类命名格式。避免类混淆和页面样式混淆。维护css样式比较麻烦，必须标注。在大模块中，必须标明。css、html、js，都需要标注具体的功能提示。如有必要，您可以绘制树状图。我觉得图可以把所有复杂繁琐的事情分解成一个个小步骤，而树状图是最直观的体现。微信小程序的种种限制阻碍了小程序的发展前景，css多选器、最大容量、用户权限、以数据为中心的缺陷……以前一直认为微信处于劣势。可见，小程序非常受欢迎，完成速度快、功能简单、开发成本低等优点使其在近几年大受欢迎。既然如此，为什么不减少限制，增加功能呢？？真的吗？？当然，我之前接触的不多，也不懂太多的原理。经济学，经济学和金融学太高深了，但现在也很模糊，涉及得太深了。有兴趣的可以看看文章：微信小程序，大多数人容易被误解的8个问题在写这个小程序的时候，我觉得最大的感悟就是页面的css重构和html页面结构的设计。他们都有一个共同点，那就是都有自己的想法。做之前得先在脑海里画个图，然后用积木叠起来。堆栈中会有一些共同点。您可以选择合并样式或拆分样式。这些都是经过深思熟虑后完成的。想想盖房子吧。一般没有那么多切图，只会从上到下直接打字。这是最费时费力的，真心不推荐。当然，学无止境，要学的东西还有很多。技术是一方面，沟通更重要。这里不做任何建议，大家自己体会吧。。。最后说说jsc++。我看不起java，java看不起python，python看不起js，js看不起php，php是最好的语言……所以，还是学php吧！！！咳咳，开玩笑的，别介意。怎么说呢，js其实在我看来并不难，可能我学的不是很深，但是至少我觉得js不是很烂。我想是这样。首先，js是一个工具。如果我要实现某个功能，比如数据的懒加载，先完成懒加载实现功能，然后封装代码防止污染，再扩展功能添加错误处理解决预置处理参数问题，然后提供用户界面，最后多次测试推送提交。如果有时间，我可能会尝试完成架构，并在用户使用和功能模块之间提供一个或多个过度嫁接。这是非常耗时的。有兴趣的朋友可以私信我。毕竟只是接触，一起学习而已。好了，最后献上我的源码，欢迎使用。
