1.初始化wepy项目

• 装置脚手架

  • npm install -g wepy-cli
  • wepy init standard my-project

  • 切换至项目目次

    • 初始化项目 npm install

  • 开启及时编译

    • wepy build –watch

2.小顺序生命周期

onLoad: 页面加载
    一个页面只会挪用一次。
    吸收页面参数   能够猎取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

onShow: 页面显现
    每次翻开页面都邑挪用一次。

onReady: 页面首次衬着完成
    一个页面只会挪用一次，代表页面已预备稳健，能够和视图层举行交互。

onHide: 页面隐蔽
    当navigateTo或底部tab切换时挪用。

onUnload: 页面卸载
    当redirectTo或navigateBack的时刻挪用。    

3 原生小顺序请求app实例必需有3个文件：app.js、app.json、app.wxss，而page页面则平常有4个文件：page.js、page.json、page.wxml、page.wxss

project
└── src
    ├── pages
    |   ├── index.wpy    index 页面逻辑、设置、构造、款式
    |   └── log.wpy      log 页面逻辑、设置、构造、款式
    └──app.wpy  

也就是app.wpy 主如果做进口文件，pages是页面集成

import wepy from 'wepy';

// 声明一个App小顺序实例,小顺序进口文件 
export default class MyAPP extends wepy.app {
}

// 声明一个Page页面实例，小顺序页面
export default class IndexPage extends wepy.page {
}

// 声明一个Component组件实例，开辟小顺序组件
export default class MyComponent extends wepy.component {
}

4 组件化。相似VUE组件文件的编写

1.我们须要相识父子组件怎样传值 属性值能够运用props 来传值。子组件用props来吸收值。

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

组件的事宜，能够运用 $emit 来触发父组件上的要领！

5.在组件上运用 v-model

当用在组件上时，v-model 则会如许：

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

为了让它一般事情，这个组件内的 <input> 必需：

 - 将其 value 特征绑定到一个名叫 value 的 prop 上
 - 在其 input 事宜被触发时，将新的值经由过程自定义的 input 事宜抛 

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

在vue内里还提出了动态组件的观点 keep-alive,相称因而保存了当前组件的状况。参考资料

6. 经由过程插槽分发内容

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

我明白的就是slot就是dom的插槽，就是把dom元素放在牢固的位置。

7 wepy经常使用API

• this.$apply() 动态转变数据，从新衬着。
• $invoke(“组件途径”，“组件对应的要领”)
• 路由的运用 this.$root.navigation({url:’…..’})
• showtoast 调起toast 提示框