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

一、 小程序環境搭建

后台地址：https://mp.weixin.qq.com/

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

注冊賬號 AppId

二、 小程序開發入門

1、 文件結構

 

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

•   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 整個項目的配置

2、 常用api

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

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

1. 不需要登錄 只要昵稱和頭像
2. 需要登錄的 在后台校驗，拿到openId

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

3、 常用組件

      提供了一些基礎組件，也可以自定義組件

• 視圖　如：view 類似div
• 表單
• 導航  如：navigator 類似a標簽超鏈接
• 媒體
• 開放能力  如：web-view 可以內嵌一個網頁

三、小程序語法缺點

為什么我們需要vuejs

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

四、ES6/7入門學習

1、ES6是什么

• 新的Javascript語法標准

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

2、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. 類、模塊化等

3、常用ES6代碼片段

• Array filter() 方法

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

4、模塊化

      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'}

 5、其他不在ES6范圍內，但被babel支持的特性（需要安裝插件）

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

五、Vuejs是什么

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

1、vue-cli腳手架工具

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

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

3、生命周期

4、狀態管理

5、響應式管理