微信小程序搭载node.js服务器的简单教程

目录
  • 1.node.js
  • 2.微信小程序
  • 3.发送请求
  • 4.data数据存放在服务端
  • 总结

此文章用到的是用node.js搭载的服务器!

1.node.js

检测电脑是否安装node.js,可以用【 cmd/Power shell 】命令检测,也可以用【git-bash】,这里就用git-bash进行演示,没有git-bash可以安装一下。

node -v

如果有对应的版本号即为已经安装完成!

未安装的附上链接了:

node.js安装 : Download | Node.js  或点击这里下载

Git-BashGit - Downloads 或 点击这里下载

2.微信小程序

在微信开发者工具中,创建一个微信小程序,在创建微信小程序的目录下新建一个文件夹,命名为【server】表示我们的服务器,然后打开文件夹,右键鼠标点击如图

打开后分别输入以下命令

(1)初始化项目,将会自动创建package.json配置文件

npm init -y

(2)安装Express框架,用于快速搭建HTTP服务器

npm install express --save

(3)安装nodemon监控文件修改

npm install nodemon -g

执行完上述命令之后,在该目录下创建一个index.js文件,同时编写以下代码

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())

//处理POST请求
app.post('/',(req,res)=>{
    console.log(req.body)
    res.json(req.body)
})
//处理GET请求
app.get('/',(req,res)=>{
    console.log(req.body)
    res.json(req.body)
})

//监听3000端口
app.listen(3000,()=>{
    console.log('server running | http://127.0.0.1:3000')
})

在刚刚的【Git-Bash-Here】中输入如下命令

nodemon index.js

有以上效果,则表示已经启动成功了。

3.发送请求

如何发送请求,假设我们为点击这个事件【bindtap="play"】进行一个数据请求,在微信小程序项目中的【.js】文件中编写代码

play:function(e){
    wx.request({
    //请求方式(大小写皆可,不写默认为GET请求)
    method:'GET',
    //服务器接口地址
    url:'http://127.0.0.1:3000/',
    //data表示请求的参数
    data:e.detail.value,
    //接口调用成功的回调函数
    //res表示服务器响应信息
    success:function(res){
        console.log(res)
    }
})
}

4.data数据存放在服务端

在微信小程序项目当中我们会在【.js】文件中定义data数据,那么我们现在将data数据放入到我们的服务端中去

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())

app.get('/', (req, res) => {
  // console.log(req.body)
  res.json(data)
})

app.listen(3000, () => {
  console.log('server running at http://127.0.0.`1:3000')
})

var data = {
    //存放你的data数据
}

总结

到此这篇关于微信小程序搭载node.js服务器的文章就介绍到这了,更多相关微信小程序搭载node.js服务器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序访问node.js接口服务器搭建教程

    前言 最近在做微信的应用号小程序开发,小程序的后台数据接口需要https安全请求,所以需要我的nodejs服务器能够提供https的支持,现在就将整个https服务器的搭建过程说一下. 搭建教程如下: 首先,我试了一下以前的过期的证书,在开发者工具里模拟的时候可以正常访问接口,在手机里测试时候微信小程序的wx.request是会报SSL握手失败的错误(request error : request: fail ssl hand shake error),所以只能重新申请一个证书,这里推荐使用阿里

  • 微信小程序搭载node.js服务器的简单教程

    目录 1.node.js 2.微信小程序 3.发送请求 4.data数据存放在服务端 总结 此文章用到的是用node.js搭载的服务器! 1.node.js 检测电脑是否安装node.js,可以用[ cmd/Power shell ]命令检测,也可以用[git-bash],这里就用git-bash进行演示,没有git-bash可以安装一下. node -v 如果有对应的版本号即为已经安装完成! 未安装的附上链接了: node.js安装 : Download | Node.js  或点击这里下载

  • 微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

    本文实例讲述了微信小程序ajax实现请求服务器数据及模版遍历数据功能.分享给大家供大家参考,具体如下: 昨天下载了一个微信小程序的开发者工具,大概看了一下文档,简单的用他的方法实现了ajax请求. 微信小程序文档地址: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl 头部标题和底部tab配置都在 app.json文件中,底部tab位最少两个,最多五个.下面是app.json文件代码和相关注释 { &qu

  • 微信小程序上传图片到php服务器的方法

    本文实例为大家分享了微信小程序上传图片到php服务器的具体代码,供大家参考,具体内容如下 js代码如下 submitPhoto(){ var that = this; wx.uploadFile({ url: 'http://xxx.cn/upload.php', //仅为示例,非真实的接口地址 filePath: imagePath, name: 'imgfile', success: function (res) { var data = JSON.parse(res.data);; con

  • 微信小程序引用公共js里的方法的实例详解

    微信小程序引用公共js里的方法的实例详解 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag

  • 微信小程序实现通过js操作wxml的wxss属性示例

    本文实例讲述了微信小程序实现通过js操作wxml的wxss属性.分享给大家供大家参考,具体如下: 微信小程序如何通过js操作html的css属性: 在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行操作. 如何在微信小程序中在wxml中操作wxss的属性. 实现思路: 通过利用数据绑定实现动态改变样式, 1.在wxxml标签内嵌css属性上绑定js的date值 2.通过js中绑定css属性的date值改变wxml标签内嵌的css属性

  • 微信小程序12行js代码自己写个滑块功能(推荐)

    效果图如下所示 .wxml <view class="jindu" bindtap="cuin"> <view class="xian" style="width:{{towards}}px;"> <view class="yuan" bindtouchmove='touchMove'></view> </view> </view> &

  • 微信小程序 action-sheet 反馈上拉菜单简单实例

    微信小程序 action-sheet 反馈上拉菜单简单实例 看下实现效果图: js var items = ['item1', 'item2', 'item3', 'item4'] var pageObject = { data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function (e) { this.setData({ actionSheetHidden: !this.data.acti

  • 微信小程序 引用其他js文件实现代码

    微信小程序如何引用其他js文件 1.我们先建立一个common.js文件,在common.js编写我们的程序, function myfunc() { console.log("myfunc...."); } module.exports.myfunc = myfunc; 这样暴露接口,这里不暴露是不能引用的, 在文件域js内 var common = require("../../common.js");去链接过来,光链接过来还不行! var app; var c

  • 微信小程序结合mock.js实现后台模拟及调试

    一.创建小程序项目 mock.js 从 https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js 下载 api.js:配置模拟数据和后台接口数据,通过DEBUG = true;//切换数据入口 let API_HOST = "http://xxx.com/xxx"; let DEBUG = true;//切换数据入口 var Mock = require('mock.js') function ajax(data = '

随机推荐