让别人的小程序长成自己的样子-更换window上下颜色--【浅入深出系列001】

微信目录集链接在此：

详细解析黑马微信小程序视频–【思维导图知识范围】	难度★✰✰✰✰

本系列校训

用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！
只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序（130集）
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下：
…
P303-微信小程序的环境准备08:21 00:00 到 05：16 获取APPid, 后面下载开发工具。

小程序的界面

小程序设计宗旨：
微信小程序已经成为了我们生活中不可或缺的一部分，而对于一个成功的小程序来说，一个吸引人的界面设计也是非常重要的。

那么，如何设计出吸引人的小程序界面呢？以下是几个设计技巧供您参考：
1.简洁明了的界面
在界面设计上，简洁明了是最基本的要求。不妨在设计时采用极简主义风格，理清页面结构，去掉冗余的信息和过多的功能。
2.凸显核心内容
准确把握小程序的核心内容，利用色彩、排版等方式突出显示，以提升用户的关注度和效果。
3.优化用户体验
在小程序设计中，用户体验至关重要，要尽量减少页面跳转和等待时间。同时，在用户使用小程序时，应让交互过程尽可能自然流畅。
4.充分利用微信生态
在小程序设计中，我们可以充分利用微信生态，调用微信提供的开放接口、社交功能、地理位置等开发资源，以提高小程序的互动性和趣味性。
5.细节体现品质
小程序设计中，细节决定品质。可以采用巧妙的设计手法，为用户呈现一个美观、优质的小程序。

以上是几个设计技巧，希望能够帮助您在小程序设计中做得更出色。
让我们来看几个设计的出色的小程序。

小程序的界面分类

小程序最大的特点就是不用下载，即用即走，让用户使用更加简单便捷。小程序界面设计也是如此，要以降低用户学习成本为第一要素，一些常用的界面板式就成了小程序界面设计的首选。下面，蓝橙视觉就给大家分享一些常见的界面板式，为大家提供一个参考。
1、手风琴式
手风琴布局常见于两级结构的内容。用户点击分类可展开显示二级内容，在不用的时候，内容是隐藏的。因此它可承载比较多的信息，同时保持界面简洁。手风琴可以减少界面跳转，与树形结构相比，手风琴减少点击次数，提高操作效率。手风琴在浏览器上很常见，很多浏览器的导航历史、下载管理等页面均采用了手风琴的设计。
2、标签式
标签式布局也叫网格式布局，一般承载较为重要的功能，由于标签式的设计较有仪式感，所以视觉上层级很好，一般用于展示较多的快捷重要入口，且各模块相对独立。标签式布局的优点是各入口展示清晰，方便快速查找。缺点是扩展性较差，标题不易过长，并且非重要层级的功能，或者不可点击的纯介绍类元素，不适用于标签式设计。
3、列表式
列表式布局是移动端应用小屏幕的限制下最常见的版式形式尤其适用于文字较长的信息组合，列表式的布局优点是信息展示较为直观，节省页面空间，浏览效率高，字段长度不受限制可以错行显示。缺点是单一的列表页容易视觉疲劳，需要穿插其他版式形式让画面有些变化，并且不适用于信息层级过多并且字段内容不确定的情况，这种情况仅仅通过分割线或者间距的区分容易让用户出现视觉误差。
4、瀑布流式
让一个页面内卡片的大小不一致，产生错落的视觉效果就是瀑布流设计，移动端的瀑布流一般是两列信息并行，可以极大的节省交互效率，并且可以用来制造“丰富/华丽/眼花缭乱”的体验，适用于图片、视频等“浏览型”内容，例如电商或者小视频类应用。

以上就是本次为大家分享的界面设计板式，在各大平台的小程序、或是各大品牌的APP中，都能找到与之相对应的界面设计案例，足以说明这四种界面板式的泛用性与实用性，只要展示需求与之契合，即可直接采用。

学习第一步（打开小程序项目）

这里要确认的是目录层次（小程序的首页）参见《微信小程序的目录解析–【浅入深出系列002】》
第一步是什么，准备好的工具（电脑），开发工具之后，当然是打开一个项目！不是new，直接open别人家的漂亮项目不香么？
这里看得出来，你的学习需要两个设备，一个是电脑（安装了微信开发者工具），另一个是手机（安装了微信）。
如果是这样，那就”项目“->”导入项目“ 后面就会出现图2
当然了，也有可能是这样

图2： 打开项目
点击 “+”号。

图2： 打开项目界面。
然后在图2 中 目录里选中 本文的资源。要注意的是选中的目录中要是主目录。

图3： 一个微信小程序的目录主目录样子
然后使用测试号。

图4： 打开微信小程序界面填好信息
点击新建就行了。

小程序开发者平台

终于看到了漂亮的小程序界面，
小程序的开发者工具，主要就分为三个大可视区，
”模拟器“,“编辑器”，“调试器” 他们都可以用上面的按钮进行切换。

电脑配置差一些的就多等一会，（受硬件及网络影响）

动手实践

发现目标

打开之后，默认情况下，”模拟器“,“编辑器”，“调试器”这三个绿色的大按钮是“亮的”，你也可以点一下，看看灰了之后是什么样子。
找到“编辑器”里的“资源管理器”，找到app.json文件。单击打开，
找开 “window” ,“tabBar” 两段

开始动手

将windows块改成

"window": {
    "navigationBarBackgroundColor": "#39b54a",
    "navigationBarTitleText": "shop",    
    "navigationBarTextStyle": "white"
  },

将tabBar块改成

"tabBar": {
    "color": "#aaaaaa",
    "borderStyle": "white",
    "backgroundColor": "#39b54a",
    "selectedColor": "#F95A5F",
    ...(略)

最后如图：

图7：改好代码之后的样子

检查效果

一般来说，window与tabBar对人的眼睛冲击最大。修改起来也是最简单。
可以说，不需要任何的电脑编程知识（当然，你还是要会键盘鼠标等操作，学习不是抬杠）

配套资源

让别人的小程序长成自己的样子–【浅入深出系列001】配套资源