本文使用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,打开命令行:

  1. npm install -g express@3
  2. npm install express-generator --save -g

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

  1. mkdir server
  2. cd server
  3. express -e
  4. npm install

安装完成后输入:

  1. npm start

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


3、路由控制

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

  1. server
  2. ├── node_modules
  3. ├── public
  4. ├── routes
  5. ├── view
  6. ├── app.js
  7. └── package.json

我们这里只要关心app.jspublic

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



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

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

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

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

  1. 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. java关于throw Exception的一个小秘密

    目录 简介 throw小诀窍 总结 java关于throw Exception的一个小秘密 简介 之前的文章我们讲到,在stream中处理异常,需要将checked exception转换为unche ...

  2. 【集群实战】Rsync常见错误总结

    1. 服务端指定模块没有对应目录 报错详情: @ERROR: chdir failed rsync error: error startingclient-server protocol (code ...

  3. Django中search fields报错:related Field has invalid lookup: icontains

    models.py 文件 # coding:utf8from django.db import models class Book(models.Model):        name = model ...

  4. vue-cli3.0 gui初体验

    为什么80%的码农都做不了架构师?>>>   介绍 新版的vuecli3.0提供了一个vue ui这个命令,这个命令是做什么的呢,这里引用官网的一段介绍 vue ui 你可以通过 v ...

  5. python selenium(定位方法)

    一.定位方法 注意:元素属性必须唯一存在 #id定位 find_element_by_id() #name定位 find_element_by_name() #class_name定位 find_el ...

  6. .NET Core技术研究-通过Roslyn代码分析技术规范提升代码质量

    随着团队越来越多,越来越大,需求更迭越来越快,每天提交的代码变更由原先的2位数,暴涨到3位数,每天几百次代码Check In,补丁提交,大量的代码审查消耗了大量的资源投入. 如何确保提交代码的质量和提 ...

  7. 【mybatis】IF判断的坑

    http://cheng-xinwei.iteye.com/blog/2008200 最近在项目使用mybatis中碰到个问题 <if test="type=='y'"> ...

  8. MySQL基础总结(三)

    ORDER BY排序 ORDER BY默认是ASC(升序),降序是DESC LIMIT限制查询结果显示条数 LIMIT显示条数 LIMIT偏移量,显示条数 到目前为止有关查询数据的操作(DQL) 更新 ...

  9. Android 8.1 关机充电动画(二)Uboot模式

    system:Android 8.1 platform:RK3326/PX30 uboot kernel Android 8.1 关机充电动画(一)模式选择 Android 8.1 关机充电动画(二) ...

  10. Linux 内核工作队列之work_struct 学习总结

    前言 编写Linux驱动的时候对于work_struct的使用还是很普遍的,很早之前就在阅读驱动源码的时候就看到了它的踪影,根据其命名大概知道了它的具体作用,但是仍然不知所以,同时,伴随出现的还有de ...