mpvue學習筆記（一） 基礎介紹

1、 小程序環境搭建

後臺地址：https://mp.weixin.qq.com/

文檔地址：https://developers.weixin.qq.com/miniprogram/dev/

註冊帳號 AppId

2、 小程序開發入門

一、 文件結構

 

      全局配置 - 項目全局的入口和配置：

•   app.js 　　　　

　　生命週期:
　　App({
   　　onLaunch: function(options) {
   　　　　// 小程序啓動執行 初始化配置         
   　　},
　　　　onShow: funtion(options) {
　　　　　　// 小程序顯示執行
　　　　},
　　　　onHide: function() {
　　　　　　// 小程序隱藏執行
　　　　},　　
　　　　onError: function(msg) {
　　　　　　// 小程序報錯執行
　　　　},
　　　　// 全局數據
　　　　globalData: 'I'm golbal data!'
　　})

　　　全局getApp函數獲取實例

　　　全局惟一

•   app.json 配置頁面及窗口樣式

1. pages 必填 設置頁面
2. windows 設置小程序的狀態欄、導航條、標題和窗口背景色
3. tabBar 設置底部導航樣式

•   app.wxss 相似css，多了個rpx單位適配
•   project.config.json 整個項目的配置

二、 經常使用api

      框架提供不少api，方便調用微信原生的能力

• wx.request 發送請求
• wx.previewImage 預覽圖片 
• wx.setStorage|getStorage 本地存儲
• location 地理位置
• scanCode 掃碼
• showToast 顯示提示信息
• 設置導航條
• 獲取用戶信息

1. 不須要登陸 只要暱稱和頭像
2. 須要登陸的 在後臺校驗，拿到openId

• 頁面導航navigateTo, redirectTo, switchTab
• 動畫、震動、截屏、亮度
• 音樂、視頻、地圖、文件
• 加速計、羅盤、wifi、NFC等

三、 經常使用組件

      提供了一些基礎組件，也能夠自定義組件

• 視圖　如：view 相似div
• 表單
• 導航  如：navigator 相似a標籤超連接
• 媒體
• 開放能力  如：web-view 能夠內嵌一個網頁

3、小程序語法缺點

爲何咱們須要vuejs

• 不能使用npm，使用第三方包的方式太原始
• 須要爲小程序單獨開發代碼，不能和web系統重用
• 開發效率和學習成本（小程序特有的語法）

4、ES6/7入門學習

一、ES6是什麼

• 新的Javascript語法標準

1. 2015年6月正式發佈
2. 使用babel語法轉換器，支持低端瀏覽器
3. 流行的庫基本都基於ES6構建，React、Vue默認使用ES6新語法開發

二、ES6新語法講解，做用域、字符串、函數

• ES6裏都有什麼

1. 塊級做用域、字符串、函數擴展

• • 做用域： let和const
  • 字符串：

　　　　　　1）使用反引號`${變量}`直接寫變量

　　　　　　2)  多行字符串

　　　　　　3）告別+拼接字符串

• • 函數擴展

　　　　　　1）參數默認值

　　　　　　2）箭頭函數  簡寫的最大做用是能夠消除this引用的問題

例：
const double = (num) => num *2
double(3) // 6
PS: 若是隻有一個參數，括號能夠省略

const add = (num1, num2 = 1) => {
　　return num1 + num2
}
add(3) // 4
add(3, 5) // 8
PS: 參數中至關於給num2一個默認值

　　　　　　3）展開運算符

例：
let arr = [5, 6]
add(...arr) // 11

也能夠作數組的合併：
[1, 2, 3, ...arr] // [1, 2, 3, 5, 6]

　　  2. 對象擴展、解構

• • Object擴展 

　　　　　　1）Object.keys、Object.values、Object.entries

例：
const key = 'job'
const obj = {
　　key,
　　num: 1,
　　str: 'mm',
　　work() {},
　　[key]: 'fe',
　　[key + 'World']: 'ffe'
}
obj // {
　　　　　　key: 'job',
　　　　　　num: 1,
　　　　　　str: 'mm',
　　　　　　work() {},
　　　　　　job: 'fe',
　　　　　　jobWorld: 'ffe'
　　　　}

　　　　　　2）對象方法簡寫，計算屬性

　　　　　　3）展開運算符（不是ES6標準，可是babel也支持）

• • 解構賦值  函數也能夠多返回值了

　　　　　　1）數組解構

例：
let arr = [1, 2]
let [num1, num2] = arr
num1 // 1
num2 // 2

　　　　　　2）對象解構

例：
const obj = {
　　type: 'aaa',
   name: 'bbb'
}
const {type, name} = obj
console.log({type, name})  // obj     

　　  3. 類、模塊化等

三、經常使用ES6代碼片斷

• Array filter() 方法

例：(簡寫)
let ages = [32, 33, 16, 40]
console.log(ages.filter(age => age > 18).length) // 3

四、模塊化

      ES6中自帶了模塊化機制，告別seajs和requirejs

• import, import {}
• export, export default
• node如今還不支持，還須要用require來加載文件

例：
module.js中:
export const name = 'carol123'
index.js中：
import {name} from './module'
console.log(name) // carol123
PS: 這種方式引入時須要用{}

module.js中：
export default function() {
　　console.log('vuejs 還不錯')
}
index.js中：
import sayHi from './module'
sayHi() // vuejs 還不錯
PS: 這種default方式不須要用{}
也能夠直接export對象：
module.js中：
export default {
　　name: 'aaa'
}
index.js中：
import modObj from './module'
console.log(modObj) // {name: 'aaa'}

 五、其餘不在ES6範圍內，但被babel支持的特性（須要安裝插件）

• 對象擴展符...
• 裝飾器
• async await (ES7) 

5、Vuejs是什麼

      三大框架之一，良好的生態

一、vue-cli腳手架工具

$ npm install -g vue-cli
$ vue init webpack my-project(都用默認值便可)
$ npm install
$ cd my-project
$ npm run dev

二、單文件組件+聲明式渲染

三、生命週期

四、狀態管理

五、響應式管理