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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介: 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
目录
相关文章
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
65 3
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
52 3
|
30天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
200 3
|
1月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
40 1
|
1月前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
104 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
77 1
|
3月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
3月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
3月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会