微信小程序?qū)崙?zhàn)--流動(dòng)圖書館
流動(dòng)圖書館流動(dòng)圖書館是一個(gè)圖書漂流和借閱工具，旨在共享閑置圖書，并鏈接趣味相投的小伙伴。預(yù)覽鏈接技術(shù)棧小程序MINA框架： 一個(gè)響應(yīng)的數(shù)據(jù)綁定框架。分為兩塊視圖層(View)和邏輯層(App Service)Flex：flex彈性布 ...
流動(dòng)圖書館
流動(dòng)圖書館是一個(gè)圖書漂流和借閱工具，旨在共享閑置圖書，并鏈接趣味相投的小伙伴。
預(yù)覽
鏈接
技術(shù)棧
- 小程序MINA框架： 一個(gè)響應(yīng)的數(shù)據(jù)綁定框架。分為兩塊視圖層(View)和邏輯層(App Service)
- Flex：flex彈性布局
- Express : http服務(wù)框架
- websocket: 前后端消息的實(shí)時(shí)推送
- mongoose: 操作mongodb數(shù)據(jù)庫
- pm2: 服務(wù)端使用pm2部署，常駐進(jìn)程
截圖
首頁
借閱書架
發(fā)布的圖書
借閱的圖書
客戶端
- 代碼結(jié)構(gòu)
微信小程序中每個(gè)頁面會(huì)有四個(gè)文件 .js .json .wxml .wxss
js文件中是頁面的邏輯，json文件是頁面的一些配置，wxml是小程序的頁面結(jié)構(gòu)，wxss為頁面的樣式。
- 封裝http請求
const request = (obj) => {
if(obj.header){
obj.header.sessionId = session.sessionId;
}else{
obj.header = { sessionId: session.sessionId};
}
wx.request(obj);
}
在請求頭中手動(dòng)加上sessionId,因?yàn)樾〕绦驔]有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){ //收到消息的回調(diào)
let msg = JSON.parse(res.data);
let msgs = that.data.borrowMessage;
msgs.unshift(msg);
that.setData({ borrowMessage: msgs});
});
//發(fā)送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,
});
服務(wù)端
- 代碼目錄
- Express框架實(shí)現(xiàn)http服務(wù)
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;
//獲取認(rèn)證證書
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);
小程序規(guī)定必須要用https協(xié)議。
- websocket模塊
這里使用ws模塊而沒有選擇使用http://socket.io，因?yàn)樾〕绦蚩蛻舳瞬恢С?span id="us6uu6u" class="invisible" style=" margin: 0px; padding: 0px; box-sizing: inherit; font-stretch: normal; font-size: 0px; line-height: 0; font-family: a; color: transparent; text-shadow: none; background-color: transparent;">http://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操作數(shù)據(jù)庫
db.js:
const mongoose = require('mongoose');
mongoose.connect('mongodb://app:12345678@127.0.0.1/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
小程序前端會(huì)請求微信服務(wù)器得到一個(gè)code, 將code發(fā)送給自己的服務(wù)器，然后自己的服務(wù)器給微信服務(wù)器發(fā)送請求，得到微信用戶的唯一標(biāo)識(shí)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
啟動(dòng)應(yīng)用
pm2 start app.js
總結(jié)
流動(dòng)圖書館小程序是由三個(gè)人的小團(tuán)隊(duì)設(shè)計(jì)和開發(fā)的。我主要負(fù)責(zé)前后端的開發(fā)工作。這對從來沒接觸過服務(wù)端和小程序開發(fā)的我來說是一個(gè)挑戰(zhàn)當(dāng)然也是一次難得的學(xué)習(xí)機(jī)會(huì)。從最初對小程序，服務(wù)端兩眼一抹黑，到搭建出應(yīng)用的雛形，實(shí)現(xiàn)基本的效果，再到最后的拆分整合代碼，這期間經(jīng)歷了很多，也收獲了很多。從數(shù)據(jù)庫的設(shè)計(jì)到后臺(tái)數(shù)據(jù)庫操作、會(huì)話管理、http服務(wù)接口一直到前后端數(shù)據(jù)交互、小程序前端，我對程序開發(fā)的大致流程有了更進(jìn)一步的了解，彌補(bǔ)的之前對服務(wù)端知識(shí)的缺失。
三個(gè)人的小團(tuán)隊(duì)，因?yàn)榕d趣結(jié)在一起，利用工作之余的時(shí)間完成自己喜歡的事情真的是一件令人十分有成就感的事情。
有興趣的可以看源碼
小程序前端
小程序后端
如果覺得不錯(cuò)，就毫不吝嗇地給個(gè)star吧。后期項(xiàng)目還會(huì)繼續(xù)更新和完善。
