wepy 項目的初始化應用

whjin 發布于2019-08-30 15:54 / 850人閱讀

摘要：初始化項目安裝腳手架切換至項目目錄初始化項目開啟實時編譯小程序生命周期頁面加載一個頁面只會調用一次。頁面初次渲染完成一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。組件路徑，組件對應的方法路由的應用調起提示框

1.初始化wepy項目

安裝腳手架

npm install -g wepy-cli

wepy init standard my-project

切換至項目目錄

初始化項目 npm install

開啟實時編譯

wepy build --watch

2.小程序生命周期

onLoad: 頁面加載
    一個頁面只會調用一次。
    接收頁面參數   可以獲取wx.navigateTo和wx.redirectTo及中的 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: "{{ title }}"
})

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" }
    ]
  }
})

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

5.在組件上使用 v-model

當用在組件上時，v-model 則會這樣：

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

 - 將其 value 特性綁定到一個名叫 value 的 prop 上
 - 在其 input 事件被觸發時，將新的值通過自定義的 input 事件拋

Vue.component("custom-input", {
  props: ["value"],
  template: `
    
  `
})

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

6. 通過插槽分發內容

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

7 wepy常用API

this.$apply() 動態改變數據，重新渲染。

$invoke("組件路徑"，“組件對應的方法”)

路由的應用 this.$root.navigation({url:"....."})

showtoast 調起toast 提示框

云服務器 GPU云服務器項目管理軟件的應用輕量應用服務器初始化 wepy 騰訊云輕量應用服務器初始端口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/116915.html

wepy 項目的初始化應用

摘要：初始化項目安裝腳手架切換至項目目錄初始化項目開啟實時編譯小程序生命周期頁面加載一個頁面只會調用一次。頁面初次渲染完成一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。組件路徑，組件對應的方法路由的應用調起提示框 1.初始化wepy項目安裝腳手架 npm install -g wepy-cli wepy init standard my-project 切換至項目...

mengbo 2019-08-22 18:50 評論0 收藏0
一個Time TodoList實例了解redux在wepy中的使用

摘要：描述了如何把轉變成下一個。唯一的要點是當變化時需要返回全新的對象，而不是修改傳入的參數。以上是純的使用，使用起來比較雞肋，大量被使用在項目中，封裝庫提供的和可以將和完美結合，使用非常方便。 @subject: wepy-redux-time-todo @author: leinov @date:2018-10-30 wepy-redux-time-todo showImg(ht...

JackJiang 2019-08-23 12:37 評論0 收藏0
wepy - 一個小程序的組件化開發框架

摘要：主要解決問題開發模式轉換在原有的小程序的開發模式下進行再次封裝，更貼近于現有框架開發模式。官方代碼獲取應用實例事件處理函數基于的實現支持組件化開發。根組件，一般都是頁面父組件小程序對象子組件列表方法參數返回值說明組件初始化。小程序框架wepy文檔 Github地址快速入門項目創建與使用安裝wepy 以下安裝都通過npm安裝安裝 wepy 命令行工具。 npm install ...

I_Am 2019-08-20 12:30 評論0 收藏0