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/"

          

• 打開開發者工具，點擊騰訊雲，選擇‘上傳測試代碼’，首次上傳選擇‘模塊上傳’，肯定後部署。