微信小程序图书馆实战开发教程

技术栈

小程序MINA框架： 一个响应的数据绑定框架。分为两块视图层(View)和逻辑层(App Service)

Flex：flex弹性布局

Express : http服务框架

websocket: 前后端消息的实时推送

mongoose: 操作mongodb数据库

pm2: 服务端使用pm2部署，常驻进程

效果图：

客户端

代码结构

微信小程序中每个页面会有四个文件 .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, });

服务端

代码目录 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模块而没有选择使用http://socket.io，因为小程序客户端不支持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操作数据库 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

小程序前端会请求微信服务器得到一个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(); };

总结

图书馆小程序可以由三个人的小团队设计和开发的。对于那些初次开发小程序的新手是很好的提高，从服务端到搭建应用的雏形，实现基本效果，再到最后拆分整合代码，会让开发者也收获了很多。从数据库的设计到后台数据库操作、会话管理、http服务接口一直到前后端数据交互、小程序前端，对程序开发的大致流程有了更进一步的了解，弥补的之前对服务端知识的缺失。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!