介绍
基于uni-app开发的模仿微信的小程序
项目链接:https://gitee.com/lzj01231/wx
软件架构
1.使用node js的koa2、fs、path、koa-static、koa-bodyparser、koa、koa-bodyparser@2、squelize、pg、pg-hstore、mysql2
2.使用uniapp中的默认框架:pages.json、mainfest.json、vue.config.js、uni.scss、App.vue、main.js、env等
3.使用的uniapp中的组件有:vue组件使用了:component、template, 视图容器使用了:view、scroll-view、swiper, 表单组件使用了:button、input、form、textarea等
4.使用了h5的基础语法跟javascript的语法。
微信文件夹为前端文件夹、微信后端文件夹为后端文件夹
注意 : 运行后端server文件的前需要先下载mysql和启动mysql服务,并在mysql数据库中创建数据库名为wx的数据库,运行server后端文件夹之后会自动在wx数据库中创建Users表、Publisheds表、Retroactions表。三张表是用来存储内容的如通信录、朋友圈信息等。
安装教程
- 安装mysql(简便安装方法-->服务器运维面板 宝塔 )
官网链接:https://www.bt.cn/






初始化mysql(设置密码)


- 安装node(常规安装)
node官网链接:http://nodejs.cn/
- 安装HBuilder X(常规安装)
HBuilder官网链接:https://www.dcloud.io/hbuilderx.html
请安装开发板
使用说明
- 在微信后端修改User.js文件中的mysql连接

- 下载源码并在微信后端下载插件
cd 微信后端
npm install
npm i koa -s
npm i s koa-router
npm install koa-body
npm install koa-server
npm install koa-bodyparser@2 --save
npm i -s sequelize
npm i mysql2
node server.js
- 在HBulider X将前端代码(微信)运行到浏览器

- 打开效果(按f12打开控制台)
- 消息

- 通讯录

- 发现

- 朋友圈

- 发布

- 我的

- 添加好友

演示
https://www.bilibili.com/video/BV1yo4y1Q7JH/
参与贡献
- 李梓键
网友评论