点击网址查看原视频
https://blog.csdn.net/shine_a/article/details/104770349?spm=1001.2014.3001.5502
一、项目介绍
先来看一下最后的效果，有三个页面：首页、记录、我的，
先在我的页面，点击登录按钮，登录进来，会展示用户的微信头像和微信昵称
接下来来到首页，点击加减按钮，记录页面会同步产生点击的日志。我们课程结束后，在手机上面运行的结果就是这样的
二、创建项目、云开发初始化、页面初始化
1、创建项目
接下来我们来创建项目，先来看看什么是云开发
可以理解为微信官方给我们的一个免费服务器，并且非常贴心的帮我们部署好了小程序的环境，将服务器的一些功能，比如数据库的增删改查都封装成了接口，我们操作数据库只需要调用他们封装好的接口就可以，非常的简单
创建云开发项目的话，需要先注册一个小程序账号
点击查看注册账号演示
我们登陆到小程序账号中，拿到小程序的唯一标识AppId，创建云开发项目必须要有AppID
接下来我们来到微信开发者工具中，创建一个新的小程序项目，不要选择云开发选项，会给我们创建许多我们用不到的模板。选择这个不使用云开发，然后我们自己去配置云开发环境
项目创建好了之后，点击云开发按钮，开通一下云开发功能
开通完成之后，我们会拿到云开发环境的id，这个id是唯一的，用来标识你的这个开发环境，后面我们会用到id
2、云开发初始化
（1）新建一个云开发的文件夹cloud
（2）在project.config.json文件中添加代码，指定云开发的文件为我们刚刚创建的cloud文件夹
"cloudfunctionRoot": "cloud/",
（3）再来到app.js文件中用下面的代码代替原先的代码
App({ onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力') } else { //env环境应该替换成自己的环境id //traceUser将用户访问记录到用户管理中，在控制台中可以看到访问用户的信息，我们一般将他设置为true wx.cloud.init({ env: 'test-59478a', traceUser: true }) } } })
保存了之后，这里cloud云开发文件后面的就会指定我们现在创建的test云开发环境，文件夹上面会有一个云的标志。
如果你保存文件之后，还是显示的未指定环境，那么可以关闭微信开发者工具，重新打开这个项目，应该就正常了
3、小程序页面初始化
（1）先处理pages文件，pages文件夹里面放这我们小程序的所有页面，我们需要三个页面，index首页、logs记录页面，还有me我的页面，我们创建一个me文件夹
在pages文件夹上面右键，选择新建目录，再在创建好的me文件夹上面右键，新建page
（2）再创建一个images目录，将准备好的图片粘贴进来，选中之后的图片以及未选中的图片
（3）接下来我们来到app.json文件中，先修改window对象中的导航栏颜色和导航栏标题
"navigationBarBackgroundColor": "#EA5149", "navigationBarTitleText": "猫宁一",
再来加上tab栏
"tabBar": { "list": [ { "pagePath": "pages/index/index", "iconPath": "image/binggan.png", "selectedIconPath": "image/binggan-active.png", "text": "首页" }, { "pagePath": "pages/logs/logs", "iconPath": "image/danhuang.png", "selectedIconPath": "image/danhuang-active.png", "text": "日志" }, { "pagePath": "pages/me/me", "iconPath": "image/huasheng.png", "selectedIconPath": "image/huasheng-active.png", "text": "我的" } ] },
现在页面基本上搭建完成了，来看一下效果
