微信小程序与node搭建的服务器连接，实现文件读写

首先，搭建本地的服务器。这里采用node编写服务器程序。

需要用到express和fs，因此先新建一个文件夹引入需要的模块。然后新建server,js文件，同时新建data.txt

//引用需要的模块
const express = require('express')
const fs = require('fs')

let app = express()
//路由/read---读取本地的文件
app.get('/read', function (req, res) {
    //读取data.txt文档内容  
    fs.readFile('./data.txt',function (err, data) {
        //读取失败
        if (err) {
            console.log(err)
            return;
        }
        //读取成功
        console.log(data.toString())
        let text = data.toString()
        //向客户端发送文件的内容
        res.send(text);
    })
})
///路由 /write ---向本地文件写入内容
app.get('/write',function(req,res) {
    //req.query 是获取请求的参数列表，返回一个参数对象
    //而后面的content是请求的内容。
    //比如本地地址：http://127.0.0.1:8000/write?content={"key1":"hhh","key2":"hehe"}
    var content = req.query.content;
    //console.log(req.query)
    //把内容写进文件
    fs.writeFile('./data.txt',content, function(err) {
        //判断写入失败
        if(err){
            console.log(err)
            return;
        }
    })
    //写入成功则响应，200
    res.send({"code":200})
})

//监听端口
app.listen(8002, function () {
    console.log("服务启动了")
});

服务器就写个简单的读取文件和写入文件，下面到微信开发者工具，新建一个小程序项目。

这里我们新开一个页面demo，同时编译模式调为本页。在app.json文件下添加页面，保存并自动生效。

  "pages": [
    "pages/demo/demo",
    "pages/index/index",
    "pages/logs/logs"
  ],

编写一个简单的小程序页面，进入demo.wxml文件

写入文件>


  
  
  
  提交内容

//本地文件data.txt的内容将显示在这里
{{message}}

进入demo.wxss做简单的样式

/* pages/demo/demo.wxss */
.title{
  height: 80px;
  text-align: center;
  line-height: 80px;
  background-color: #ccc;
}
.form{
  width: 100%;
  background-color: #f8f8f8;
  padding: 0 15px;
  box-sizing: border-box;
}

.form input{
  height: 50px;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
    border-radius: 40px;
}
.form button{
  border-radius: 40px;
  background-color: #ccc;
}

最后，进入demo.js实现逻辑

/**
   * 页面的初始数据
   */
  data: {
    //message用于接收获取到的data.txt文件的内容
    message: "",
    //val接收输入框的内容
    val: ""
  },

  //自定义函数--请求服务器数据
    //url请求的地址，（服务器地址）
    //option 传递的数据，
    //callback 回调函数
  wxAjax: function(url, option, callback) {
    //小程序的内置请求函数
    wx.request({
      url: url,
      data: option,
      success: function(res) {
        //请求成功后执行回调函数
        console.log(option)
        callback && callback(res.data)
      },
      fail: function(err) {
        console.log(err)
      }
    })
  },

  //监听输入框的值
  inp: function(event) {
    //定义变量接收输入的值
    //event为当前触发事件的对象
    let v2 = event.detail.value;
    //赋值
    this.setData({
      val: v2  //把获取到的值，传递给data下的val变量
    })
  },

  //点击写如数据到服务器的文件
  foo: function() {
    //page下的data的val赋值给text
    let text = this.data.val;
    //记录当前对象
    var _this = this;
    //调用请求函数，写入数据到指定的服务器地址  路由"/write"
    _this.wxAjax('http://127.0.0.1:8002/write',{content:text},function(result){
      console.log("下面是请求写入文件成功后返回的内容")
      //result为请求这个地址成功后，返回的数据(写入成功服务器响应200)， content:text  要写入的数据
      console.log(result);  //=>code:200
       //写入成功后，再次读取data.txt的内容
      if(result.code == 200){
        //请求服务器指定的接口数据   路由"/read"  
        _this.wxAjax('http://127.0.0.1:8002/read',{},function(result){
          console.log("下面是读取文件的内容，再次读取文件，更新内容")
          console.log(result );  //这里的result为data.txt的内容
          _this.setData({
            message:result
          });
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //记录this
    let _this = this;
    //请求服务指定的接口数据
    //页面加载就读一次服务器的data.txt文件，写入成功之后再读取一遍，即可实现内容的更新
    this.wxAjax('http://127.0.0.1:8002/read', {}, function(result) {
      console.log("下面是读取文件的内容")
      console.log(result)
      _this.setData({
        message: result
      })
    })
  },

所有的文件编写完成之后，先启动服务器。（要有node环境）

在命令行窗口，输入node demo.js

然后在微信开发者工具，点击编译。

至此，通过服务器简单得读写文件就完成啦！