本文使用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. KVM 一键批量创建虚拟机

    目录 一.原理 二.基础镜像 2.1.创建基础镜像 2.2. 完善基础镜像 2.3.基础镜像设置权限 3.4 设置 title 3.5.基础镜像XML 三.批量创建机器脚本 四.挂载磁盘多种方式 4. ...

  2. MySQL简介和安装

    一.关系型数据库初识 1.1 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我 ...

  3. ES6特性之:参数默认值

    作为一个开发者,跟进行业步伐是非常需要的,不能躺在现有的知识和经验温床上做美梦.JavaScript的ES2015标准(即我们说的ES6)在2016年已经被广泛应用了,还没开始使用的朋友,赶紧来磨一下 ...

  4. Retrofit的文件上传和进度提示

    2019独角兽企业重金招聘Python工程师标准>>> 1.写一个上传监听的接口: /** * Created by Zzm丶Fiona on 2017/7/31. */ publi ...

  5. ZLEXCOUNT key min max

    1 简介 ZLEXCOUNT 命令用于计算有序集合中指定成员之间的成员数量. 2 语法 2.1 完整示例 zlexcount zset [member1 [member5 2.2 说明 指令 是否必须 ...

  6. 四、CentOS 6.5 上传和安装Nginx

    CentOS 6.5 上传和安装Nginx

  7. CF思维联系–CodeForces - 223 C Partial Sums(组合数学的先线性递推)

    ACM思维题训练集合 You've got an array a, consisting of n integers. The array elements are indexed from 1 to ...

  8. Effective C++学习记录

    Effective C++算是看完了,但是并没有完全理解,也做不到记住所有,在此记录下55个条款及条款末的"请记住". 让自己习惯C++ 条款01:视C++为一个语言联邦 ① C ...

  9. Mysql 远程连接错误排查

    1. 测试本地与远程服务器端口能否连通 telnet  远程IP  端口号 telnet 192.168.1.1 3306 2.如果是在aliyun或者aws云服务器上自建数据库 2.1 在安全组里开 ...

  10. LeetCode--Unique Morse Code Words && Flipping an Image (Easy)

    804. Unique Morse Code Words (Easy)# International Morse Code defines a standard encoding where each ...