mpvue学习笔记（二）

6、mpvue入门

      http://mpvue.com/

一、安装

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

二、目录结构

三、语法对比

• 生命周期

         主要用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

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

7、koa是什么

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

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

一、安装

$ 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/便可

 二、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请求

 8、腾讯云

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

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

          

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

          

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

          

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