微信小程序實戰--流動圖書館

發表時(shí)間：2021-3-31

發布人(rén)：融晨科技

浏覽次數：79

流動圖書館

流動圖書館是(shì)一個(gè)圖書漂流和(hé / huò)借閱工具，旨在(zài)共享閑置圖書，并鏈接趣味相投的(de)小夥伴。

預覽

鏈接

技術棧

小程序MINA框架：一個(gè)響應的(de)數據綁定框架。分爲(wéi / wèi)兩塊視圖層(View)和(hé / huò)邏輯層(App Service)
Flex：flex彈性布局
Express : http服務框架
websocket: 前後端消息的(de)實時(shí)推送
mongoose: 操作mongodb數據庫
pm2: 服務端使用pm2部署，常駐進程

截圖

首頁

借閱書架

發布的(de)圖書

借閱的(de)圖書

客戶端

代碼結構

微信小程序中每個(gè)頁面會有四個(gè)文件 .js .json .wxml .wxss
js文件中是(shì)頁面的(de)邏輯，json文件是(shì)頁面的(de)一些配置，wxml是(shì)小程序的(de)頁面結構，wxss爲(wéi / wèi)頁面的(de)樣式。

封裝http請求

const request = (obj) => {
  if(obj.header){
    obj.header.sessionId = session.sessionId;
  }else{
    obj.header = { sessionId: session.sessionId};
  }
  wx.request(obj);
}

在(zài)請求頭中手動加上(shàng)sessionId,因爲(wéi / wèi)小程序沒有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){  //收到(dào)消息的(de)回調
  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,
  });

服務端

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);

小程序規定必須要(yào / yāo)用https協議。

websocket模塊

這(zhè)裏使用ws模塊而(ér)沒有選擇使用http://socket.io，因爲(wéi / wèi)小程序客戶端不(bù)支持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 = https://www.wxapp-union.com/{
    							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: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,
}

獲得微信用戶的(de)openId

小程序前端會請求微信服務器得到(dào)一個(gè)code, 将code發送給自己的(de)服務器，然後自己的(de)服務器給微信服務器發送請求，得到(dào)微信用戶的(de)唯一标識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

總結

流動圖書館小程序是(shì)由三個(gè)人(rén)的(de)小團隊設計和(hé / huò)開發的(de)。我主要(yào / yāo)負責前後端的(de)開發工作。這(zhè)對從來(lái)沒接觸過服務端和(hé / huò)小程序開發的(de)我來(lái)說(shuō)是(shì)一個(gè)挑戰當然也(yě)是(shì)一次難得的(de)學習機會。從最初對小程序，服務端兩眼一抹黑，到(dào)搭建出(chū)應用的(de)雛形，實現基本的(de)效果，再到(dào)最後的(de)拆分整合代碼，這(zhè)期間經曆了(le／liǎo)很多，也(yě)收獲了(le／liǎo)很多。從數據庫的(de)設計到(dào)後台數據庫操作、會話管理、http服務接口一直到(dào)前後端數據交互、小程序前端，我對程序開發的(de)大(dà)緻流程有了(le／liǎo)更進一步的(de)了(le／liǎo)解，彌補的(de)之(zhī)前對服務端知識的(de)缺失。

三個(gè)人(rén)的(de)小團隊，因爲(wéi / wèi)興趣結在(zài)一起，利用工作之(zhī)餘的(de)時(shí)間完成自己喜歡的(de)事情真的(de)是(shì)一件令人(rén)十分有成就(jiù)感的(de)事情。

有興趣的(de)可以(yǐ)看源碼

小程序前端

小程序後端

如果覺得不(bù)錯，就(jiù)毫不(bù)吝啬地(dì / de)給個(gè)star吧。後期項目還會繼續更新和(hé / huò)完善。