1 项目的创建

1.1 全局安装wepy-cli脚手架   

    npm install wepy-cli -g 

1.2 快速生成项目

    1.7以后 

        wepy init standard my-project

    1.7之前

        wepy new my-project

安装选项

1.3 安装依赖

    进入项目并安装依赖

       cd my-project
       npm install

2 新建项目跑起来的时候，遇见的问题

    一定要把项目跑起来，微信开发者工具才能看到视图，否则会报入口app.json找不到。

   wepy build --watch

    开启时会报，extra semi类似的错误，因为开启了eslint，默认不需要分号，可以在.eclintrc.js里面忽略semi的检查，修改之后，重新build才会生效。

3 项目的结构

项目结构

    ① dist
        build之后存放文件的位置，也就是微信开发者工具读取的文件夹。

    ② src
        componets：存放组件
        mixins：混合组件，就是公共方法的存放地址
        pages：页面
        store：state的存放地址（本项目引入了redux,也可以引入mobx）
        project.config.json：小程序项目配置文件
        index.template.html：web页面的入口文件。

    ③ app.wpy
        小程序的入口文件，整个项目的入口，原生app.json配置项在这里配置。

4 小程序的入口文件app.wpy    

    原生小程序要求app实例必须有3个文件，app.js / app.wxss / app.json。wepy将3个文件整合成一个app.wpy。包括小程序逻辑、公共配置、公共样式。

小程序实例

在page页面中，可以使用this.$parent来访问小程序实例。customData自定义数据、customFunction自定义方法。但是，是能在脚本里调用，想在template里使用，只能赋值给组件内的变量

小程序实例内容调用

4.1 config：小程序全局基础配置。

           pages配置项：

pages数组

            windows配置项：

window对象

        tabBar配置项：
            特殊声明：位置是top的时候，不能配置icon。icon的地址必须是相对地址。

tabBar

4.2 globalData 全局数据

globalData

 在页面调用全局数据的时候：

        this.$parent.globalData.name

   调用全局方法同上。要用$parent

5 wepy扩展

pages文件夹里的文件都是一个页面的入口文件，后缀名为.wpy。一个文件包含了的wxml / js /  less

5.1 wepy.page  

       原生小程序要求page实例必须有4个文件，page.json / page.wxml / page.js / page.wxss，4个文件除后缀名外，名称必须相同。在wepy中整合成一个文件page.wepy，包含页面结构、页面配置、页面逻辑、页面样式。

page对象配置项

page实例：如下

page实例

注意：

    1.生命周期函数、自定义方法和dom绑定的事件的定义，都是fun () {}函数形式。其他都是 name = {}的对象形式。

    2.WePY中的methods属性只能声明页面wxml标签的bind、catch事件，不能声明自定义方法，自定义方法与methods同级。methods里面的方法是do something。自定义方法大多是return something.

5.2 wepy.components

组件实例不需要config和生命周期函数，其他的与页面实例大致相同。组件实例继承自wepy.components

组件实例

组件实例被引入的时候，要在components配置项里，给一个唯一的组件ID名字。尽可能不要重名，不然两个组件公用一个实例，会引起连带改变的后果。

5.3 总结

各自的实例声明

6 mixins

mixins在src文件夹下，混合组件。就是类似于一个公共方法库 。

6.1 引入

引入

6.2 插入

6.3 使用

    在mixins里面的方法，都可以通过this.fun进行调用。在mixin里面定义的钩子函数，会自动打包到页面文件里，在正确的时候进行调用。但是在dom上绑定的事件，要写在methods里面。minxin继承自wepy.mixin

示例

7 组件的循环渲染

如果需要循环渲染组件，必须要借助repeat标签  ：  

循环渲染组件 子组件访问父组件传入的值

可以再子组件内，要求传入字段的类型，使用props字段进行约束

字段类型约束

8 computed和watch 

8.1 computed

计算属性，有输入值、返回值的属性 。访问方法同data 。

computed定义

缺点：不是对单一的绑定数据，进行计算。而是，data里面任何数据的改变都会触发一次computed。有点耗性能吧。因为可能计算属性不依赖的数据改变了，那么计算属性也会重新计算一遍。

8.2 watcher监听器

    在被监听属性改变的时候，进行一些逻辑处理，做一些事，不是返回一个值。名称必须与监听的属性名一致。

watch定义

在定义的时候是watch而不是watcher。

注意：好像每次改变data数据的时候，都要调用一下this.$apply();

9 父子组件通信

9.1 静态传值props

        静态传值，就只传一个字符串，对，不是绑定data里面的值，只是传个字符串才叫静态传值

静态传值必须是常量 静态props

9.2 动态传值以及双向绑定

9.2.1 父组件 -> 子组件的单向数据绑定

    就绑定一个data里面的值就好了。父组件改了，子组件也就改了

父子组件的数据结构

不加任何修饰符和属性，那么子组件只在初始化的时候渲染父组件传入的属性，之后父组件在改变，子组件也不会重新渲染。

单向静态

9.2.2 父组件->子组件的数据绑定

       加上.sync修饰符，为了子组件能动态接收父组件传入的值，并且在父组件的值改变的时候，可以进行重新渲染。

sync

9.2.3 子组件->父组件的数据绑定

    在子组件加上twoWay: true；字段。父组件跟着子组件变，但是父组件再改变不会影响子组件。

twoWay

9.2.4 双向数据绑定

    双向数据绑定，互相影响

父组件绑定传入 子组件定义twoWay属性 sync+twoWay

10.组件事件通信

    10.1  $emit

        子组件触发父级组件的事件，一级一级向上传播。 emit当然是向上发射了，上面就是父组件呀，给父组件发射一个有名字的事件，带着参数，父组件定义好了这么名字的方法。  

传播路径

    交互事件定义

通信事件定义

交互事件调用

通信事件调用

10.2 $broadcast

    广播，由父组件向下广播，一级一级向下传播。该组件的所有子组件都能接收到这个广播，一层一层广播。

broadcast

事件定义

define

事件调用

invoke

10.3 $invoke

    是页面对组件内部方法的直接调用，参数：组件路径 / 组件方法名 / 参数

定义：

定义

页面page调用：页面直接调用的话，路径参数一定要跟components里面名字一致。调用的时候随便放在一个可以执行的方法里面就好了。

调用 跟此处的名字一致

组件之间调用：

    调用：这个路径啊，我研究了一下，是相对于page的路径，但是！如果中间有文件夹的名字，请忽略。

    例如： ../components/questions   请忽略components ，不然一片红~~。我试了很多个路径，就这个行

组件间调用

11.自定义事件处理修饰符

11.1 default :绑定小程序冒泡儿事件

11.2 stop: 绑定小程序捕获事件

11.3 user：绑定用户自定义事件

12. slot插槽

    slot是子组件中的标签，父组件中的属性。

    应用场景：父组件在渲染子组件的同时，希望渲染出子组件的指定地方展示传入的dom

父组件使用slot

parent

子组件接收slot

child

注意：父组件slot的value === 子组件的name的value

这样，传入的"我就是钱兜兜本兜"就可以渲染嵌在子组件内，一同渲染到父组件内部。

13. Mixin

    13.1 默认式混合

       包含data数据、components组件、events事件、自定义方法，采用默认式混合，就是，如果组件内部未声明同名数组、组件、事件和自定义方法，咋那么注入的混合对象，对组件已声明的选项不造成影响。

    13.2 兼容式混合    

    对于组件的methods响应事件（绑定交互事件的方法）和页面生命周期事件，采用间兼容式混合。执行顺序是，执行组件本身的事件，再执行mixin里面的事件。注意，vue正好相反。别记混了。

这部分就没demo，读着貌似不是很难。

14.interception 拦截器

     对原生API的请求进行拦截，为什么要拦截啊~~我发出去就是想要点结果。Emmm...

    不是拦住，意思就是在你发请求时，有个回调，执行完了，就发出，类似于一个请求的生命周期函数。一定要写在wepy.app构造器里面。里面的p是请求的参数对象，貌似get没有请求的参数对象。

    拦截器定义在constructor里面，我觉得官网写的挺好的，就copy过来了。

拦截器

15.数据绑定

    wepy中的数据修改直接使用this.params = value就可以，但是在异步方法里面，肃然会改变值，但是dom不会重新渲染，所以要启动脏检查流程修改值之后，调用

$apply()

16.wepy封装的请求

16.1 GET简写

request

注意：await一定要写在async的方法里面，不然会报错。

开启Promise

开启promise

16.2 请求详细写

请求