微信小程序全栈开发课程
关注
分享
扫一扫
文章平均质量分 72
喵宁一
这个作者很懒，什么都没留下…
展开
-
一夜爆火的《羊了个羊》，开发竟这么简单！
这个开发之前一定要了解清楚，很多类目是不允许个人小程序去发布的，只能通过企业小程序来发布，并且都需要相应的资质。先注册一个服务号，先认证这个服务号，然后再通过服务号去创建小程序，小程序就可以不用认证了。服务器是必须的，用来存放数据库和后端代码。如果小程序想要公开给别人使用，是需要准备域名和服务器的，这些都需要花钱，服务器学生买都会有优惠。《羊了个羊》的爆火，除了玩法很有传播点之外，跟小程序易登录，方便传播的特质也是分不开的。个人版小程序是不需要认证的，企业版小程序大部分是需要认证的，认证费用300元/年。原创 2022-09-16 12:33:51 · 4104 阅读 · 2 评论 -
【2020云开发+源码】30分钟创建并上线微信小程序实战项目 | 零成本 | 云数据库 | 云函数
大家好，我是宁一，前段时间录制了微信小程序全栈开发的一个课程，教大家开发了一个叫做【真自律】的小程序。很多同学已经跟着课程将小程序做出来了但是大部分同学都没有服务器和域名，做出来的项目只能在自己电脑上面运行。有的同学加我好友说感觉好可惜，好不容易做出来的项目，竟然不能和别人一起分享。今天就来满足大家的要求，教大家使用云开发免费将项目部署上线，不需要服务器和域名就能让用户通过微信访问到你的小程序...原创 2020-03-10 23:22:32 · 6216 阅读 · 6 评论 -
手把手教你将小程序项目跑起来【真自律小程序】
1、下载项目文件在【猫宁一】公众号中回复【源码】，得到下载链接，将项目下载下来并解压2、打开项目文件，编辑server/config.js文件将红框圈出来的地方改成自己的信息（1）qcloudAppId、qcloudSecretId、qcloudSecretKey去哪里找？首先登录自己的腾讯云，点击下面链接：https://console.cloud.tencent.com/capi...原创 2019-11-29 17:35:48 · 10950 阅读 · 0 评论 -
7.5【微信小程序全栈开发课程】小程序上线--上传代码审核
1、上传代码打开微信开发者工具，点击右上角>>按钮，上传代码填写版本号和项目备注点击上传2、微信小程序后台设置（1）点击链接https://mp.weixin.qq.com/登录小程序后台点击版本管理，就能我们刚刚上传的版本，目前是开发版本（2）设置服务器域名点击开发—开发设置，将request合法域名设置成自己备案的域名（3）提交审核点击体验版没有问题的话，...原创 2019-10-22 16:57:16 · 787 阅读 · 0 评论 -
7.4【微信小程序全栈开发课程】小程序上线--基于Ubuntu搭建小程序运行环境
上一节我们安装了nginx和SSL证书，这一节继续来搭建小程序运行环境1、配置nodeJs环境（1）安装node、npm我们云服务器是Ubuntu系统，通过apt-get安装即可//下载nodejs安装文件node-v10.13.0-linux-x64.tar.xz~$ wget https://npm.taobao.org/mirrors/node/v10.13.0/node-v10....原创 2019-10-22 16:56:09 · 1020 阅读 · 1 评论 -
7.3【微信小程序全栈开发课程】小程序上线--nginx安装、SSL证书安装
1、安装nginxnginx是一个强大的http服务器，作用是解析链接信息，告诉服务器客户端需要做什么比如nginx收到了链接信息http://localhost:8000/hello/index.html，就告诉服务器客户端的要求–获取目录hello/index.html文件。服务器读取文件内容发送给浏览器（1）ssh登录云服务器~$ ssh ubuntu@45.**.***.66//...原创 2019-10-22 16:52:55 · 1276 阅读 · 2 评论 -
7.2【微信小程序全栈开发课程】小程序上线--配置云服务器、域名
项目完成后，如果希望别人能访问到我们的项目，那就要将项目上线，需要准备两个工具：云服务器已备案的域名1、配置云服务器（1）我们以配置腾讯云服务器为例，登录注册腾讯云后，打开这个链接，选择新建实例https://console.cloud.tencent.com/cvm/index（2）出现以下页面，我们看一下配置云服务器每一项怎么选地域：可以随便选，我选的成都机型：根据...原创 2019-10-22 16:50:41 · 950 阅读 · 0 评论 -
7.1【微信小程序全栈开发课程】 小程序上线--Eslint格式规范
在第2.2节我们注释代码规避了ESlint格式错误，现在将代码取消注释，将Eslint格式格式问题统一修改ps：这一节跳过也可以，不进行Eslint格式规范，小程序项目上线后也可以正常运行1、取消注释修改bulid/webpack.base.conf.js文件，找到第2.2节注释的代码，取消注释（command+/），记得保存文件~~~{ test: /\.(js|vue)$/, ...原创 2019-10-17 17:34:35 · 608 阅读 · 0 评论 -
6.8【微信小程序全栈开发课程】清空所有记录
在个人中心页面有一个清空记录的功能，点击清空记录，会提示是否确认清空记录提示框。用户点击确认后，删除该用户所有的历史record记录数据1、添加方法（1）引用post等工具函数//参考代码，无需粘贴//<script> //需要添加的部分 import {post,showModal,showSuccess} from '@/util'（2）编辑me.vue文件...原创 2019-10-17 17:33:47 · 696 阅读 · 0 评论 -
6.7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据
现在是一次性加载所有的记录数据，数据多的时候，会加载比较慢，所以我们改成分页加载，一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据，知道所有的数据加载完成1、添加data变量编辑record.vue文件，添加两个变量page和morepage默认为0，表示当前的页数；more默认为true，用来控制底部显示的信息data () { return { show_rec...原创 2019-10-17 17:32:54 · 557 阅读 · 0 评论 -
6.6【微信小程序全栈开发课程】记录页面（六）--修改备注
1、引入工具函数编辑RecordList.vue文件，引入util.js文件中的post、showModal这两个工具函数//参考代码，无需粘贴//<script>//需要添加的部分import {post,showModal} from '@/util'2、添加撤销方法编辑RecordList.vue文件的script部分，在methods函数添加修改备注的方法a...原创 2019-10-17 17:32:08 · 658 阅读 · 0 评论 -
6.5【微信小程序全栈开发课程】记录页面（五）--隐藏显示文本框
1、添加data变量编辑RecordList.vue文件的data函数，添加三个变量：ellipsis、note、src其中ellipsis用来控制添加或者编辑文本框显示、note是添加或者编辑文本框中的文本（note默认为记录数据里面的备注）、src是编辑按钮图片链接data () { return { create_time:formatTime(new Date(this....原创 2019-10-17 17:31:32 · 532 阅读 · 1 评论 -
6.4【微信小程序全栈开发课程】记录页面（四）--mpvue时间格式化
将数据库中的数据格式化成YYYY.MM.DD hh:mm的格式，比如2019.10.12 20:241、修改日期文件mpvue框架中有一个专门格式化日期的文件src/utils/index.js文件，将日期格式化成“YYYY.MM.DD hh:mm”格式。编辑src/utils/index.js文件，替换formatTime方法export function formatTime (dat...原创 2019-10-17 17:30:44 · 475 阅读 · 0 评论 -
6.3【微信小程序全栈开发课程】记录页面（三）--记录数据组件初始化
1、功能介绍在记录页面对记录数据进行展示，每条记录数据后面都有编辑按钮，点击编辑按钮，出现修改文本框，点击修改按钮后，文本框会自动收起2、创建组件在src/components文件夹下面创建一个RecordList.vue文件，用来展示一条记录写入vue基础代码<template> <div> 记录数据组件 </div></t...原创 2019-10-17 17:30:12 · 694 阅读 · 0 评论 -
6.2【微信小程序全栈开发课程】记录页面（二）--获取记录数据
1、添加data变量添加records变量，用来保存记录数据data () { return { show_record:false, userinfo:{}, records:[], }},2、引入get工具函数//参考代码，无需粘贴//<script>//需要添加的部分import {get} from '@/util'3、...原创 2019-10-17 17:28:58 · 735 阅读 · 0 评论 -
6.1【微信小程序全栈开发课程】记录页面（一）--添加记录页面
这一章，将在首页生成的记录，也就是将records数据表中的数据显示出来1、创建记录页面文件夹（1）在src/pages文件夹下面新建一个命名为record的文件夹，并且在文件夹下创建record.vue、main.js两个文件（2）修改src/pages/record/main.js文件main.js是入口文件，通过main.js来加载record.vue文件。每个页面文件夹中都要有ma...原创 2019-10-17 17:28:09 · 932 阅读 · 0 评论 -
5.5【微信小程序全栈开发课程】首页完善（五）--撤销功能
点击撤销按钮，撤销上一步的操作记录也就是删除records数据表中的最后一条数据1、添加撤销方法编辑index.vue文件的script部分，在methods函数中添加撤销方法recallasync recall () { try{ const res = await post('/weapp/deleterecord', {openid:this.userinfo.openI...原创 2019-10-17 17:27:12 · 769 阅读 · 0 评论 -
5.4【微信小程序全栈开发课程】首页完善（四）--清零功能
点击清零按钮，出现提示框，提示是否确认清零确认的话，请求后端，在数据库records表中增加一条新的记录，这条记录的分数字段mark为0取消的话，不进行任何操作清零功能不删除历史记录1、添加页面部分编辑src/pages/index/index.vue文件的template部分，将清零、撤销按钮添加到页面上面<!-- 参考代码，无需粘贴<div class="show"&...原创 2019-10-17 17:25:46 · 541 阅读 · 1 评论 -
5.3【微信小程序全栈开发课程】首页完善（三）--下拉刷新、分享功能
如果服务器出现错误，用户可以自己下拉刷新页面来获取当前分数下拉刷新的函数是onPullDownRefresh这节我们来实现下拉刷新的功能1、创建文件在src/pages/index文件夹下面创建main.json文件，并在文件里面加上代码，用来允许这个页面可以下拉刷新{ "enablePullDownRefresh":true}2、添加下拉刷新函数编辑src/pages/in...原创 2019-10-17 17:24:31 · 368 阅读 · 0 评论 -
5.2【微信小程序全栈开发课程】首页完善（二）--读取当前分数
上一节实现了点击加减分的按钮，在数据库会插入一条数据。但是点击编译按钮（在微信开发者工具的右上角），总分又变成了0。这是因为虽然在数据库中添加的记录，但是当前总分并没有读取到数据库当前的数据，我们在这一节读取当前总分1、添加读取总分方法async getCurrentMark () { try{ const res = await get('/weapp/getmark', {o...原创 2019-10-17 17:23:39 · 433 阅读 · 0 评论 -
5.1【微信小程序全栈开发课程】首页完善（一）--点击记录插入数据库
目前，我们在首页实现了点击+1、+5、-1、-5的按钮，总分会发生变化。但是重新打开小程序，总分又变成0了如果想要继续在之前总分的基础上加减分数，就需要数据库来辅助。这节我们实现点击加减分数按钮，同时产生对应记录插入到数据库中要开始操作首页了，我们在app.json中将首页放在pages的第一个"pages": [ "pages/index/main", "pages/me...原创 2019-10-17 17:15:34 · 625 阅读 · 0 评论 -
4.9【微信小程序全栈开发课程】意见反馈（四）--提交反馈信息
1、创建后端操作文件先在后端server/controllers文件夹中创建操作文件createopinion.js，用来将从前端页面提交的数据，插入到opinions表中，创建完之后，页面目录如下2、添加路由在路由管理文件server/routes/index.js文件中添加路由//需要添加的代码router.post('/createopinion', controllers.cr...原创 2019-10-17 17:14:08 · 1072 阅读 · 0 评论 -
4.8【微信小程序全栈开发课程】小程序前后端的联系以及get、post代码封装
数据库主要在后端操作，也就是server文件夹中1、koa路由（1）koa路由介绍Koa我们前面讲过，是后端的框架路由管理就是接收不同的api请求，找到相应处理的文件，查到或者修改数据，返回处理的信息。koa路由，统一在server/routes/index.js文件中管理比如我们在前面配置过登录链接http://localhost:5757/weapp/login，通过http:/...原创 2019-10-17 17:11:46 · 746 阅读 · 0 评论 -
4.7【微信小程序全栈开发课程】意见反馈（三）--操作数据库knex
这一节我们要学一个新的知识点，在数据库中创建opinion数据表，然后在意见反馈页面，点击提交按钮，将填写的反馈数据提交到opinion数据表中1、数据表的字段字段名字段说明字段类型备注openid用户微信标识string必填opinion用户反馈信息text必填src图片链接text选填wechat微信号string选填...原创 2019-10-17 17:10:48 · 777 阅读 · 0 评论 -
4.6【微信小程序全栈开发课程】意见反馈（二）--上传照片
1、添加变量在opinion.vue文件data对象中添加4个变量addimage、img_count、src、wechat、userinfoaddimage是未上传照片时默认显示照片的链接、img_count是用户上传照片的数量、src是用户上传的照片链接组成的数组、wechat是用户的微信号码、userinfo是用户信息//参考代码，无需粘贴//opinion:"",//word_c...原创 2019-10-17 17:09:24 · 666 阅读 · 0 评论 -
4.5【微信小程序全栈开发课程】意见反馈（一）--实时监控字数
1、添加变量编辑opinion.vue文件script部分的代码，添加data对象，在里面定义两个变量opinion、word_countopinion是用户反馈信息，word_count是用户反馈信息的字数<script>export default { data () { return { opinion:"", word_count:0...原创 2019-10-17 17:08:00 · 691 阅读 · 0 评论 -
4.4【微信小程序全栈开发课程】个人中心（四）--创建意见反馈页面
1、创建意见反馈页面（1）在src/pages文件夹下面新建一个命名为opinion的文件夹，并且在文件夹下创建opinion.vue、main.js两个文件（2）修改src/pages/opinion/main.js文件import Vue from 'vue'import App from './opinion'const app = new Vue(App)app.$mount...原创 2019-10-17 17:07:15 · 1401 阅读 · 0 评论 -
4.3【微信小程序全栈开发课程】个人中心（三）--操作指引页面
1、创建说明书页面在第二章讲过创建新页面的步骤，这次再来复习一下（1）在src/pages文件夹下面新建一个命名为instruction的文件夹，并且在文件夹下创建instruction.vue、main.js两个文件（2）修改src/pages/instruction/main.js文件import Vue from 'vue'import App from './instructio...原创 2019-10-17 17:05:53 · 1285 阅读 · 3 评论 -
4.2【微信小程序全栈开发课程】个人中心（二）--显示随机语句
上节课已经将用户的微信头像、微信昵称显示出来了，这节课，我们在微信昵称的下面实现随机语句的显示也就是挑选10条励志的句子，用户每次切换到个人中心页面，都会随机显示这10条句子中的一条1、添加变量编辑//参考代码，无需粘贴//userinfo:{},//需要粘贴的部分quote: ""2、添加方法在methods对象中添加方法rankArray，用来生成当前应该显示的语句me...原创 2019-10-16 11:40:37 · 816 阅读 · 0 评论 -
4.1【微信小程序全栈开发课程】个人中心（一）--页面样式、用户信息展示
第四章，我们来完善个人中心，主要操作是src/pages/me文件夹中的me.vue文件，先看看个人中心页面的效果：1、将个人中心页面放在首页在讲解app.json文件时，提到过在pages数组中第一个页面路径是进入小程序的默认显示页面这一章我们编辑个人中心页面，将个人中心页面路径放在pages数组中的第一个编辑src/app.json文件，将个人中心页面路径放在第一个"pages":...原创 2019-10-16 11:39:54 · 6451 阅读 · 2 评论 -
3.6【微信小程序全栈开发课程】登录功能（四）--显示登录成功弹窗
用户登录完成之后，我们添加一个登录成功的弹窗。1、创建工具函数文件创建src/util.js工具函数文件，用来放我们后期会重复用到的函数，比如提示框，HTTPS请求等。粘贴下面代码到util.js文件中//消息提示框export function showSuccess (text) { //wx.showToast是小程序现成的API，其中title是提示的内容,icon是显示的图标...原创 2019-10-16 11:38:04 · 971 阅读 · 0 评论 -
3.5【微信小程序全栈开发课程】登录功能（三）--获取用户信息
1、获取用户信息我们在实现登录功能时，添加的登录成功时调用的方法loginSuccess。方法中代码wx.setStorageSync('userinfo', res)的作用是将用户信息保存到了缓存中，并将这条缓存信息命名为userinfo。缓存信息会一直存储在用户的手机中，等到下次打开小程序的时候，小程序会读取微信的缓存，来获得用户信息。如果用户清除了微信的缓存，那么需要用户重新登录小程序...原创 2019-10-16 11:37:14 · 726 阅读 · 0 评论 -
3.4【微信小程序全栈开发课程】组件(Component)--封装登录弹窗组件
组件 (Component) 是 Vue.js 最强大的功能之一。用来封装可重用的代码或者封装一个单独的模块，比如我们上一节的登录弹窗，下面我们来演示一下如何将代码提取到组件1、创建组件在src/components文件夹下面创建一个LoginWindow.vue文件写入vue基础代码<template> <div> 登录弹窗组件 </div&...原创 2019-10-16 11:35:40 · 683 阅读 · 0 评论 -
3.3【微信小程序全栈开发课程】登录功能（二）--自定义登录弹窗
微信小程序有类似于wx.showToast,wx.showModal等的默认弹窗，但是样式较少，实现不了我们的需求，所以我们这节来自己写一个登录弹窗。还是继续编辑pages/index/index.vue文件1、效果展示这节我们先来看一下弹窗的效果是啥样的2、添加自定义弹窗（1）编辑pages/index/index.vue文件这部分的样式是自定义弹窗的样式，将这些样式代码添加到styl...原创 2019-10-16 11:33:39 · 1430 阅读 · 3 评论 -
3.2【微信小程序全栈开发课程】登录功能（一）--实现登录功能
在本地搭建好后端环境之后，我们来实现登录功能1、安装SDK插件SDK插件用来获取用户的openIdSDK是server端（也就是后端）的插件，帮助我们很容易的获取openId。openId是微信中用户身份的唯一标识，我们通过openId来识别用户，方便后期的用户管理~/WeChatProjects/truth_hold$ npm install --save wafer2-client-s...原创 2019-10-16 11:32:45 · 2161 阅读 · 5 评论 -
3.1【微信小程序全栈开发课程】在本地搭建后端开发环境
第二章将前端页面的框架基本搭建好了，第三章，我们来做登录功能，登录功能需要在后端获取到用户信息，返回到前端。所以先来搭建后端开发环境1、后端开发环境介绍我们的项目用的是前后端分离开发前端可以理解为微信端，对应的是src文件夹，小程序页面的显示都是在前端操作后端就是需要配置在云服务器上的代码，对应的是server文件夹，数据库读写数据、获得接口数据都是在后端操作我们开发项目过程中，如果se...原创 2019-10-15 15:42:10 · 2488 阅读 · 6 评论 -
2.6【微信小程序全栈开发课程】添加底部导航
在前面介绍原生小程序框架的章节中，我们在app.json文件中添加过tabBar底部导航，这节我们再详细讲解一下1、添加图片到项目中我们需要将底部导航栏的照片添加到项目中，一般外来文件都放在static文件夹中。为了避免重复操作，这次将项目用到的所有照片一次性复制到项目中（1）下载压缩文件images.zip链接:https://pan.baidu.com/s/1ch0UWRH96Ln6...原创 2019-10-15 15:39:28 · 506 阅读 · 1 评论 -
2.5【微信小程序全栈开发课程】个人中心页面搭建
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文件import ...原创 2019-10-15 15:38:05 · 1303 阅读 · 0 评论 -
2.4【微信小程序全栈开发课程】ES6知识点详解--创建config.js配置文件
ES6是JavaScript的一个版本，因为我们前面用到的vue默认使用ES6语法开发，所以我们在这一节补充ES6的知识点，先了解我们项目经常用到的ES6的一些语法。ES6文档参考https://www.runoob.com/w3cnote/es6-concise-tutorial.html1、创建测试方法（1）编辑index.vue文件为了方便我们理解，直接在src/pages/i...原创 2019-10-15 15:35:35 · 845 阅读 · 0 评论 -
2.3【微信小程序全栈课程】index页面完善--vue文件代码解析
这一节我们继续完善index页面，编辑src/pages/index/index.vue文件，在实际项目开发中，让大家继续了解vue1、template 部分（1）修改template部分的代码template里面包含html代码，对应着原生小程序框架里中的.wxml文件。我们将index.vue文件中的template部分的代码修改成下面的代码<template> <...原创 2019-10-15 15:32:22 · 1073 阅读 · 0 评论