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-postv-for="post in posts"v-bind:key="post.id"v-bind:title="post.title" ></blog-post>

組件的事件，可以使用 $emit 來觸發父組件上的方法！

5.在組件上使用 v-model

當用在組件上時，v-model 則會這樣：<custom-inputv-bind:value="searchText"v-on:input="searchText = $event" ></custom-input>

為了讓它正常工作，這個組件內的 <input> 必須：

- 將其 value 特性綁定到一個名叫 value 的 prop 上- 在其 input 事件被觸發時，將新的值通過自定義的 input 事件拋 Vue.component('custom-input', {props: ['value'],template: `<inputv-bind:value="value"v-on:input="$emit('input', $event.target.value)">` })

在vue里面還提出了動態組件的概念 keep-alive,相當于是保留了當前組件的狀態。參考資料

6. 通過插槽分發內容

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

我理解的就是slot就是dom的插槽，就是把dom元素放在固定的位置。

7 wepy常用API

• this.$apply() 動態改變數據，重新渲染。
• $invoke("組件路徑"，“組件對應的方法”)
• 路由的應用 this.$root.navigation({url:'.....'})
• showtoast 調起toast 提示框

總結

以上是生活随笔為你收集整理的wepy 项目的初始化应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。