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