手把手教你將小程序項目跑起來【真自律小程序】

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）打開微信開發者工具，查看效果

作者：貓寧一
全棧程序媛₍ᐢ •⌄• ᐢ₎一枚~ 熱愛學習！熱愛編程！
可關注【貓寧一】公衆號領取我所有全棧項目代碼哦~

點擊查看課程目錄：微信小程序全棧開發課程目錄