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

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群版 2核4GB 100GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 1、下载项目文件在【猫宁一】公众号中回复【源码】,得到下载链接,将项目下载下来并解压2、打开项目文件,编辑server/config.js文件将红框圈出来的地方改成自己的信息

1、下载项目文件


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


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


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


image.png


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


首先登录自己的腾讯云,点击下面链接:


https://console.cloud.tencent.com/capi


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



image.png


AppID对应:qcloudAppId


SecretId对应:qcloudSecretId


SecretKey对应:qcloudSecretKey


(2)appId、appSecret去哪里找?


登录微信公众平台https://mp.weixin.qq.com/


登录自己的小程序账号,点击开发–开发设置就能看到appId、appSecret信息

image.png


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)打开微信开发者工具,查看效果

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助     相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
目录
相关文章
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
45 3
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
41 3
|
3月前
|
JavaScript Java 测试技术
基于小程序的家政项目小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的家政项目小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
36 0
|
18天前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
|
1月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
72 0
【微信小程序开发实战项目】——个人中心页面的制作
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
48 12
|
2月前
|
小程序 前端开发 JavaScript
计算机Python项目|django傣族节日及民间故事推广小程序
计算机Python项目|django傣族节日及民间故事推广小程序
|
2月前
|
存储 小程序 前端开发
java毕设项目|宿舍管理系统小程序设计与实现
java毕设项目|宿舍管理系统小程序设计与实现
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的业财票务一体项目管理系统 附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的业财票务一体项目管理系统 附带文章源码部署视频讲解等
28 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
36 1

热门文章

最新文章