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>
:分成兩部分。1、邏輯部分:除了config對象,其他對應.js
文件;2、配置部分:即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)