本文使用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. [Inno Setup] Do not show application version in “Program and Features” control panel

    Set AppVersion empty. But, then you have to set the AppVerName. Depending on your needs either set i ...

  2. windows下怎么同时使用python2和3

    windows命令行下,怎么能够自由的切换python2和3呢?当然不是切换目录!很多帖子告诉你,将python2目录下的python.exe文件改成python2.exe,pyhton3目录下的py ...

  3. java中CompletionService的使用

    java中CompletionService的使用 之前的文章中我们讲到了ExecutorService,通过ExecutorService我们可以提交一个个的task,并且返回Future,然后通过 ...

  4. python django mysql配置

    1    django默认支持sqlite,mysql, oracle,postgresql数据库.  <1> sqlite django默认使用sqlite的数据库,默认自带sqlite ...

  5. Java和php中的try-catch分析

    为什么80%的码农都做不了架构师?>>>   描述:对一个健壮的系统来讲,异常处理是必不可少的一部分,针对异常的管理,主要就是异常的捕获和处理操作,然而在php中使用try-catc ...

  6. 移动端上传图片(引入exif-js,图片被压缩为base64)

    <template> <div class="vue-box"> <img :src="imgUrl" alt="&qu ...

  7. Java之JVM(初学者)

    学习Java的第一次总结 1.Java程序的编译和执行 通过上图,我们轻易得出java执行过程:由javac编译为字节码文件,通过JVM转换为底层操作系统可识别的命令操作. 注意:①Java跨平台的始 ...

  8. 图论--2-SAT--POJ 3905 Perfect Election

    Perfect Election Time Limit: 5000MS         Memory Limit: 65536K Total Submissions: 964         Acce ...

  9. Springboot-WebFlux实现http重定向到https

    1 简介 Spring WebFlux是一个新兴的技术,Spring团队把宝都压在响应式Reactive上了,于是推出了全新的Web实现.本文不讨论响应式编程,而是通过实例讲解Springboot W ...

  10. 7) 项目准备流程 和 django权限六表

    一.项目准备 1. 创建django项目 2. 创建数据库 —— init文件中声明mysql —— settings中配置数据库 import pymysql pymysql.install_as_ ...