迷你计划演示地址：
我们将以零基础开发迷你程序，这次我们将学习迷你程序页面。
在上一篇文章中，我们分别介绍了列表，按钮和搜索框。现在，我们将其合并到迷你程序页面中。
如果您对Mini计划感兴趣，则可以关注官方帐户并订阅Mini ，以清楚地查看。
让我再次介绍Weui。对于不擅长UI设计的儿童鞋子，使用它们不仅可以提高您的效率，而且可以提高您的自信心。例如，如果我使用后端开发，我还可以使用WEUI开发非常漂亮的迷你程序。 Weui是一个基本的样式库，与微信的本地视觉体验一致。基本上，您不必花时间在样式上使用它。当然，如果您想从事前端工作，您仍然必须很好地学习WXSS。
豆片段通常是两页。一个是主页，另一个是文章页面。对于特定的页面外观，请扫描上面的迷你程序代码以查看它。如果您查看项目源代码，也可以在git地址查看它。主页布局如下：
让我首先说几句话。我从来没有仅仅为了我的个人理解，我从未学会过该系统的前端开发过程的知识。如果您想这样做，建议阅读专业书籍，参加培训课或专业学校。首先，确定我们用来显示内容，PC，平板电脑或手机的内容。对于我们来说，确定要制作的页面大小非常重要。这是一款手机迷你程序。请参阅官方迷你计划文档，并建议设计模板模型。我们知道这个大小是。然后，根据要添加的内容以及要提出的效果，专业人士将设计它。他们将指出各种因素，例如颜色，布局和内容，以将其设计成UI图。然后，前端专业人员将使用基于设计图的迷你程序语言实施它，并且开发的页面显示将是一致或与设计图相似的。我自己的迷你计划没有太多要求，只有实施想法，并且对美学和布局没有严格的要求。韦伊对我来说是完美的。
我将页面分为三个部分，红色框1放置了标题和简介，红色框2放置了搜索框和快捷方式按钮，红色框3放置了列表内容。我使用了WEUI的默认示例模板，可以修改背景颜色，字体大小等。查找WXML文件相应部分中使用的样式类，然后转到WXSS文件以重新定义它。此WXSS文件管理样式。
对于WXML源代码，请检查该项目，并在此处显示基本框架：
<view class="page"> <view class="page__hd"> <view class="page__title">Coder 加油view> <view class="page__desc">收藏了很多与编程开发相关的代码片段、开源库、RFC协议、知识点以及常用工具，是学习编程开发的好工具！view> view> <view class="page__bd page__bd_spacing"> view>view>
您现在需要做的是根据以前的内容填充它。如果是专业页面，您还需要仔细定义布局，尺寸和颜色样式。
以上是主页，文章页面更简单。我在这里使用插件。我将在下一部分中讨论它，该部分将文章内容从格式转换为WXML格式。让我们看看文章页面中如何定义WXML：
<view class="page"> <view class="loading" wx:if="{{isLoading}}"> <image class="loading__icon" src="../../images/loading.svg">image> view> <towxml nodes="{{article}}" />view>
非常简单，一个加载动画和一个插件。插件完成下载和渲染后，加载动画将被隐藏。
，只指导道路，而不是引导道路。以 Mini计划为例，我们介绍了迷你计划的各种知识点。有关更详细和深入的内容，您还需要检查官方的迷你程序文档。
以上就是关于豆子碎片小程序开源项目：零基础学习开发与WeUI样式库应用指南全部的内容，关注我们，带您了解更多相关内容。
