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个标签都支持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)