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

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

相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。   相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情: https://www.aliyun.com/product/rds/mysql 
目录
相关文章
|
3月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
5月前
|
人工智能 小程序 前端开发
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
375 0
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
|
8月前
|
人工智能 小程序 NoSQL
【一步步开发AI运动小程序】二十一、如何将AI运动项目配置持久化到后端?
本文介绍基于云智「Ai运动识别引擎」的运动配置持久化方案,旨在优化小程序或Uni APP中AI运动识别能力。通过将运动检测参数(如`Key`、`Name`、`TickMode`、`rules`或`samples`)持久化到后端,可避免因频繁调整运动参数而重新发布应用,提升用户体验。持久化数据结构支持规则和姿态样本存储,适用于关系数据库、文件或文档数据库(如MongoDB)。此外,云智还提供运动自动适配工具及「AI乐运动」产品,助力快速实现AI体育、全民健身等场景。
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
173 3
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
204 3
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
2609 3
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
352 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
159 1
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
374 1

热门文章

最新文章