mpvue学习笔记（二）

六、mpvue入门

      http://mpvue.com/

1、安装

$ vue init mpvue/mpvue-quickstart my-project
$ cd my-project
$ npm install
$ npm run dev

2、目录结构

3、语法对比

• 生命周期

         主要用vue的生命周期，如created 创建初始化；vue不支持的 用小程序自带的 如onPullDownRefresh

• 模板语法

　　  computed+模板+熟悉的html

1. 动态style和class使用计算属性返回字符串
2. v-if和v-for用法不变
3. 表单v-model全支持    

• 模板

         除了动态渲染，别的都支持（如：插槽slot不太好用）

1. .vue单文件组件
2. 小程序自带组件也可以用
3. 自带组件事件绑定也使用vue的，如@click

• 新增页面 - 需要重新build以生成新的app.json

4、vue语法+小程序自带组件+小程序Api

七、koa是什么

        基于nodejs平台的下一代web开发框架

1. Express原班人马打造，更精简
2. Async+await处理异步
3. 洋葱圈型的中间件机制

1、安装

$ mkdir koa-demo
$ cd koa-demo
$ npm init
$ npm install koa --save
在项目中新建server.js:　　　　

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

　　app.use(async(ctx, next) => {
　　　　ctx.body = 'hello koa'
　　})

　　app.listen(3000)
   
   PS:

　　 1.ctx是什么？

      是我们访问的上下文，封装了一个完整的请求request和响应response

　　 2.next是什么？

　　　是下一个中间件

     

　　　app.use就相当于一个中间件机制，每个中间件都相当于一个环，网络请求会从每个环穿过去，所以每个环就进入两次，先进入中间件1再进入执行下一个中间件2，走到最外层又从中间件2返回到中间件1，所以形成一个洋葱圈模型，所以我们能够在每个中间件内部分别获取到网络请求的之前和请求之后的内容，比如：想做些时间的统计，就是非常方便的。

例：
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
PS: 此处的next()的作用就是为了去执行下一个中间件

   3.app是什么？

     启动应用

   4.async+await处理异步

例1：
function delay(word) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('hello' + word)
        }, 2000)
    })
}
async function start() {
    const word1 = await delay('孙悟空')
    console.log(word1)
    const word2 = await delay('猪八戒')
    console.log(word2)
    const word3 = await delay('沙悟净')
    console.log(word3)
}
start()

// 打印结果：每隔2秒打印 hello孙悟空 hello猪八戒 hello沙悟净

例2：
新建koa-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)

　　}

  在server.js中引入： 

　　const Koa = require('koa')

　　const app = new Koa()

　　const koaLog = require('./koa-logger')

　　app.use(koaLog)

 

  // 打印结果：2003 6

  $ node server.js

　直接访问http://localhost:3000/即可

 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('/zhuzhu', (ctx, next) => {
　　　　ctx.body = '我是子页面'
　　})

　　　app

  　　.use(router.routes())

  　　.use(router.allowedMethods())

 

　PS：也可以post请求

 八、腾讯云

1、注册和上传测试代码流程

• 先在小程序后台开通腾讯云

          

• 开通后在下载的nodeJs测试代码wafer2-quickstart-nodejs-master中将server/config.js的appId修改为自己的，然后把整个server文件夹复制到现有项目中

          

• 在项目的project.config.json文件中添加新的配置"qcloudRoot": "./server/"

          

• 打开开发者工具，点击腾讯云，选择‘上传测试代码’，首次上传选择‘模块上传’，确定后部署。