微信小程序云开发商城项目日记 01

从今天开始，我们就要动手从零做一个基于微信小程序云开发的商城项目喽~

这个项目非常适合那些懂一点web前端基础的同学学习，收货会很大！零基础的同学也可以试着做一下，我的代码会给的很详尽，讲解的也会很透彻，实在不明白的可以加我的联系方式找我。还有我的公众号，等我最后一期做完之后，我会把源码放到我的公众号里，大家也可以关注一下，我比较懒，之前公众号更新的不多，以后会经常更新干货的，因为我本身是打算做前端的，所以内容基本都会和前端有关，包括一些前端技术栈的学习心得、面试刷题、优秀的工具插件、职业规划等等。所以，还是关注一下喽~~~

因为我本身也比较菜，如果在项目的编写中有错误，或者有更好的处理方式，欢迎各位大佬指教。

在敲代码之前，我们需要有两样东西，一个appid，一个编辑器。然后就可以沐浴更衣，感受代码的神圣了~~~

编辑器下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
小程序账号注册地址：https://mp.weixin.qq.com/

首先新建一个项目，正确的填写项目路径和appid，并且选择云开发选项，然后进入编辑器内，你会看到一些预置的文件，把没用的都删一删，最后的项目目录是这样的。

可能有些童鞋还不知道云开发是什么，所以我打算把项目的前后端分离讲解，先把所有的前端页面都写完，然后再写后端云开发的东西。所以在这里，就先不配置云开发的东西。

然后我们就要开始设置tabbar了，先进入app.json，注册几个页面。
我的设计是，有四个tabbar页，分别是首页、分类、购物车、个人中心。
我们保留的这个pages文件夹里的index就作为首页，另外创建三个pages,名字随便起，最好是简明致意。

然后配置一下tabbar，也就是底部导航栏。我们应该准备好8个图片，分别是初始状态的各个tabbar页的logo，还有被选中的logo。

在这里推荐一个网站，iconfont阿里巴巴矢量图库，里面的logo非常的齐全，任意搜索下载喜欢的logo，放到images文件夹即可，注意改掉图片的名字，最好不要出现中文，虽然在本地调试没问题，但是名字有中文的图片上线之后是不会显示出来的。

我就找了一些比较普通的

然后写tabbar的代码

看一下效果：

基本没有问题，我们还可以设置tabbar的背景色，字体颜色等，在这里我们暂时不修改，有需要的可以查看官方文档。

然后我们看一下app.json里另一个比较重要的属性，window

这个东西其实也是配置一下顶部导航栏的样式，我们暂时不需要修改别的，只改一下顶部导航栏的字和背景色就行，如果英文比较好的同学应该可以看的出来，navigationBarTitleText这个属性就是用来修改导航栏的字的，navigationBarBackgroundColor是用来修改背景色的，要想生活过得去，生活必须带点绿，我们就拿绿色来当做主题色，#008000

没有问题。
第一天的内容差不多就要结束了，今天没有讲解任何关于代码的东西，只是处理了一下新建的项目的目录结构，并且修改了一些全局样式，明天我们就正式开始编写商城的前端代码喽~

点赞、关注、收藏都是对作者莫大的鼓励，谢谢！

有任何问题可以联系QQ：505417246

零基础入门微信小程序云开发QQ群：1073011570

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs等实战学习资料