1. 程式人生 > >Vue+koa2開發一款全棧小程序(1.課程介紹+2.ES6入門)

Vue+koa2開發一款全棧小程序(1.課程介紹+2.ES6入門)

... index 定義變量 打包 npm tps 管理系統 中心 概述

1.課程介紹

1.課程概述

1.做什麽?

Vue+koa2開發一款全棧小程序

2.哪些功能?

個人中心、圖書列表、圖書詳情、圖書評論、個人評論列表

3.技術棧

小程序、Vue.js、koa2、koa-router、mysql

2.課程亮點

1.項目前後端分離開發

Vue+koa2開發一款全棧小程序

2.完整流程,一步不少

註冊小程序賬號,前後端開發,打包,正式上線

2.小程序環境搭建

1.後臺地址:

https://mp.weixin.qq.com/

2.文檔地址:

https://developers.weixin.qq.com/miniprogram/dev/index.html

3.開發工具下載地址:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1.賬號註冊:

1.立即註冊

2.郵箱激活+身份驗證+手機驗證碼+微信掃碼認證

3.進入後臺管理系統

4.填寫小程序信息

5.下載開發者工具

6.在自己的電腦上安裝微信開發者工具

7.掃碼登錄開發者工具,選擇小程序,新建個項目,勾選【建立普通快速啟動模板】,點擊確定。

8.在微信公眾平臺選→開發→小程序開發,可以看到一些簡易教程

2.小程序開發入門

1.文件結構

技術分享圖片

2.常用api

https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html

3.常用組件

3.為什麽要vue.js?

1.小程序原生不能使用npm,使用第三方包的方式太原始

2.需要為小程序單獨開發代碼,不能和web系統重用

3.開發效率和學習成本(小程序特有的語法)

3.ES6入門學習

1.ES6是什麽?

  JavaScript新的語法標準,現在流行的庫,基本上都基於ES6構建

2.ES6新語法講解,作用域,字符串,函數

1.定義變量用let代替var,let是塊級作用域

2.Const定義不可修改的變量

3..作用域和{}

const name=‘woniu‘
console.log(`hello ${name} !!!`)

4.箭頭函數

const double
=(num)=>num*2 console.log(double(3)) //6

const add=(num1,num2)=>{
  let num2=num2||1 //默認num2是1  
  return num1+num2  
}

console.log(add(3,4) //7
console.log(add(3)) //4

let arr=[5,6]

console.log(add(...arr) //11  用...可以將一個數組的每個元素取出來

console.log([1,2,3,...arr]) //[1,2,3,5,6]  ...可以做數組的拼接

5.對象的擴展

const key=‘job‘
const obj={
  num:1,
  str:‘woniu‘,
  work(){
  },
  [key]:‘fe‘,
  [key+‘world‘]:‘fei‘
}

console.log(obj)//{num:1,str:"woniu",work:f work(), job:"fe",jobworld:"fei"}

6.解構賦值

let arr=[1,2]

let[num1,num2]=arr

console.log(num1,num2)//1 2

Vue+koa2開發一款全棧小程序(1.課程介紹+2.ES6入門)