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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM