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

红太狼 2023-06-18 02:52 7阅读 0赞

#### 1、下载项目文件 ####

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

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

将红框圈出来的地方改成自己的信息  
![format_png][]

##### （1）qcloudAppId、qcloudSecretId、qcloudSecretKey去哪里找？ #####

首先登录自己的腾讯云，点击下面链接：  
[https://console.cloud.tencent.com/capi][https_console.cloud.tencent.com_capi]

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

![format_png 1][]

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

##### （2）appId、appSecret去哪里找？ #####

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

![format_png 2][]

#### 3、其他准备工作 ####

##### （1）还没有小程序账号，点击下面链接注册并下载开发者工具 #####

点击链接：[小程序账号注册、开发者工具下载][Link 1]

##### （2）搭建前端开发环境，并将项目导入到开发者工具中 #####

点击链接：[搭建前端运行环境并导入项目（忽略第4条，不需要再创建mpvue项目）][4_mpvue]

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

##### （3）在本地电脑搭建后端开发环境，将本地电脑作为后端服务器 #####

点击链接： [在本地电脑搭建开发环境][Link 2]

##### （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）打开微信开发者工具，查看效果 #####

![演示动图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xOTg2MDc0OS01ZWU1OTQwZmEwM2ZkZDQzLmdpZg]

> **作者：猫宁一**  
> 全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 3]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xOTg2MDc0OS02ODcxYmY0MDBmZmU2MmIzLnBuZw?x-oss-process=image/format,png
[https_console.cloud.tencent.com_capi]: https://links.jianshu.com/go?to=https%3A%2F%2Fconsole.cloud.tencent.com%2Fcapi
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82ODA4NzgzLTU4ZGFjNTYzOGJlNjJiOTYucG5n?x-oss-process=image/format,png
[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xOTg2MDc0OS0zZjRiMWViY2Q4ZWE4OGZiLnBuZw?x-oss-process=image/format,png
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzIxNTkwNzUyNw==&mid=2247483824&idx=1&sn=697296f59393a45ef149779d3052e187&chksm=97906c18a0e7e50e8021468b9e30d6e00f594253783d2e5b4b9c16b992ec773d2f49e623dc42&token=99031689&lang=zh_CN#rd
[4_mpvue]: https://mp.weixin.qq.com/s?__biz=MzIxNTkwNzUyNw==&mid=2247483836&idx=1&sn=acb7c992e21ca3bf5c1274c3cd3913cb&chksm=97906c14a0e7e5026f9ae7cfae84875fc63c185afd07b842532f3f12f8b22164c70b47eebe54&token=99031689&lang=zh_CN#rd
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzIxNTkwNzUyNw==&mid=2247483888&idx=1&sn=9aed7d8a31ae5e919bf4e6389264e904&chksm=97906c58a0e7e54e946a09520a1c3c2abf56bf6772d8e7a3040c349876ef7545358f3b2b5c53&token=486650009&lang=zh_CN#rd
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xOTg2MDc0OS01ZWU1OTQwZmEwM2ZkZDQzLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xOTg2MDc0OS01ZWU1OTQwZmEwM2ZkZDQzLmdpZg
[Link 3]: https://blog.csdn.net/shine_a/article/details/102566724