wepy框架構建小程序（1）

wepy框架構建小程序（1）

基本操做：

# 安裝腳手架工具
npm install wepy-cli -g

# 建立一個新的項目
npm init standard myproject

# 進入新項目文件夾和安裝依賴
cd myproject && npm install

# 跑項目
npm run dev

vscode 編輯器設置

在編輯器設置中設置：

{
  // 小程序設置爲false
  "vetur.validation.template": false
}

因爲編輯器的設置有分用戶設置和工做區設置，用戶設置就是全局的基本設置，因爲上面的功能在Vue項目須要開啓，因此上面的設置代碼應該在工做區設置中設置。

簡單點說就是，用戶設置是全局設置，而工做區設置就是當前打開的文件夾有效，也就是局部的設置。

定義事件（重點）

事件在web端是很重要的部分，這裏要搞得清清楚楚。
事件分捕獲階段、事件觸發點、冒泡階段。
咱們用的最多的是冒泡階段。原生小程序定義事件的方式是鍵值對的方式key:value。

原生小程序的keys:

• bind：冒泡階段，對應web端的on
• catch：用這個key來定義事件不會冒泡，至關於web端的event.stopPropagation()
• capture-bind：這個key用來定義捕獲階段，不像web端，咱們要兼容IE，只考慮冒泡，由於IE老版本沒有捕獲
• capture-catch：這個key在觸發事件後，終止捕獲，因爲是捕獲 -> 觸發事件 -> 冒泡，因此終止捕獲也終止了冒泡

bindtap：在小程序中用tap替代click，移動端用tap是避免點擊事件的300ms延時形成的bug，tap觸發更快。
bind:tap：這個方式也能夠，就是key:value方式定義事件，value就是事件名，其餘事件名大多和web端同樣

wepy的事件定義：

• bindtap替換@tap
• catchtap替換@tap.stop
• capture-bind:tap替換@tap.capture
• capture-catch:tap替換@tap.capture.stop

這些語法就是Vue的語法，就是要區分這個key:value，key是什麼，value是什麼

安裝Sass

npm i wepy-compiler-sass --save-dev

而後在<style lang='scss'>

.wpy文件

• <template>：對應.wxml
• <script>：分紅兩部分。一、邏輯部分：除了config對象，其餘對應.js文件；二、配置部分：即config對象，對應.json
• <style>：對應.wxss
• 注意：因爲config對象對應.json，可是能夠是原生js對象，最後會格式化成JSON

上面3個標籤都支持src和lang屬性：

• src：引入外聯的文件，使用了這屬性，內聯的代碼無效
• lang：有多個值

各個標籤的lang：

• style：默認值css、可能值css、less、scss、stylus、postcss
• template：默認值wxml、可能值wxml、xml、pug
• script：默認值babel、可能值babel、TypeScript

狀態管理器： redux + wepy-redux

先用redux生成store

import { createStore, combineReducers, applyMiddleware } from 'redux'
import promiseMiddleware from 'redux-promise'
import * as reducers from './reducer'

// 生成的store和React中的redux生成方法如出一轍
const store = createStore(
  combineReducers(reducers),
  applyMiddleware(promiseMiddleware)
)

React注入store是經過<Provider>，而wepy-redux注入store的方法用setStore(store)。
wepy有3中實例App實例、Page實例、Component實例，App只能有一個，注入store就是要在app.wpy中注入

import { setStore } from 'wepy-redux'

// app.wyp
setStore(store)

• setStore(store)要在wepy.app的頁面注入

而後就能夠在任何一個組件中使用：

import { connect } from 'wepy-redux'

  @connect({
    num(state) {
      return state.counter.num
    },
    inc: 'inc'
  }, {
    addNum: INCREMENT,
    asyncInc
  })

• connect(states, actions)
• states：能夠是數組Array或者對象Object，用法和Vuex的mapState同樣

// states爲數組，元素只能是字符串，和`vuex`的用法同樣
@connect(['num', 'inc'])

• actions：只能是對象Object，對象的value能夠是字符串(action.type)或者函數

@connect(null, {
  test: 'TEST',
  test2: (...args) => ({ type: 'TEST', payload: args }),
  test3: { type: 'TEST', payload: 1 }
})

// 對於value是字符串，`test(1)`至關於
dispatch({
  type: 'TEST',
  payload: 1
})

// 調用`test(1, 2)`至關於
dispatch({
  type: 'TEST',
  payload: [1, 2]
})

// 調用`tes2()`至關於
dispatch(val.apply(store, args)) // this 指向store 可是自定義的函數要返回符合 { type: 'TEST', payload }的`action`對象

// 調用`test3()`
dispatch({ type: 'TEST', payload: 1 })

• 最主要的是dispatch仍是redux的dispatch，搞成這樣是想把dispatch搞成和vuex的dispatch同樣使用，能夠支持異步（redux中本來的dispatch是同步的）
• 這裏的dispatch是經過middleware修改了redux原生的dispatch，使用了redux-promise，這樣dispatch就能夠支持異步以及promise
• wepy還使用了redux-actions，來實現mutations和actions。若是不喜歡這個能夠本身換redux-thunk，均可以，這些內容都屬於redux（異步action），有本身的實現方案就行，你甚至都不用也能夠。
• 關於actions，若是是異步的，用test2的方式，同步的直接一個type字符串或者一個action對象

頁面生命週期鉤子、組件生命週期鉤子

• onLoad
• onShow
• onReady
• onHide
• onUnload

其中組件和頁面公用onLoad和onShow

還要區分三大實例App實例、Page實例、Component實例

組件間通訊

小程序的組件間通訊和web端的組件是有分別的，小程序的組件，二者通訊主要經過廣播的方式。

• $broadcast：事件是由父組件發起，全部子組件都會收到此廣播事件，除非事件被手動取消
• $emit：事件發起組件的全部祖先組件會依次接收到$emit事件
• $invoke：是一個頁面或者組件對另外一個組件中的方法的直接調用

// 全部在當前頁面或者組件中的組件，若是events定義了changeState事件，就會調用其回調函數，以及傳入參數
this.$broadcast('changeState', arg1, arg2, ...)

// 全部在當前組件的父組件或者父頁面中，若是events定義了getId事件，就會調用其回調函數，以及 傳入參數11
this.$emit('getId', 11)

// 調用當前頁面或者當前組件中的組件AddNumber的方法，方法add定義於methods中，以及傳入參數2，相對於AddNumber.methods.add(2)
this.$invoke('AddNumber', 'add', 2)