今天开始正式学习微信小程序，小程序有多火我也不说了，作为前端开发者，小程序也是必备技能。
由于我有vue的开发经验，已经多年的html+css开发经验，所以相对来说学习比较简单，看了一下b站的视频，就开始尝试开发起来，此小程序是以本网站即 shuanghei.com的手机版为原型来开发的，也算是小程序的入门项目，个人博客。
此系列文章，仅仅是记录下本人开发小程序的一些过程和心得，并非教学类文章，我会把我开发小程序的点点滴滴的过程，都一一记录下来，与大家分享。
一，创建项目
去官网申请appid，然后新建项目填入appid，不要勾选云开发，小程序会默认生成几个文件夹。
把app.js和app.wxss里面的内容清空，然后删除pages下的index文件夹，重新新建index文件夹，这样就是一个最干净的初始项目。
二，全局设置
打开app.json，进行简单的全局设置，backgroundTextStyle和navigationBarTextStyle是全局的背景色，只能是light和white，navigationBarTitleText是小程序的标题，我就用公众号一样的名字吧。
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "双黑in上海",
"navigationBarTextStyle": "white"
},pages对象里，新建3个page，主要是底部导航对应的page。
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/blog/blog",
"pages/about/about"
],可以看到，创建完这三个页面后，左侧pages文件夹里，会自动生成这三个page。
三，创建导航
接下去，创建底部导航，目前就先创建，首页、博客、关于三个页面吧，以后可以根据项目再补充。
这里的pagePath必须在之前的pages对象中存在，否则会报错。
"tabBar": {
"selectedColor":"#D81E06",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"/images/home.png",
"selectedIconPath":"/images/home-h.png"
},
{
"pagePath": "pages/blog/blog",
"text": "博客",
"iconPath":"/images/blog.png",
"selectedIconPath":"/images/blog-h.png"
},
{
"pagePath": "pages/about/about",
"text": "关于",
"iconPath":"/images/about.png",
"selectedIconPath":"/images/about-h.png"
}
]
},iconPath和selectedIconPath分别是未选中和选中状态下的icon，selectedColor选中状态下的文字颜色建议和selectedIconPath所指定的icon的图便一样。至于icon可以去https://www.iconfont.cn/免费下载。
在线就可以编辑不同的颜色的png图片，非常方便，如下图：
最后，然后预览一下，看看效果，有那么点感觉了？
