本文使用node.js和express来为小程序搭建服务器。node.js简单说是运行在服务端的javascript;而express是node.js的一个Web应用框架,使用express可以非常简单快捷地搭建起网站。


0、背景

官方要求小程序的包最多不能超过2M,减小小程序包大小最有效的方法就是将本地图片上传至服务器。

本文搭建服务器,以小程序从后台获取图片为例,实现小程序与后台的通信。

小程序采用这篇教程mpvue从一无所有开始仿大众点评小程序中的demo(但图片均移动到了public/images),

可以从这里下载项目文件


1、开发准备

要搭建小程序后台有两种选择

(1)购买云服务器。详细可见这里

(或直接使用云开发,云开发是小程序在2018.9新增的功能,详细可见这里

(2)使用代理服务器,可实现搭建本地服务器,进行本地开发调试。

例如使用charels进行反代理,教程可见:mac版win版

注意映射的线上域名和服务器端口要与实际设置的一致。比如这里采用的线上域名为https://wx.test.cn,搭建的服务器端口为localhost:3000


2、安装Express

按以上两种方法搭建好服务器后,在服务器上安装好Node.js,打开命令行:

npm install -g express@3
npm install express-generator --save -g

选择一个工作目录,打开命令行运行:

mkdir server
cd server
express -e
npm install

安装完成后输入:

npm start

此时便用Express搭建了一个服务器并监听端口3000。可以用浏览器打开localhost:3000或https://wx.test.cn/进行访问。


3、路由控制

初始化项目后,一般工程结构如下

server
├── node_modules
├── public
├── routes
├── view
├── app.js
└── package.json

我们这里只要关心app.jspublic

  • app.js是工程的入口文件,待会我们在这里编写路由控制;
  • public是存放各种资源的文件夹,这里可以保存image、css、javascript等文件



    (1)首先我们将从这里下载项目文件中的public文件夹,与原public文件夹合并;

    (2)然后打开app.js,在app.use('/users', usersRouter);后添加
app.get('/public/images/*', function (req, res) {
res.sendfile( __dirname + "/" + req.url );
console.log("Request for " + req.url + " received.");
})

这段命令的意思是当客户端用get命令请求/public/images/下的资源时,服务器将对应的图片资源传送过去。

(3)中断原先的进程,再次运行:

npm start

我们可以在浏览器上打开网址https://wx.test.cn/public/images/my/user.png,测试是否可以请求到图片。

将小程序中原先指向本地图片的链接均改为指向服务器的图片。



此时使用微信开发者工具再次打开小程序,即可看到完整的页面。同时也可以进行预览发布

nodejs+express搭建小程序后台服务器的更多相关文章

  1. 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

  2. [NodeJs] 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

  3. express搭建简易web的服务器

    express搭建简易web的服务器 说到express我们就会想到nodejs,应为它是一款基于nodejs平台的web应用开发框架.既然它是基于nodejs平台的框架那么就得先安装nodejs. ...

  4. 微信小程序后台获取用户的opeid

    1.微信小程序后台获取登录用户的openid,首先微信小程序将code传给后台服务器 wx.login({ success: function (res) { var code = res.code ...

  5. Django微信小程序后台开发教程

    本文链接:https://blog.csdn.net/qq_43467898/article/details/83187698Django微信小程序后台开发教程1 申请小程序,创建hello worl ...

  6. thinkphp开发微信小程序后台流程

    thinkphp开发微信小程序后台流程,简单分享一下微信开发流程 1,注册微信小程序账号 2,注册好后,登陆微信小程序,下载微信小程序开发工具 3,用thinkphp开发企业后台,前台数据用json返 ...

  7. 小程序后台隐藏后 socket 无法重新连接

    小程序后台隐藏后 socket 无法重新连接 连接时 fail 回调函数的事件参数:connectSocket:fail:jsapi has no permission,event=createSoc ...

  8. 使用免费 mongodb数据库 + 免费node.js服务器搭建小程序接口

    由于微信的小程序只支持不带端口的域名接口,不支持IP地址和接口,所以我们需要映射到80端口并绑定备案过的域名才能被微信小程序访问到.简单点就是接口需要 https 协议才行,找了许久的免费的数据库与n ...

  9. NodeJS+Express+MySQL开发小记(2):服务器部署

    http://borninsummer.com/2015/06/17/notes-on-developing-nodejs-webapp/ NodeJS+Express+MySQL开发小记(1)里讲过 ...

随机推荐

  1. Querying for Event Information

    https://docs.microsoft.com/zh-cn/windows/desktop/EventLog/querying-for-event-source-messages #includ ...

  2. 备忘录模式 (c++实现)

    模式定义 备忘录(Memento): 在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可以将该对象恢复到原先保存的状态. 模式动机 备忘录模式比较适用于功能比较复 ...

  3. Blazor WebAssembly 3.2.0 正式起飞,blazor 适合你吗?

    最近blazor更新很快,今天在官方博客上发布了Blazor WebAssembly 3.2.0 RC:https://devblogs.microsoft.com/aspnet/blazor-web ...

  4. 家用PC机打造VSphere5.1 测试环境:之部署VCenter Server 5.1

    家用PC机打造VSphere5.1 测试环境前言:实践出真知,同样学习VMware VSphere 的朋友,也需要不断的测试总结,再测试再总结只有不断的积累才能学好,但是动辄几万的服务器不是所有朋友都 ...

  5. 使用Xamarin开发即时通信系统 -- 基础篇(大量图文讲解 step by step,附源码下载)...

    如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!而且,Xamarin已经被微 ...

  6. CompressIt

    结构 压缩软件的核心在于压缩算法.基于Huffman编码的压缩算法思路: 以二进制方式读取源文件,按照每8bits作为一个字符: 统计每个字符的出现频率即为叶子结点的权值,按照Huffman算法得到每 ...

  7. 数据库SQL语言从入门到精通--Part 2--MySQL安装

    数据库从入门到精通合集(超详细,学习数据库必看) 首先给出的简单安装方式,文末给出标准的安装方式. 第一步下载我的压缩包 链接:https://pan.baidu.com/s/1EE40dU0j2U1 ...

  8. Codeforce-Ozon Tech Challenge 2020-D. Kuroni and the Celebration(交互题+DFS)

    After getting AC after 13 Time Limit Exceeded verdicts on a geometry problem, Kuroni went to an Ital ...

  9. 图论-网络流-Dinic (邻接表版)

    //RQ的板子真的很好用 #include<cstdio> #include<cstring> #include<queue> #define INF 1e9 us ...

  10. HDU-1857 畅通工程再续

    畅通工程再续 Problem Description 相信大家都听说一个"百岛湖"的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现.现在政府决定 ...