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 提示框
    原文作者:木子喵
    原文地址: https://segmentfault.com/a/1190000015698803
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞