手把手教你将小程序项目跑起来【真自律小程序】

手把手教你将小程序项目跑起来【真自律小程序】

1、下载项目文件

在【猫宁一】公众号中回复【源码】,得到下载链接,将项目下载下来并解压

2、打开项目文件,编辑server/config.js文件

将红框圈出来的地方改成自己的信息

(1)qcloudAppId、qcloudSecretId、qcloudSecretKey去哪里找?

首先登录自己的腾讯云,点击下面链接: https://console.cloud.tencent.com/capi

就会出现下面图片中的信息:

AppID对应:qcloudAppId SecretId对应:qcloudSecretId SecretKey对应:qcloudSecretKey

(2)appId、appSecret去哪里找?

登录微信公众平台https://mp.weixin.qq.com/ 登录自己的小程序账号,点击开发–开发设置就能看到appId、appSecret信息

​3、其他准备工作

(1)还没有小程序账号,点击下面链接注册并下载开发者工具

点击链接:小程序账号注册、开发者工具下载

(2)搭建前端开发环境,并将项目导入到开发者工具中

点击链接:搭建前端运行环境并导入项目(忽略第4条,不需要再创建mpvue项目)

导入项目后,微信开发者工具能显示小程序页面了,但是点击登录还是没有反应。 因为登录功能是要与后端服务器交互信息的,目前只是搭建了前端环境,需要有后端服务器才能将项目跑起来

(3)在本地电脑搭建后端开发环境,将本地电脑作为后端服务器

点击链接: 在本地电脑搭建开发环境

(4)在mysql数据库中创建数据表

在数据库中创建数据表

//输入mysql -uroot -p进入数据库

~/WeChatProjects/true_hold/server$ mysql -uroot -p

Enter password:

//选择cAuth

mysql> use cAuth;

然后粘贴下面语句,创建opinions和records数据表

drop table if exists `opinions`;

create table `opinions`(

`id` int(11) not null auto_increment,

`openid` varchar(100) not null,

`src` text default null,

`wechat` varchar(100) default null,

`opinion` text not null,

`create_time` timestamp not null default current_timestamp,

primary key(`id`)

)default charset=`utf8`;

drop table if exists `records`;

create table `records`(

`id` int(11) not null auto_increment,

`openid` varchar(100) not null,

`add` int(11) not null,

`mark` int(11) not null,

`note` varchar(100) default null,

`create_time` timestamp not null default current_timestamp,

primary key(`id`)

)default charset=`utf8`;

(5)打开终端,安装SDK和sass插件

SDK是server端(也就是后端)的插件,帮助我们很容易的获取openId。openId是微信中用户身份的唯一标识,我们通过openId来识别用户,方便后期的用户管理

//打开项目目录

~$ cd truth_hold/server

//在项目目录server文件夹下面安装SDK插件

~/truth_hold/server$ npm install --save wafer2-client-sdk

sass插件用来支持scss语言的运行环境,如果没有安装sass插件,启动npm run dev会报错,我们先打开终端安装一下scss插件

//打开项目目录

~$ cd truth_hold

//在项目目录中安装sass插件

~/truth_hold$ npm install sass-loader node-sass --save-dev

4、启动项目

(1)打开终端,进入项目目录,打开两个窗口同时运行npm run dev

第一个窗口,在项目目录下运行npm run dev用来启动前端代码

~/truth_hold$ npm run dev

第二个窗口,在server目录下运行npm run dev用来启动后端代码

~/truth_hold/server$ npm run dev

(2)打开微信开发者工具,查看效果

作者:猫宁一 全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程! 可关注【猫宁一】公众号领取我所有全栈项目代码哦~

点击查看课程目录:微信小程序全栈开发课程目录

相关资讯

和平精英飞行器在哪里 和平精英飞行器怎么用
www365betcom手机版

和平精英飞行器在哪里 和平精英飞行器怎么用

⌚ 08-23 👁️ 3290
HTTP 错误代码:原因和解决方案
beat365在线平台网址

HTTP 错误代码:原因和解决方案

⌚ 09-26 👁️ 6125