2016-09-14

微信开发之showshow小程序

由于公司无法使用微信，网盘等一些云类同步软件，就算只是想将手机上一段文字亦或是一个图片上传到电脑端也只能是通过邮件的方式来传送，当比较频繁的时候一会一封邮件还是比较麻烦，想要一个简单直观的方法满足这个小需求。于是就想到通过微信公众平台来实现，将一段文本或者图片通过微信公众账号上传，最后通过电脑访问，简单写了个雏形，如下图：

实现了简单功能：

向公众账号发送文本以及图片，返回访问链接；
图片直接下载到本地存储，以时间戳命名图片；
数据通过JSON文件的存储方式保存，可以查看近期所有发送的文本或图片；

功能比较简单，全部代码130+行。基本没有什么前台，通过拼接字符串的方式写的HTML；也基本没有什么后台，整体使用的是expressWeb框架，微信交互使用的wechat模块；下载图片使用的download模块。

这里先简单介绍一下实现的细节，首先，以/根目录接受微信的信息，如下代码：

app.use('/', wechat(config, function(req,res,next){
  var message = req.weixin;
  console.log(message);
  var FromUserName = message.FromUserName;
  var CreateTime = new Date().getTime();
  var file = path.join(process.cwd(), '/.data/.', FromUserName);
  var data = {};
  // 每一条信息保存时间，字段为CreateTime
  data.CreateTime = CreateTime;
  switch (message.MsgType){
    case 'text':
      var Content = message.Content;
      data.text = Content;  // 当为文本内容的时候，保存text字段
      storeData(file,data,function(result){
        if(result == 'success'){
          res.reply("请在浏览器中访问：http://pengloo53.eicp.net/user/" + FromUserName);
        }else{
          res.reply(result);
        }
      });
      break;
    case 'image':
      var PicUrl = message.PicUrl;
      var picName = new Date().getTime() + '.png';
      var imagePath = path.join(process.cwd(), '/.data/dist/' , picName);
      data.image = picName; // 当为图片内容的时候，保存image字段（时间戳命名）
      downloadPic(PicUrl, imagePath ,function(result){
        if(result == 'success'){
          storeData(file,data,function(result){
            if(result == 'success'){
              res.reply("图片上传成功，请在浏览器中访问：http://pengloo53.eicp.net/user/" + FromUserName);
            }else{
              res.reply(result);
            }
          })
        }
      });
      break;
    default:
      res.reply('欢迎使用showshow小工具，请输入文本或是图片！');
  }
}));

这里只是实现了text以及image的微信消息类型，也就是只接受并处理文字信息以及图片信息；每一条消息为一个对象，通过键值对来保存数据，一个CreateTime，一个text或image；每一个消息当做一个对象push到数据数组中保存，最终以JSON的方式保存到文件中，每一个用户对应一个数据文件，代替数据库的功能。实现代码如下：

// 初始化数据
function initData(file,callback){
  fs.stat(file, function(err){
    if (err){
      callback([]);
    }else{
      var content = [];
      fs.readFile(file,'utf8',function(err,result){
        if(err){
          callback([]);
        }
        content = JSON.parse(result.toString() || []);
        callback(content);
      });
    }
  });
}
// 插入新的数据，保存到本地
function storeData(file, data, callback){
  initData(file,function(result){
    result.push(data);
    fs.writeFile(file, JSON.stringify(result), function(err){
      if(err){
        callback(err);
      }else{
        callback('success');
        console.log('store success.');
      }
    });
  })
}

最后浏览器以GET请求获取信息，以达到数据传输到PC端的目的。定义一个GET路由，指定路径为/user/:id，id即为微信用户的Open ID;

app.get('/user/:id', function(req,res,next){
  var pathname = url.parse(req.url).pathname;
  var match = pathname.match(/^\/user\/(.+)/);
  if (match){
    var username = match[1];
    var file = path.join(process.cwd(), '/.data/' , username);
    var pageContent = '';
    initData(file,function(result){
      for(var i = result.length -1 ; i >= 0 ; i--){
        var dateDisplay = new Date(result[i].CreateTime * 1);
        var text = result[i].text;
        var image = result[i].image;
        pageContent += '<h2>' + dateDisplay.toLocaleString() + '</h2>';
        if(text){
          pageContent += '<p>' + text + '</p>';
        }else{
          pageContent += '<p><a href="/'+ result[i].image +'"><img src="/'+ result[i].image +'" width="600px"></a></p>';
        }
        pageContent += '<hr/>';
      }
      res.send(pageContent);
    });
  }
});

以倒序的方式显示消息，最终显示如上图，页面比较简单，后续想通过jade模板引擎写个漂亮的前台页面。

源代码：Node_note/showshow.js，写得不好请指正。

现在可以关注一下这个公众账号体验一下效果。如果有Bug或者服务器无法响应，请见谅（家里Mac mini担当的服务器，或许已经不在提供服务）。

长按手机可以扫描二维码哦

LP's Blog

坚持学习，坚持分享...

微信开发之showshow小程序