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)