基本操做:css
# 安裝腳手架工具 npm install wepy-cli -g # 建立一個新的項目 npm init standard myproject # 進入新項目文件夾和安裝依賴 cd myproject && npm install # 跑項目 npm run dev
在編輯器設置中設置:vue
{ // 小程序設置爲false "vetur.validation.template": false }
因爲編輯器的設置有分用戶設置
和工做區設置
,用戶設置
就是全局的基本設置,因爲上面的功能在Vue項目
須要開啓,因此上面的設置代碼應該在工做區設置中設置
。web
簡單點說就是,用戶設置
是全局設置,而工做區設置就是當前打開的文件夾有效
,也就是局部的設置。vuex
事件在web端是很重要的部分,這裏要搞得清清楚楚。
事件分捕獲階段
、事件觸發點
、冒泡階段
。
咱們用的最多的是冒泡階段
。原生小程序定義事件的方式是鍵值對的方式key:value
。npm
原生小程序的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是什麼數組
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個標籤都支持src
和lang
屬性:
src
:引入外聯的文件,使用了這屬性,內聯的代碼無效lang
:有多個值各個標籤的lang
:
css
、可能值css、less、scss、stylus、postcss
wxml
、可能值wxml、xml、pug
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 })
vuex
的dispatch同樣使用,能夠支持異步(redux中本來的dispatch是同步的)middleware
修改了redux原生的dispatch,使用了redux-promise
,這樣dispatch
就能夠支持異步以及promiseredux-actions
,來實現mutations
和actions
。若是不喜歡這個能夠本身換redux-thunk
,均可以,這些內容都屬於redux(異步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)