wepy项目的初始化运用

1.初始化wepy项目

• 装置脚手架

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

  • 切换至项目目次

    • 初始化项目 npm install

  • 开启及时编译

    • wepy build &＃8211;watch

2.小顺序生命周期

onLoad: 页面加载
一个页面只会挪用一次。
吸收页面参数 能够猎取wx.navigateTo和wx.redirectTo及中的 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: '

{{ title }}

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

5.在组件上运用 v-model

当用在组件上时，v-model 则会如许：
v-bind:value="searchText"
v-on:input="searchText = $event"
>

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

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

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

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

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

v-bind:href="url"
class="nav-link"
>



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

7 wepy经常使用API

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