All Projects → wenkeShi → Travelibrary

wenkeShi / Travelibrary

🐣流动图书馆微信小程序前端

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Travelibrary

Weapp One
ONE·一个|图文 微信小程序/开源代码
Stars: ✭ 295 (+84.38%)
Mutual labels:  mina, wxapp
Leshare Shop Weapp
基于微信小程序的电商平台,采用原生框架开发
Stars: ✭ 183 (+14.38%)
Mutual labels:  mina, wxapp
Tina
💃 一款轻巧的渐进式微信小程序框架
Stars: ✭ 1,153 (+620.63%)
Mutual labels:  mina, wxapp
Cityselector
微信小程序 城市/区县定位选择模块 汉字/拼音搜索 可直接使用 另附 mpvue 版本 city picker / auto positioning / auto complete
Stars: ✭ 276 (+72.5%)
Mutual labels:  mina, wxapp
Wechat Weapp Movie
🎬电影推荐 - 微信小程序
Stars: ✭ 1,355 (+746.88%)
Mutual labels:  mina, wxapp
Infinity Css Grid
Fluid Flex Solution for making infinite grid columns.
Stars: ✭ 112 (-30%)
Mutual labels:  flex
Wx Book
仿追书神器的小说阅读器小程序
Stars: ✭ 122 (-23.75%)
Mutual labels:  wxapp
Wxgame Threejs
Threejs 开发微信小游戏
Stars: ✭ 111 (-30.62%)
Mutual labels:  wxapp
Awesome Wechat Weapp
微信小程序开发资源汇总 💯
Stars: ✭ 36,769 (+22880.63%)
Mutual labels:  wxapp
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (-3.75%)
Mutual labels:  flex
Silk V3 Decoder
kn007's blog
Stars: ✭ 1,832 (+1045%)
Mutual labels:  mina
React Flexa
Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.
Stars: ✭ 120 (-25%)
Mutual labels:  flex
M Mall
🐶 微信小程序-小商城前台(基于 WeUI.wxss、ES6 前端技术开发...)
Stars: ✭ 1,484 (+827.5%)
Mutual labels:  wxapp
Wx Miniprogram Boilerplate
基于Gulp微信小程序开发工作流,支持less样式编写,支持ESLint代码检查等功能
Stars: ✭ 122 (-23.75%)
Mutual labels:  wxapp
Mpvue Weui
用 vue 写小程序,基于 mpvue 框架重写 weui。
Stars: ✭ 1,463 (+814.38%)
Mutual labels:  wxapp
Vue3.0 Admin
vue3.0 + typescript + element-ui + 后台系统
Stars: ✭ 142 (-11.25%)
Mutual labels:  flex
Vue2 Elm
基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
Stars: ✭ 37,325 (+23228.13%)
Mutual labels:  flex
Wxapp toutiaonews
📰微信小程序--头条新闻
Stars: ✭ 119 (-25.62%)
Mutual labels:  wxapp
Css Grid Flex
📖An introduction about grid and flex of css.
Stars: ✭ 127 (-20.62%)
Mutual labels:  flex
Flex.css
flex.css is declarative layout which is compatible with wechat, UC, webview and other main-stream mobile browser and surpports react, vue, angular.
Stars: ✭ 1,537 (+860.63%)
Mutual labels:  flex

流动图书馆

流动图书馆是一个图书漂流和借阅工具,旨在共享闲置图书,并链接趣味相投的小伙伴。

预览

链接

image

技术栈

  • 小程序MINA框架: 一个响应的数据绑定框架。分为两块视图层(View)和逻辑层(App Service)
  • Flex:flex弹性布局
  • Express : http服务框架
  • websocket: 前后端消息的实时推送
  • mongoose: 操作mongodb数据库
  • pm2: 服务端使用pm2部署,常驻进程

截图

首页

1.png

借阅书架

2.png

发布的图书

3.png

借阅的图书

4.png

客户端

  • 代码结构

image.png

微信小程序中每个页面会有四个文件 .js .json .wxml .wxss js文件中是页面的逻辑,json文件是页面的一些配置,wxml是小程序的页面结构,wxss为页面的样式。

  • 封装http请求
const request = (obj) => {
  if(obj.header){
    obj.header.sessionId = session.sessionId;
  }else{
    obj.header = { sessionId: session.sessionId};
  }
  wx.request(obj);
}

在请求头中手动加上sessionId,因为小程序没有cookie。

  • websocket
//连接websocket
wx.connectSocket({
  url: 'wss://liudongtushuguan.cn/socket?sessionId=' + session.sessionId,
});

wx.onSocketOpen(function(res){

});
wx.onSocketClose(function(res){
  console.log('websocket closed');
});

wx.onSocketMessage(function(res){  //收到消息的回调
  let msg = JSON.parse(res.data);
  let msgs = that.data.borrowMessage;
  msgs.unshift(msg);
  that.setData({ borrowMessage: msgs});
});

//发送socket消息
  let data = JSON.stringify({
    targetId: bookData.ownerId,
    nickName: APP.globalData.userInfo.nickName,
    bookName: bookData.title,
    time: new Date().toLocaleString(),
    bookId: bookId,
    wxNum: wxNum,
    phoneNum: phoneNum,
    msg: msg,
  });
  wx.sendSocketMessage({
    data: data,
  });

服务端

  • 代码目录

image.png

  • Express框架实现http服务
const https = require('https');
const fs = require('fs');
const express = require('express')
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const app = express();
const queryString = require('querystring');
const URL = require('url');
const socket = require('./service/socket');

const router = require('./routes/router').router;

//获取认证证书
var key = fs.readFileSync('./key/2_www.liudongtushuguan.cn.key');
var cert = fs.readFileSync('./key/1_www.liudongtushuguan.cn_bundle.crt');

var options = {
	key : key,
	cert : cert,
};

app.use(cookieParser());
app.use(bodyParser.json());

const httpsServer = https.createServer(options,app);
httpsServer.listen(443,() =>{
    console.log('listening 443 port');
});

socket(httpsServer);  //websocket

app.use(router);

小程序规定必须要用https协议。

  • websocket模块

这里使用ws模块而没有选择使用socket.io,因为小程序客户端不支持socket.io

const WebSocket = require('ws');  //使用ws模块
const queryString = require('querystring');
const URL = require('url');
const sessions = require('./session');



module.exports = (httpServer) => {

	const wss = new WebSocket.Server({server : httpServer});

	wss.on('connection',(ws, req) => {
			let sessionId = queryString.parse(URL.parse(req.url).query).sessionId;
			ws.id = sessionId;
    	    ws.on('message' , (msg) => {
    	    		let msgObj = JSON.parse(msg);
    	    		if(sessions[msgObj.targetId]){
    	    			wss.clients.forEach((client) => {
    					if(client.id === msgObj.targetId){
    						let data = {
    							time : msgObj.time,
    							borrower :msgObj.nickName, 
    							book :msgObj.bookName,
    							borrowerId : sessions[sessionId],
    							bookId : msgObj.bookId,
    							wxNum : msgObj.wxNum,
    							phoneNum : msgObj.phoneNum,
    							msg : msgObj.msg
    						};
    						client.send(JSON.stringify(data));
    					}
    				});
    	    		}
    	    });
	});
};
  • mongoose操作数据库

db.js:

const mongoose = require('mongoose');

mongoose.connect('mongodb://app:[email protected]/wxapp');

const connection = mongoose.connection;
connection.once('open', (err) => {
	if(err){
		console.log('Database connection failure');
	}else{
		console.log('Database opened');

	}
});

connection.on('error',(err) => {
	console.log('Mongoose connected error '+ err);
});

connection.on('disconnected', () => {
	console.log('Mongoose disconnected');
});

module.exports = {
	connection : connection,
	mongoose : mongoose,
};

model.js:

const Schema = mongoose.Schema;

const UserSchema = new Schema({
	onlyId : {type: String},
	publishedBooks : {type: Array},
	borrowedBooks : {type: Array},
	borrowMessages : Array, 
});

const BookSchma = new Schema({
	isbn : String,
	title : String,
	press : String,
	author : String,
	rate : String,
	tags : String,
	image : String,
	status : {type : Boolean,default : true},
	ownerId : String,
	owner : String,
	ownerImage : String,
});

const userModel =  mongoose.model('user' , UserSchema);
const bookModel = mongoose.model('book' , BookSchma);

module.exports = {
	UserModel  : userModel,
	BookModel : bookModel,
}
  • 获得微信用户的openId

小程序前端会请求微信服务器得到一个code, 将code发送给自己的服务器,然后自己的服务器给微信服务器发送请求,得到微信用户的唯一标识openId

const https = require('https');
const queryString = require('querystring');

const sessions = require('./session');


module.exports = (req, res, next) => {
		let code = req.query.code;
		let otherRes = res;
		DATA.js_code = code;
		OPTION.path = PATH + queryString.stringify(DATA);
		let wxReq = https.request(OPTION, (res) => {
			if(res.statusCode == 200){
				let json = '';
				res.on('data' , (data) => {
					json+=data;
				});
				res.on('end' , () => {
					json =JSON.parse(json);
					let openId = json.openid;
					sessions[openId] = openId;
					otherRes.type('application/json');
					otherRes.json({
						data : {'sessionId' : openId},
					});
					otherRes.status(200);
				});
			}
		});
		wxReq.end();
};

使用pm2部署

安装pm2

npm install  -g pm2

启动应用

pm2 start app.js

总结

流动图书馆小程序是由三个人的小团队设计和开发的。我主要负责前后端的开发工作。这对从来没接触过服务端和小程序开发的我来说是一个挑战当然也是一次难得的学习机会。从最初对小程序,服务端两眼一抹黑,到搭建出应用的雏形,实现基本的效果,再到最后的拆分整合代码,这期间经历了很多,也收获了很多。从数据库的设计到后台数据库操作、会话管理、http服务接口一直到前后端数据交互、小程序前端,我对程序开发的大致流程有了更进一步的了解,弥补的之前对服务端知识的缺失。

三个人的小团队,因为兴趣结在一起,利用工作之余的时间完成自己喜欢的事情真的是一件令人十分有成就感的事情。

有兴趣的可以看源码

小程序前端

小程序后端

如果觉得不错,就毫不吝啬地给个star吧。后期项目还会继续更新和完善。

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].