微信小程序有类似于wx.showToast,wx.showModal等的默认弹窗，但是样式较少，实现不了我们的需求，所以我们这节来自己写一个登录弹窗。还是继续编辑pages/index/index.vue文件1、效果展示这节我们先来看一下弹窗的效果是啥样的2、添加自定义弹窗（1）编辑pages/index/index.vue文件部分的样式代码这部分的样式是自定义弹窗的样式，将这些样式代码添加到st

真自律是一款自律神器，将分数作为奖励惩罚手段，提醒对良好行为的关注和强化。将生活想象成通关打怪，打败自己的心魔加分，被心魔打败减分。1、授权登录第一次登录小程序，会出现授权登录的页面，之后登陆不再出现2、首页◉加减分数：每次点击加减按钮，都会生成一条记录，显示在记录页面。◉清零功能：会将当前分数设为0，历史记录不会被清空。◉撤销功能：撤销上一步的操作，同时对应操作的记录也会删除3、记录页面◉回到记

目前，我们在首页实现了点击+1、+5、-1、-5的按钮，总分会发生变化。但是重新打开小程序，总分又变成0了如果想要继续在之前总分的基础上加减分数，就需要数据库来辅助。这节我们实现点击加减分数按钮，同时产生对应记录插入到数据库中要开始操作首页了，我们在app.json中将首页放在pages的第一个"pages":["pages/index/main","pages/me/main","pages/i

如果服务器出现错误，用户可以自己下拉刷新页面来获取当前分数下拉刷新的函数是onPullDownRefresh这节我们来实现下拉刷新的功能1、创建文件在src/pages/index文件夹下面创建main.json文件，并在文件里面加上代码，用来允许这个页面可以下拉刷新{"enablePullDownRefresh":true}2、添加下拉刷新函数编辑src/pages/index/index.vu

组件(Component)是Vue.js最强大的功能之一。用来封装可重用的代码或者封装一个单独的模块，比如我们上一节的登录弹窗，下面我们来演示一下如何将代码提取到组件1、创建组件在src/components文件夹下面创建一个LoginWindow.vue文件写入vue基础代码登录弹窗组件exportdefault{}2、添加样式代码将index.vue文件中上一节课添加的样式代码，剪切到我们刚刚

上一节我们安装了nginx和SSL证书，这一节继续来搭建小程序运行环境1、配置nodeJs环境（1）安装node、npm我们云服务器是Ubuntu系统，通过apt-get安装即可//下载nodejs安装文件node-v10.13.0-linux-x64.tar.xz~$wgethttps://npm.taobao.org/mirrors/node/v10.13.0/node-v10.13.0-li

将数据库中的数据格式化成YYYY.MM.DDhh:mm的格式，比如2019.10.1220:241、修改日期文件mpvue框架中有一个专门格式化日期的文件src/utils/index.js文件，将日期格式化成“YYYY.MM.DDhh:mm”格式。编辑src/utils/index.js文件，替换formatTime方法exportfunctionformatTime(date){constye

1、前言本课程会将我的一个已上线的全栈小程序项目做成【免费课程】分享给大家~扫一扫查看小程序功能小程序环境搭建+开发工具介绍+vue+ES6基础知识+每一行代码展示+代码逻辑+云服务器搭建+小程序上线完整的流程都会包含到，目的是让大家能够通过我的分享复制出一个完整的项目。在这里没有废话，只有干货。有什么问题、建议可以直接留言，或者关注公众号【猫宁一】后台提问（里面有我的个人微信）。在【猫宁一】中回

1、创建个人中心页面文件夹（1）在src/pages文件夹下面新建一个命名为me的文件夹，并且在文件夹下创建me.vue、main.js两个文件目前pages文件夹如下所示：（2）修改src/pages/me/main.js文件main.js是入口文件，通过main.js来加载me.vue文件。每个页面文件夹中都要有main.js文件//加载vue组件和me.vue文件importVuefrom'

1、上传代码打开微信开发者工具，点击右上角>>按钮，上传代码填写版本号和项目备注点击上传2、微信小程序后台设置（1）点击链接https://mp.weixin.qq.com/登录小程序后台点击版本管理，就能我们刚刚上传的版本，目前是开发版本（2）设置服务器域名点击开发—开发设置，将request合法域名设置成自己备案的域名（3）提交审核点击体验版没有问题的话，就可以提交审核了，一般一两天就能查看审

mpvue是美团开源的一个快捷开发小程序的框架，让我们可以使用vue.js语法编写小程序。大大降低了开发小程序的门槛，非常给力的一个框架。1、首先需要安装node.js环境（Mac电脑）~$brewupdate~$brewuninstallnode~$brewinstallnode~$brewpostinstallnodebrew是Mac下的一个包管理工具,可以很方便地进行安装/卸载/更新各种软件

上一节我们安装了nginx和SSL证书，这一节继续来搭建小程序运行环境1、配置nodeJs环境（1）安装node、npm我们云服务器是Ubuntu系统，通过apt-get安装即可//下载nodejs安装文件node-v10.13.0-linux-x64.tar.xz~$wgethttps://npm.taobao.org/mirrors/node/v10.13.0/node-v10.13.0-li

1、上传代码打开微信开发者工具，点击右上角>>按钮，上传代码填写版本号和项目备注点击上传2、微信小程序后台设置（1）点击链接https://mp.weixin.qq.com/登录小程序后台点击版本管理，就能我们刚刚上传的版本，目前是开发版本（2）设置服务器域名点击开发—开发设置，将request合法域名设置成自己备案的域名（3）提交审核点击体验版没有问题的话，就可以提交审核了，一般一两天就能查看审

项目完成后，如果希望别人能访问到我们的项目，那就要将项目上线，需要准备两个工具：云服务器已备案的域名1、配置云服务器（1）我们以配置腾讯云服务器为例，登录注册腾讯云后，打开这个链接，选择新建实例https://console.cloud.tencent.com/cvm/index（2）出现以下页面，我们看一下配置云服务器每一项怎么选地域：可以随便选，我选的成都机型：根据自己的需求，如果仅仅是自己测

现在是一次性加载所有的记录数据，数据多的时候，会加载比较慢，所以我们改成分页加载，一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据，知道所有的数据加载完成1、添加data变量编辑record.vue文件，添加两个变量page和morepage默认为0，表示当前的页数；more默认为true，用来控制底部显示的信息data(){return{show_record:false,userin

在个人中心页面有一个清空记录的功能，点击清空记录，会提示是否确认清空记录提示框。用户点击确认后，删除该用户所有的历史record记录数据1、添加方法（1）引用post等工具函数//参考代码，无需粘贴////需要添加的部分import{post,showModal,showSuccess}from'@/util'（2）编辑me.vue文件，在methods函数中添加deleteRecords方法，用

1、安装nginxnginx是一个强大的http服务器，作用是解析链接信息，告诉服务器客户端需要做什么比如nginx收到了链接信息http://localhost:8000/hello/index.html，就告诉服务器客户端的要求–获取目录hello/index.html文件。服务器读取文件内容发送给浏览器（1）ssh登录云服务器~$sshubuntu@45.**.***.66//输入密码ubu

1、引入工具函数编辑RecordList.vue文件，引入util.js文件中的post、showModal这两个工具函数//参考代码，无需粘贴////需要添加的部分import{post,showModal}from'@/util'2、添加撤销方法编辑RecordList.vue文件的script部分，在methods函数添加修改备注的方法addNoteasyncaddNote(){constd

在第2.2节我们注释代码规避了ESlint格式错误，现在将代码取消注释，将Eslint格式格式问题统一修改ps：这一节跳过也可以，不进行Eslint格式规范，小程序项目上线后也可以正常运行1、取消注释修改bulid/webpack.base.conf.js文件，找到第2.2节注释的代码，取消注释（command+/），记得保存文件~~~{test:/\.(js|vue)$/,loader:'esl

将数据库中的数据格式化成YYYY.MM.DDhh:mm的格式，比如2019.10.1220:241、修改日期文件mpvue框架中有一个专门格式化日期的文件src/utils/index.js文件，将日期格式化成“YYYY.MM.DDhh:mm”格式。编辑src/utils/index.js文件，替换formatTime方法exportfunctionformatTime(date){constye

点击清零按钮，出现提示框，提示是否确认清零确认的话，请求后端，在数据库records表中增加一条新的记录，这条记录的分数字段mark为0取消的话，不进行任何操作清零功能不删除历史记录1、添加页面部分编辑src/pages/index/index.vue文件的template部分，将清零、撤销按钮添加到页面上面-->撤销清零当前分数{{mark}}-->2、添加清零方法（1）编辑index.vue文

1、添加data变量添加records变量，用来保存记录数据data(){return{show_record:false,userinfo:{},records:[],}},2、引入get工具函数//参考代码，无需粘贴////需要添加的部分import{get}from'@/util'3、添加获取记录方法在record.vue文件中添加getRecords方法，用来获取记录数据//参考数据，无需

1、添加data变量编辑RecordList.vue文件的data函数，添加三个变量：ellipsis、note、src其中ellipsis用来控制添加或者编辑文本框显示、note是添加或者编辑文本框中的文本（note默认为记录数据里面的备注）、src是编辑按钮图片链接data(){return{create_time:formatTime(newDate(this.record.create_t

如果服务器出现错误，用户可以自己下拉刷新页面来获取当前分数下拉刷新的函数是onPullDownRefresh这节我们来实现下拉刷新的功能1、创建文件在src/pages/index文件夹下面创建main.json文件，并在文件里面加上代码，用来允许这个页面可以下拉刷新{"enablePullDownRefresh":true}2、添加下拉刷新函数编辑src/pages/index/index.vu

点击撤销按钮，撤销上一步的操作记录也就是删除records数据表中的最后一条数据1、添加撤销方法编辑index.vue文件的script部分，在methods函数中添加撤销方法recallasyncrecall(){try{constres=awaitpost('/weapp/deleterecord',{openid:this.userinfo.openId})console.log("从后端返

上一节实现了点击加减分的按钮，在数据库会插入一条数据。但是点击编译按钮（在微信开发者工具的右上角），总分又变成了0。这是因为虽然在数据库中添加的记录，但是当前总分并没有读取到数据库当前的数据，我们在这一节读取当前总分1、添加读取总分方法asyncgetCurrentMark(){try{constres=awaitget('/weapp/getmark',{openid:this.userinfo

1、功能介绍在记录页面对记录数据进行展示，每条记录数据后面都有编辑按钮，点击编辑按钮，出现修改文本框，点击修改按钮后，文本框会自动收起2、创建组件在src/components文件夹下面创建一个RecordList.vue文件，用来展示一条记录写入vue基础代码记录数据组件exportdefault{}3、在记录页面引入组件编辑record.vue文件。通过import引入组件，并添加compon

这一章，将在首页生成的记录，也就是将records数据表中的数据显示出来1、创建记录页面文件夹（1）在src/pages文件夹下面新建一个命名为record的文件夹，并且在文件夹下创建record.vue、main.js两个文件（2）修改src/pages/record/main.js文件main.js是入口文件，通过main.js来加载record.vue文件。每个页面文件夹中都要有main.j

1、获取用户信息我们在实现登录功能时，添加的登录成功时调用的方法loginSuccess。方法中代码wx.setStorageSync('userinfo',res)的作用是将用户信息保存到了缓存中，并将这条缓存信息命名为userinfo。缓存信息会一直存储在用户的手机中，等到下次打开小程序的时候，小程序会读取微信的缓存，来获得用户信息。如果用户清除了微信的缓存，那么需要用户重新登录小程序。现在我

数据库主要在后端操作，也就是server文件夹中1、koa路由（1）koa路由介绍Koa我们前面讲过，是后端的框架路由管理就是接收不同的api请求，找到相应处理的文件，查到或者修改数据，返回处理的信息。koa路由，统一在server/routes/index.js文件中管理比如我们在前面配置过登录链接http://localhost:5757/weapp/login，通过http://localh

1、添加变量编辑opinion.vue文件script部分的代码，添加data对象，在里面定义两个变量opinion、word_countopinion是用户反馈信息，word_count是用户反馈信息的字数exportdefault{data(){return{opinion:"",word_count:0}}}2、添加页面代码（1）编辑opinion.vue文件template部分的代码，意见

1、创建后端操作文件先在后端server/controllers文件夹中创建操作文件createopinion.js，用来将从前端页面提交的数据，插入到opinions表中，创建完之后，页面目录如下2、添加路由在路由管理文件server/routes/index.js文件中添加路由//需要添加的代码router.post('/createopinion',controllers.createopi

目前，我们在首页实现了点击+1、+5、-1、-5的按钮，总分会发生变化。但是重新打开小程序，总分又变成0了如果想要继续在之前总分的基础上加减分数，就需要数据库来辅助。这节我们实现点击加减分数按钮，同时产生对应记录插入到数据库中要开始操作首页了，我们在app.json中将首页放在pages的第一个"pages":["pages/index/main","pages/me/main","pages/i

在本地搭建好后端环境之后，我们来实现登录功能1、安装SDK插件SDK插件用来获取用户的openIdSDK是server端（也就是后端）的插件，帮助我们很容易的获取openId。openId是微信中用户身份的唯一标识，我们通过openId来识别用户，方便后期的用户管理~/WeChatProjects/truth_hold$npminstall--savewafer2-client-sdk//系统返回

1、添加变量在opinion.vue文件data对象中添加4个变量addimage、img_count、src、wechat、userinfoaddimage是未上传照片时默认显示照片的链接、img_count是用户上传照片的数量、src是用户上传的照片链接组成的数组、wechat是用户的微信号码、userinfo是用户信息//参考代码，无需粘贴//opinion:"",//word_count:

ES6是JavaScript的一个版本，因为我们前面用到的vue默认使用ES6语法开发，所以我们在这一节补充ES6的知识点，先了解我们项目经常用到的ES6的一些语法。ES6文档参考https://www.runoob.com/w3cnote/es6-concise-tutorial.html1、创建测试方法（1）编辑index.vue文件为了方便我们理解，直接在src/pages/index/in

这一节我们要学一个新的知识点，在数据库中创建opinion数据表，然后在意见反馈页面，点击提交按钮，将填写的反馈数据提交到opinion数据表中1、数据表的字段字段名字段说明字段类型备注openid用户微信标识string必填opinion用户反馈信息text必填src图片链接text选填wechat微信号string选填create_time创建时间timestamp必填2、创建opinions

微信小程序有类似于wx.showToast,wx.showModal等的默认弹窗，但是样式较少，实现不了我们的需求，所以我们这节来自己写一个登录弹窗。还是继续编辑pages/index/index.vue文件1、效果展示这节我们先来看一下弹窗的效果是啥样的2、添加自定义弹窗（1）编辑pages/index/index.vue文件这部分的样式是自定义弹窗的样式，将这些样式代码添加到style部分中，

第四章，我们来完善个人中心，主要操作是src/pages/me文件夹中的me.vue文件，先看看个人中心页面的效果：1、将个人中心页面放在首页在讲解app.json文件时，提到过在pages数组中第一个页面路径是进入小程序的默认显示页面这一章我们编辑个人中心页面，将个人中心页面路径放在pages数组中的第一个编辑src/app.json文件，将个人中心页面路径放在第一个"pages":["page

上节课已经将用户的微信头像、微信昵称显示出来了，这节课，我们在微信昵称的下面实现随机语句的显示也就是挑选10条励志的句子，用户每次切换到个人中心页面，都会随机显示这10条句子中的一条1、添加变量编辑//参考代码，无需粘贴//userinfo:{},//需要粘贴的部分quote:""2、添加方法在methods对象中添加方法rankArray，用来生成当前应该显示的语句methods:{//生成随机

第二章将前端页面的框架基本搭建好了，第三章，我们来做登录功能，登录功能需要在后端获取到用户信息，返回到前端。所以先来搭建后端开发环境1、后端开发环境介绍我们的项目用的是前后端分离开发前端可以理解为微信端，对应的是src文件夹，小程序页面的显示都是在前端操作后端就是需要配置在云服务器上的代码，对应的是server文件夹，数据库读写数据、获得接口数据都是在后端操作我们开发项目过程中，如果server文

组件(Component)是Vue.js最强大的功能之一。用来封装可重用的代码或者封装一个单独的模块，比如我们上一节的登录弹窗，下面我们来演示一下如何将代码提取到组件1、创建组件在src/components文件夹下面创建一个LoginWindow.vue文件写入vue基础代码登录弹窗组件exportdefault{}2、添加样式代码将index.vue文件中上一节课添加的样式代码，剪切到我们刚刚

用户登录完成之后，我们添加一个登录成功的弹窗。1、创建工具函数文件创建src/util.js工具函数文件，用来放我们后期会重复用到的函数，比如提示框，HTTPS请求等。粘贴下面代码到util.js文件中//消息提示框exportfunctionshowSuccess(text){//wx.showToast是小程序现成的API，其中title是提示的内容,icon是显示的图标wx.showToas

1、创建意见反馈页面（1）在src/pages文件夹下面新建一个命名为opinion的文件夹，并且在文件夹下创建opinion.vue、main.js两个文件（2）修改src/pages/opinion/main.js文件importVuefrom'vue'importAppfrom'./opinion'constapp=newVue(App)app.$mount()（3）修改opinion.vu

在前面介绍原生小程序框架的章节中，我们在app.json文件中添加过tabBar底部导航，这节我们再详细讲解一下1、添加图片到项目中我们需要将底部导航栏的照片添加到项目中，一般外来文件都放在static文件夹中。为了避免重复操作，这次将项目用到的所有照片一次性复制到项目中（1）下载压缩文件images.zip链接:https://pan.baidu.com/s/1ch0UWRH96Ln6sh_3n

1、创建说明书页面在第二章讲过创建新页面的步骤，这次再来复习一下（1）在src/pages文件夹下面新建一个命名为instruction的文件夹，并且在文件夹下创建instruction.vue、main.js两个文件（2）修改src/pages/instruction/main.js文件importVuefrom'vue'importAppfrom'./instruction'constapp=

1、修改src/pages文件夹pages文件夹里面是小程序的所有页面，我们将counter、logs这两个文件夹删掉，只留下index文件夹2、修改src/app.json文件将文件中的代码全部删除掉，粘贴下面代码。这个文件与原生小程序框架里面的app.json文件是一样的{"pages":["pages/index/main"],"window":{"backgroundTextStyle":

1、注册小程序（1）注册小程序账号点击下面注册地址开始注册https://mp.weixin.qq.com/wxopen/waregister?action=step1第一步：完善账号信息，选择一个自己的邮箱注册第二步：进行邮箱激活，登录邮箱，点击激活链接第三步：用户信息登记，确认主体类型，我选择的是「个人」类型（2）获取AppId注册完成后，需要在首页完善一下小程序的信息~再点击「开发设置」，获

mpvue是美团开源的一个快捷开发小程序的框架，让我们可以使用vue.js语法编写小程序。大大降低了开发小程序的门槛，非常给力的一个框架。1、首先需要安装node.js环境（Mac电脑）~$brewupdate~$brewuninstallnode~$brewinstallnode~$brewpostinstallnodebrew是Mac下的一个包管理工具,可以很方便地进行安装/卸载/更新各种软件

1、创建个人中心页面文件夹（1）在src/pages文件夹下面新建一个命名为me的文件夹，并且在文件夹下创建me.vue、main.js两个文件目前pages文件夹如下所示：（2）修改src/pages/me/main.js文件main.js是入口文件，通过main.js来加载me.vue文件。每个页面文件夹中都要有main.js文件//加载vue组件和me.vue文件importVuefrom'