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