資訊專欄INFORMATION COLUMN
摘要：初始化項目安裝腳手架切換至項目目錄初始化項目開啟實時編譯小程序生命周期頁面加載一個頁面只會調用一次。頁面初次渲染完成一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。組件路徑，組件對應的方法路由的應用調起提示框
1.初始化wepy項目
安裝腳手架
npm install -g wepy-cli
wepy init standard my-project
切換至項目目錄
初始化項目 npm install
開啟實時編譯
wepy build --watch
2.小程序生命周期onLoad: 頁面加載
一個頁面只會調用一次。
接收頁面參數 可以獲取wx.navigateTo和wx.redirectTo及
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常用APIthis.$apply() 動態改變數據，重新渲染。
$invoke("組件路徑"，“組件對應的方法”)
路由的應用 this.$root.navigation({url:"....."})
showtoast 調起toast 提示框
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96261.html
摘要：初始化項目安裝腳手架切換至項目目錄初始化項目開啟實時編譯小程序生命周期頁面加載一個頁面只會調用一次。頁面初次渲染完成一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。組件路徑，組件對應的方法路由的應用調起提示框 1.初始化wepy項目 安裝腳手架 npm install -g wepy-cli wepy init standard my-project 切換至項目...
摘要：描述了如何把轉變成下一個。唯一的要點是當變化時需要返回全新的對象，而不是修改傳入的參數。以上是純的使用，使用起來比較雞肋，大量被使用在項目中，封裝庫提供的和可以將和完美結合，使用非常方便。 @subject: wepy-redux-time-todo @author: leinov @date:2018-10-30 wepy-redux-time-todo showImg(ht...
摘要：主要解決問題開發模式轉換在原有的小程序的開發模式下進行再次封裝，更貼近于現有框架開發模式。官方代碼獲取應用實例事件處理函數基于的實現支持組件化開發。根組件，一般都是頁面父組件小程序對象子組件列表方法參數返回值說明組件初始化。 小程序框架wepy文檔 Github地址 快速入門 項目創建與使用 安裝wepy 以下安裝都通過npm安裝 安裝 wepy 命令行工具。 npm install ...
閱讀 1012·2021-11-23 10:11
閱讀 3854·2021-11-16 11:50
閱讀 921·2021-10-14 09:43
閱讀 2713·2021-10-14 09:42
閱讀 2710·2021-09-22 16:02
閱讀 1056·2019-08-29 10:57
閱讀 3378·2019-08-29 10:57
閱讀 2268·2019-08-26 13:52
