wepy框架構建小程序(1)

wepy框架構建小程序(1)

基本操做:css

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

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

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

# 跑項目
npm run dev

vscode 編輯器設置

在編輯器設置中設置:vue

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

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

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

定義事件(重點)

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

原生小程序的keys:json

  • 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端同樣redux

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

.wpy文件

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

上面3個標籤都支持srclang屬性:

  • 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,用法和VuexmapState同樣
// 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,來實現mutationsactions。若是不喜歡這個能夠本身換redux-thunk,均可以,這些內容都屬於redux(異步action),有本身的實現方案就行,你甚至都不用也能夠。
  • 關於actions,若是是異步的,用test2的方式,同步的直接一個type字符串或者一個action對象

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

  • onLoad
  • onShow
  • onReady
  • onHide
  • onUnload

其中組件和頁面公用onLoadonShow

還要區分三大實例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)
相關文章
相關標籤/搜索