wepy初始化项目 - 润新知

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 提示框