mpvue，koa开发微信小程序（一）配置相关

mpvue：使用vue开发小程序

vue init mpvue/mpvue-quickstart my-pro
npm install
npm run dev

Project name 项目名称
wxmp appid 输入微信appID

project.config.json 项目配置文件

 

eslint报错，在package.json -> scripts -> 修改"lint"选项

"eslint --fix --ext .js,.vue src"   
然后 npm run lint  自动修复代码样式
自动修复仍然会有错误的话，
在文件顶部添加注释/* eslint-disable */  eslint将不会检验该文件

Koa：本身就是对node的http模块做了封装，核心内容就是中间件机制，以便扩展

1.新建文件夹 npm init 作为一个空包，作为支持npm的一个空的框架 

2.npm install koa --save 安装koa

3.代码 

const Koa = require('koa')
const app = new Koa()
app.use(async(ctx,next)=>{
  ctx.body = "hello koa"
})

其中ctx就是整个请求的上下文 封装了请求与响应的上下文（request，response）
Next 就是执行下一个中间件   
而app.use() 就是中间件机制 洋葱圈模型
例：

app.use(async(ctx,next)=>{
  ctx.body = "1"
  next()  //执行下一个中间件，没有的话到此终止
  ctx.body += "2"
})
app.use(async(ctx,next)=>{
  ctx.body = "3"
  next()
  ctx.body += "4"
})
app.use(async(ctx,next)=>{
  ctx.body = "5"
  next()
  ctx.body += "6"
})

服务端将输出135642

但是当存在异步操作时，
例：

app.use(async(ctx,next)=>{
  ctx.body = "1" 
  setTimeout(（）=>{
    next()  
  },2000)
  ctx.body += "2"
})
app.use(async(ctx,next)=>{
  ctx.body = "3"
  next()
  ctx.body += "4"
})
app.use(async(ctx,next)=>{
  ctx.body = "5"
  next()
  ctx.body += "6"
})

服务端将输出12
以上代码中的setTimeout并非阻塞了后续，而是2S后网络请求已经结束了。

解决办法：
    1.callback （否）
    2.Promise （链式写法，否）
    3.async+await （同步写法，更方便）

function delay(word){
  return new Promise((reslove,reject)=>{
    setTimeout(()=>{
    reslove("hello" + word)
    },2000)
  })
}
async function start(){
  const word1 = "菜鸡CHL1"
  console.log(word1)
  const word2 = "菜鸡CHL2"
  console.log(word2)
  const word3 = "菜鸡CHL3"
  console.log(word3)
}

start()//每隔2S 打印 '菜鸡CHL1/2/3'

app 就是应用的启动

4.node sever.js 启动服务
5.在koa中使用async+await 异步输出响应

const Koa = require('koa')
const app = new Koa()

function delay(){
  return new Promise((reslove,reject)=>{
    setTimeout(()=>{

    },2000)
  })
}
app.use(async(ctx,next)=>{
  ctx.body = "1"
  await next()  
  ctx.body += "2"
})
app.use(async(ctx,next)=>{
  ctx.body = "3"
  await delay()
  await next()
  ctx.body += "4"
})
app.use(async(ctx,next)=>{
  ctx.body = "5"
  await next()  
  ctx.body += "6"
})

2s后输出135462

经典示例：

新建文件logger.js

module.exports = async(ctx,next)=>{
  const start = new Date().getTime()
  await next() //执行后续所有的中间件
  const end= new Date().getTime()
  
  console.log(
    ctx.request.url,//路由链接
    end-start，//请求时长
    ctx.body.length //请求体长度
  )
}

sever.js使用logger.js

const Koa = require('koa')
const app = new Koa()
const koaLog = require('./logger.js')
app.use(koaLog)

其他所有不变，koaLog.js引进之后已经执行。

koa 路由

1.简单实现

const Koa = require('koa')
const app = new Koa()
app.use(async(ctx,next)=>{
  console.log(ctx)
  if(ctx.request.url=="/"){ctx.body = "根目录"}
  else if(ctx.request.url=="/cao1"){ctx.body = "在cao1目录下打印猪1皮"}
  else if(ctx.request.url=="/cao2"){ctx.body = "在cao2目录下打印猪2皮"}
})

2.安装 koa-router
npm install koa-router --save代码：

const Koa = require('koa')
const Router = require('koa-router')
const app = new Koa()
const router= new Router()

router.get('/',(ctx,next)={
  ctx.body = "根目录"
})
router.get('/cao1',(ctx,next)={
  ctx.body = "在cao1目录下打印猪1皮"
})

app
  .use(router.routes())  //注册路由
  .use(router.allowedMethods()); //get post 也注册进来