wepy project initialization

Original link: https://segmentfault.com/a/1190000015698803

1. Initialization wepy project

• Install scaffolding

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

  • Changes to the project directory

    • Initialization project npm install

  • Open real-time compiler

    • wepy build --watch

2. Small Lifecycle

onLoad : page loading 
　　a page only called once. 
　　Receiving page parameters may be acquired and wx.redirectTo wx.navigateTo and <navigator /> in the query.

onShow : page displays 
　　every time you open the page will be called once. 

the onReady : page rendering is complete for the first time 
　　a page is only called once, on behalf of the page has been ready, you can interact and view layer. onHide : page hidden 　　Invoked when navigateTo or bottom of the tab to switch.
 onUnload : page unload 　　when redirectTo or navigateBack when called.

 

3 native applet requires app instance must have three files: app.js, app.json, app.wxss, while the page is a page generally have four files: page.js, page.json, page.wxml, page.wxss

Project 
└── src 
    ├── Pages and the
     |    ├── index.wpy index page logic, configuration, structure, style
     |    └── log.wpy log page logic, configuration, structure, style 
    └──app.wpy

That is app.wpy mainly to do import documents, pages are integrated page

wepy from Import 'wepy' ; 
 
// declare a App applet instance, the applet file entry 
Export default class MyApp the extends wepy.app { 
} 
 
// declare a page Page example, the applet pages 
Export default class IndexPage the extends wepy.page { 
} 
 
// declare a component component instance, the development of small program components 
Export default class the extends the MyComponent wepy.component { 
}

4 componentization. Similar VUE component files written

1. We need to understand how his son pass component value of the property value can use props to traditional values. Subassembly with the value received 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>

Event components, can be used to trigger $ emit method on the parent component!

5. Use v-model on the assembly

When used in the assembly, V- Model this occurs:
 
 <Custom- INPUT 
  V -bind: value = "searchText" 
  V -ON: INPUT = "Event searchText = $" 
> </ Custom-INPUT>

To make it work, this component within the <input> must:

- its value is bound to a characteristic value of the named prop
  - at which an input event is triggered, a new value of an input event thrown by custom 

Vue.component ( 'Custom-input' , { 
  The props: [ ' value ' ], 
  Template: `
     < INPUT 
      V -bind: value =" value " 
      V -ON: INPUT =" $ EMIT (' INPUT ', $ event.target.value) " 
    > 
  ` 
})

 

In vue which also proposed the concept of the keep-alive dynamic components, corresponding to retain a state in which the current component. Reference material

6. distribute content through slots

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

 

I understand that slot is the slot dom, dom element is put in a fixed position.

7 wepy common API

• this. $ apply () to dynamically change the data, re-rendering.
• $ Invoke ( "Component Path", "assembly corresponding method")
• Routing application of this $ root.navigation ({url: '.....'})
• showtoast invoking toast prompt box