學習途中總是忘心大，看了官方文檔，自己也總結寫一遍吧，寫一遍記得印象更深刻～
目錄
1、wepy的安裝與使用
2、vscode 使用 wepy的小技巧
3、微信開發者工具使用
4、項目配置
5、功能特性
6、進階學習
複制代碼
一、wepy的安裝與使用
全局安裝或更新WePY指令行工具
npm install wepy-cli -g
複制代碼
初始化項目
wepy init standard test_wepy // 标準模式，包含了react等測試
wepy init empty test_wepy // 空白模式，适合初始化的空項目
複制代碼
安裝依賴包
yarn install / npm install
複制代碼
項目生成後是這樣的
// 以下是空白模式下的目錄結構
├── dist 小程式運作代碼目錄(該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的檔案)
├── node_modules
├── src 代碼編寫的目錄(該目錄為使用WePY後的開發目錄)
| ├── components WePY元件目錄(元件不屬于完整頁面，僅供完整頁面或其他元件引用)
| | ├── com_a.wpy 可複用的WePY元件a
| | └── com_b.wpy 可複用的WePY元件b
| ├── pages WePY頁面目錄(屬于完整頁面)
| | ├── index.wpy index頁面(經build後，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss檔案)
| | └── other.wpy other頁面(經build後，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss檔案)
| └── app.wpy 小程式配置項(全局資料、樣式、聲明鈎子等；經build後，會在dist目錄下生成app.js、app.json和app.wxss檔案)
└── package.json 項目的package配置
複制代碼
開啟實時編譯功能
npm run dev
複制代碼
至此我們的第一個wepy小程式項目建構完成。
二、vscode 使用 wepy的小技巧
首選項-應用程式-setting.json加上如下代碼，重新開機就ok
"files.associations": {
"*.vue": "vue",
"*.wpy": "vue",
"*.wxml": "html",
"*.wxss": "css"
},
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
複制代碼關于wepy的一些插件
三、微信開發者工具使用
注意事項
1.使用微信開發者工具-->添加項目，項目目錄請選擇dist目錄。
2.微信開發者工具-->項目-->關閉ES6轉ES5。 【重要】：漏掉此項會運作報錯。
3.微信開發者工具-->項目-->關閉上傳代碼時樣式自動補全。 【重要】：某些情況下漏掉此項也會運作報錯。
4.微信開發者工具-->項目-->關閉代碼壓縮上傳。 【重要】：開啟後，會導緻真機computed, props.sync 等等屬性失效。
複制代碼
四、項目配置
1.7.0之後的版本init新生成的代碼包會在根目錄包含project.config.json檔案，之前生成的代碼包可能不存在project.config.json檔案。
{
"description": "A WePY project",
"setting": {
"urlCheck": true, // 對應不檢查安全域名選項，開啟。 如果已配置好安全域名則建議關閉。
"es6": false, // 對應關閉ES6轉ES5選項，關閉。 重要：未關閉會運作報錯。
"postcss": false, // 對應關閉上傳代碼時樣式自動補全選項，關閉。 重要：某些情況下漏掉此項也會運作報錯。
"minified": false // 對應關閉代碼壓縮上傳選項，關閉。重要：開啟後，會導緻真機computed, props.sync 等等屬性失效。
},
"compileType": "miniprogram",
"appid": "touristappid",
"projectname": "empty_wepy",
"miniprogramRoot": "./dist" // 自己建立一個wepy項目，竟然不用在dist目錄下也可以在開發者工具中打開，原因在此
}
複制代碼
五、功能特性
1、單檔案模式
原生小程式要求app執行個體必須有3個檔案：app.js、app.json、app.wxss，而page頁面則一般有4個檔案：page.js、page.json、page.wxml、page.wxss，并且還要求app執行個體的3個檔案以及page頁面的4個檔案除字尾名外必須同名
而在WePY中則使用了單檔案模式，将原生小程式app執行個體的3個檔案統一為app.wpy，page頁面的4個檔案統一為page.wpy。使用WePY開發前後的開發目錄結構對比如下：
// 原生小程式的目錄結構：
project
├── pages
| ├── index
| | ├── index.js index 頁面邏輯
| | ├── index.json index 頁面配置
| | ├── index.wxml index 頁面結構
| | └── index.wxss index 頁面樣式
| └── log
| ├── log.js log 頁面邏輯
| ├── log.json log 頁面配置
| ├── log.wxml log 頁面結構
| └── log.wxss log 頁面樣式
├── app.js 小程式邏輯
├── app.json 小程式公共配置
└── app.wxss 小程式公共樣式
複制代碼// wepy小程式
project
└── src
├── pages
| ├── index.wpy index 頁面邏輯、配置、結構、樣式
| └── log.wpy log 頁面邏輯、配置、結構、樣式
└──app.wpy 小程式邏輯、公共配置、公共樣式
複制代碼
2、預設使用babel編譯，支援ES6/7的一些新特性
使用者可以通過修改wepy.config.js(老版本使用.wepyrc)配置檔案，配置自己熟悉的babel環境進行開發。預設開啟使用了一些新的特性如promise、async/await。
import wepy from 'wepy';
export default class Index extends wepy.page{
getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({data: 123});
}, 3000);
});
};
async onLoad() {
let data = await this.getData();
console.log(data.data);
};
}
複制代碼
3、針對原生API進行優化
對小程式原生API進行promise處理，同時修複了一些原生API的缺陷，比如：wx.request的并發問題等。
// 原生
onLoad = function () {
var self = this;
wx.login({
success: function (data) {
wx.getUserInfo({
success: function (userinfo) {
self.setData({userInfo: userinfo});
}
});
}
});
}
複制代碼// wepy
import wepy from 'wepy';
async onLoad() {
await wepy.login();
this.userInfo = await wepy.getUserInfo();
}
複制代碼在同時并發10個request請求測試時：
使用WePY後：
4、開發模式轉換
WePY架構在開發過程中參考了Vue等現有架構的一些文法風格和功能特性，對原生小程式的開發模式進行了再次封裝，更貼近于MVVM架構模式。
//index.wpy中的
import wepy from 'wepy';
//通過繼承自wepy.page的類建立頁面邏輯
export default class Index extends wepy.page {
//可用于頁面模闆綁定的資料
data = {
motto: 'Hello World',
userInfo: {}
};
//事件處理函數(集中儲存在methods對象中)
methods = {
bindViewTap () {
console.log('button clicked');
}
};
//頁面的生命周期函數
onLoad() {
console.log('onLoad');
};
}
複制代碼
5、支援元件化開發
具體詳見下面。
六、進階學習
1、wepy.config.js配置檔案說明
執行wepy init standard demo後，會生成類似下面這樣的配置檔案。
const path = require('path');
var prod = process.env.NODE_ENV === 'production';
module.exports = {
wpyExt: '.wpy',
eslint: true,
cliLogs: !prod,
build: {
web: {
htmlTemplate: path.join('src', 'index.template.html'),
htmlOutput: path.join('web', 'index.html'),
jsOutput: path.join('web', 'index.js')
}
},
resolve: {
alias: {
counter: path.join(__dirname, 'src/components/counter'),
'@': path.join(__dirname, 'src')
},
aliasFields: ['wepy', 'weapp'],
modules: ['node_modules']
},
compilers: {
less: {
compress: prod
},
babel: {
sourceMap: true,
presets: [
'env'
],
plugins: [
'transform-class-properties',
'transform-decorators-legacy',
'transform-object-rest-spread',
'transform-export-extensions',
]
}
},
plugins: {
},
appConfig: {
noPromiseAPI: ['createSelectorQuery']
}
}
if (prod) {
// 壓縮sass
// module.exports.compilers['sass'] = {outputStyle: 'compressed'}
// 壓縮js
module.exports.plugins = {
uglifyjs: {
filter: /\.js$/,
config: {
}
},
// 圖檔壓縮
imagemin: {
filter: /\.(jpg|png|jpeg)$/,
config: {
jpg: {
quality: 80
},
png: {
quality: 80
}
}
}
}
}
複制代碼
2、.wpy檔案說明
.wpy檔案的編譯過程過下：
一個.wpy檔案可分為三大部分，各自對應于一個标簽：
腳本部分: 即标簽中的内容，又可分為兩個部分：
邏輯部分: 除了config對象之外的部分，對應于原生的.js檔案；
配置部分: 即config對象，對應于原生的.json檔案。
結構部分: 即模闆部分，對應于原生的.wxml檔案。
樣式部分: 即樣式部分，對應于原生的.wxss檔案。
複制代碼
其中，小程式入口檔案app.wpy不需要template，是以編譯時會被忽略。.wpy檔案中的script、template、style這三個标簽都支援lang和src屬性，lang決定了其代碼編譯過程，src決定是否外聯代碼，存在src屬性且有效時，會忽略内聯代碼。
// some code
複制代碼标簽
lang預設值
lang支援值
style
css
css、less、scss、stylus、postcss
template
wxml
wxml、xml、pug(原jade)
script
babel
babel、TypeScript
3、腳本解釋
小程式入口app.wpy
import wepy from 'wepy'
export default class extends wepy.app {
// 全局配置
config = {
pages: [
'pages/index', // 首頁
'pages/find', // 發現頁
'pages/my' // 個人中心
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'meils',
navigationBarTextStyle: 'black'
}
}
onLaunch() {
console.log('on launch')
}
}
複制代碼
入口檔案app.wpy中所聲明的小程式執行個體繼承自wepy.app類，包含一個config屬性和其它全局屬性、方法、事件。其中config屬性對應原生的app.json檔案，build編譯時會根據config屬性自動生成app.json檔案，如果需要修改config中的内容，請使用微信提供的相關API。
頁面page.wpy
import wepy from 'wepy';
import Counter from '../components/counter'; // 元件
export default class Page extends wepy.page {
config = {};
components = {counter1: Counter};
data = {};
methods = {};
events = {};
onLoad() {};
// Other properties
}
複制代碼頁面檔案page.wpy中所聲明的頁面執行個體繼承自wepy.page類，該類的主要屬性介紹如下：
屬性
說明
config
頁面配置對象，對應于原生的page.json檔案，類似于app.wpy中的config
components
頁面元件清單對象，聲明頁面所引入的元件清單
data
頁面渲染資料對象，存放可用于頁面模闆綁定的渲染資料
methods
wxml事件處理函數對象，存放響應wxml中所捕獲到的事件的函數，如bindtap、bindchange
events
WePY元件事件處理函數對象，存放響應元件之間通過 $broadcast、$emit、$invoke所傳遞的事件的函數
其它
小程式頁面生命周期函數，如onLoad、onReady等，以及其它自定義的方法與屬性
元件com.wpy
import wepy from 'wepy';
export default class Com extends wepy.component {
components = {};
data = {};
methods = {};
events = {};
// Other properties
}
複制代碼
元件檔案com.wpy中所聲明的元件執行個體繼承自wepy.component類，除了不需要config配置以及頁面特有的一些生命周期函數之外，其屬性與頁面屬性大緻相同。
4、執行個體
在 WePY 中，小程式被分為三個執行個體：小程式執行個體App、頁面執行個體Page、元件執行個體Component。其中Page執行個體繼承自Component。
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 {
}
複制代碼
App小程式執行個體
App小程式執行個體中主要包含小程式生命周期函數、config配置對象、globalData全局資料對象，以及其他自定義方法與屬性。
import wepy from 'wepy';
export default class MyAPP extends wepy.app {
customData = {}; // 自定義資料對象
customFunction () { } // 自定義方法
onLaunch () {} // 生命周期，加載的時候
onShow () {} // 頁面展示
config = {} // 對應 app.json 檔案
globalData = {} // 全局對象
}
複制代碼在Page頁面執行個體中，可以通過this.$parent來通路App執行個體。
Page頁面執行個體和Component元件執行個體
import wepy from 'wepy';
export default class MyPage extends wepy.page {
// export default class MyComponent extends wepy.component {
customData = {} // 自定義資料
customFunction () {} //自定義方法
onLoad () {} // 在Page和Component共用的生命周期函數
onShow () {} // 隻在Page中存在的頁面生命周期函數
config = {}; // 隻在Page執行個體中存在的配置資料，對應于原生的page.json檔案
data = {}; // 頁面所需資料均需在這裡聲明，可用于模闆資料綁定
components = {}; // 聲明頁面中所引用的元件，或聲明元件中所引用的子元件
mixins = []; // 聲明頁面所引用的Mixin執行個體
computed = {}; // 聲明計算屬性(詳見後文介紹)
watch = {}; // 聲明資料watcher(詳見後文介紹)
methods = {}; // 聲明頁面wxml中标簽的事件處理函數。注意，此處隻用于聲明頁面wxml中标簽的bind、catch事件，自定義方法需以自定義方法的方式聲明
events = {}; // 聲明元件之間的事件處理函數
}
複制代碼這裡需要特别強調一下：WePY中的methods屬性隻能聲明頁面wxml标簽的bind、catch事件，不能聲明自定義方法，這與Vue中的用法是不一緻的。
5、元件
原生小程式支援js子產品化，但彼此獨立，業務代碼與互動事件仍需在頁面處理。無法實作元件化的松耦合與複用的效果。
例如模闆A中綁定一個bindtap="myclick"，模闆B中同樣綁定一樣bindtap="myclick"，那麼就會影響同一個頁面事件。對于資料同樣如此。是以，隻有通過改變變量或者事件方法，或者給其加不同字首才能實作綁定不同僚件或者不同資料。當頁面複雜之後就十分不利于開發維護。
是以，在WePY中實作了小程式的元件化開發，元件的所有業務與功能在元件本身實作，元件與元件之間彼此隔離，上述例子在WePY的元件化開發過程中，A元件隻會影響到A所綁定的myclick，B也如此。
普通元件引用
// index.wpy
import wepy from 'wepy';
//引入元件檔案
import Child from '../components/child';
export default class Index extends wepy.page {
//聲明元件，配置設定元件id為child
components = {
child: Child
};
}
複制代碼需要注意的是，WePY中的元件都是靜态元件，是以元件ID作為唯一辨別的，每一個ID都對應一個元件執行個體，當頁面引入兩個相同ID的元件時，這兩個元件共用同一個執行個體與資料，當其中一個元件資料變化時，另外一個也會一起變化。
如果需要避免這個問題，則需要配置設定多個元件ID和執行個體。代碼如下：
import wepy from 'wepy';
import Child from '../components/child';
export default class Index extends wepy.page {
components = {
//為兩個相同元件的不同執行個體配置設定不同的元件ID，進而避免資料同步變化的問題
child: Child,
anotherchild: Child
};
}
複制代碼
注意：WePY中，在父元件template模闆部分插入駝峰式命名的子元件标簽時，不能将駝峰式命名轉換成短橫杆式命名(比如将childCom轉換成child-com)，這與Vue中的習慣是不一緻。
元件的循環渲染
當需要循環渲染WePY元件時(類似于通過wx:for循環渲染原生的wxml标簽)，必須使用WePY定義的輔助标簽，代碼如下：
// index.wpy
import wepy from 'wepy';
// 引入child元件檔案
import Child from '../components/child';
export default class Index extends wepy.page {
components = {
// 聲明頁面中要使用到的Child元件的ID為child
child: Child
}
data = {
list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
}
}
複制代碼
5、computed
computed計算屬性，是一個有傳回值的函數，可直接被當作綁定資料來使用。是以類似于data屬性，代碼中可通過this.計算屬性名來引用，模闆中也可通過{{ 計算屬性名 }}來綁定資料。
需要注意的是，隻要是元件中有任何資料發生了改變，那麼所有計算屬性就都會被重新計算。
data = {
a: 1
}
// 計算屬性aPlus，在腳本中可通過this.aPlus來引用，在模闆中可通過{{ aPlus }}來插值
computed = {
aPlus () {
return this.a + 1
}
}
複制代碼
6、watcher 監聽器
通過監聽器watcher能夠監聽到任何屬性的更新。監聽器在watch對象中聲明，類型為函數，函數名與需要被監聽的data對象中的屬性同名，每當被監聽的屬性改變一次，監聽器函數就會被自動調用執行一次。
監聽器适用于當屬性改變時需要進行某些額外處理的情形。
data = {
num: 1
}
// 監聽器函數名必須跟需要被監聽的data對象中的屬性num同名，
// 其參數中的newValue為屬性改變後的新值，oldValue為改變前的舊值
watch = {
num (newValue, oldValue) {
console.log(`num value: ${oldValue} -> ${newValue}`)
}
}
// 每當被監聽的屬性num改變一次，對應的同名監聽器函數num()就被自動調用執行一次
onLoad () {
setInterval(() => {
this.num++;
this.$apply();
}, 1000)
}
複制代碼
7、props 傳值
props傳值在WePY中屬于父子元件之間傳值的一種機制，包括靜态傳值與動态傳值。
靜态傳值
靜态傳值為父元件向子元件傳遞常量資料，是以隻能傳遞String字元串類型。
// child.wpy
props = {
title: String
};
onLoad () {
console.log(this.title); // mytitle
}
複制代碼動态傳值
通過使用.sync修飾符來達到父元件資料綁定至子元件的效果，也可以通過設定子元件props的twoWay: true來達到子元件資料綁定至父元件的效果。那如果既使用.sync修飾符，同時子元件props中添加的twoWay: true時，就可以實作資料的雙向綁定了。
// parent.wpy
data = {
parentTitle: 'p-title'
};
// child.wpy
props = {
// 靜态傳值
title: String,
// 父向子單向動态傳值
syncTitle: {
type: String,
default: 'null'
},
twoWayTitle: {
type: String,
default: 'nothing',
twoWay: true
}
};
onLoad () {
console.log(this.title); // p-title
console.log(this.syncTitle); // p-title
console.log(this.twoWayTitle); // p-title
this.title = 'c-title';
console.log(this.$parent.parentTitle); // p-title.
this.twoWayTitle = 'two-way-title';
this.$apply();
console.log(this.$parent.parentTitle); // two-way-title. --- twoWay為true時，子元件props中的屬性值改變時，會同時改變父元件對應的值
this.$parent.parentTitle = 'p-title-changed';
this.$parent.$apply();
console.log(this.title); // 'c-title';
console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修飾符的props屬性值，當在父元件中改變時，會同時改變子元件對應的值。
}
複制代碼
8、元件通信與互動
wepy.component基類提供$broadcast、$emit、$invoke三個方法用于元件之間的通信和互動，如：
$broadcast
$broadcast事件是由父元件發起，所有子元件都會收到此廣播事件，除非事件被手動取消。事件廣播的順序為廣度優先搜尋順序，如上圖，如果頁面Page_Index發起一個$broadcast事件，那麼按先後順序依次接收到該事件的元件為：ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH。如下圖：
$emit
$emit與$broadcast正好相反，事件發起元件的所有祖先元件會依次接收到$emit事件。如果元件ComE發起一個$emit事件，那麼接收到事件的先後順序為：元件ComA、頁面Page_Index。如下圖：
$invoke
$invoke是一個頁面或元件對另一個元件中的方法的直接調用，通過傳入元件路徑找到相應的元件，然後再調用其方法。
比如，想在頁面Page_Index中調用元件ComA的某個方法：
this.$invoke('ComA', 'someMethod', 'someArgs');
複制代碼
如果想在元件ComA中調用元件ComG的某個方法：
this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');
複制代碼
9、元件自定義事件處理函數
可以通過使用.user修飾符為自定義元件綁定事件，如：@customEvent.user="myFn"
其中，@表示事件修飾符，customEvent 表示事件名稱，.user表示事件字尾。
目前總共有三種事件字尾：
.default: 綁定小程式冒泡型事件，如bindtap，.default字尾可省略不寫；
.stop: 綁定小程式捕獲型事件，如catchtap；
.user: 綁定使用者自定義元件事件，通過$emit觸發。注意，如果用了自定義事件，則events中對應的監聽函數不會再執行。
// index.wpy
import wepy from 'wepy'
import Child from '../components/child'
export default class Index extends wepy.page {
components = {
child: Child
}
methods = {
parentFn (num, evt) {
console.log('parent received emit event, number is: ' + num)
}
}
}
// child.wpy
Click me
import wepy from 'wepy'
export default class Child extends wepy.component {
methods = {
tap () {
console.log('child is clicked')
this.$emit('childFn', 100)
}
}
}
複制代碼
10、slot 元件内容分發插槽
示例：
在Panel元件中有以下模闆：
預設标題
預設内容
複制代碼
在父元件中使用Panel子元件時，可以這樣使用：
新的标題
新的内容
複制代碼
11、Mixin 混合
混合可以将元件之間的可複用部分抽離，進而在元件中使用混合時，可以将混合的資料，事件以及方法注入到元件之中。混合分為兩種：
預設式混合
相容式混合
預設混合
對于元件data資料，components元件，events事件以及其它自定義方法采用預設式混合，即如果元件未聲明該資料，元件，事件，自定義方法等，那麼将混合對象中的選項将注入元件之中。如果元件已聲明的選項将不受影響。
// mixins/test.js
import wepy from 'wepy';
export default class TestMixin extends wepy.mixin {
data = {
foo: 'foo defined by page',
bar: 'bar defined by testMix'
};
methods = {
tap () {
console.log('mix tap');
}
}
}
// pages/index.wpy
import wepy from 'wepy';
import TestMixin from './mixins/test';
export default class Index extends wepy.page {
data = {
foo: 'foo defined by index'
};
mixins = [TestMixin ];
onShow() {
console.log(this.foo); // foo defined by index 預設的
console.log(this.bar); // bar defined by testMix 使用mixin中的
}
}
複制代碼
相容式混合
對于元件methods響應事件，以及小程式頁面事件将采用相容式混合，即先響應元件本身響應事件，然後再響應混合對象中響應事件。注意，這裡事件的執行順序跟Vue中相反，Vue中是先執行mixin中的函數， 再執行元件本身的函數。
// mixins/test.js
import wepy from 'wepy';
export default class TestMixin extends wepy.mixin {
methods = {
tap () {
console.log('mixin tap');
}
};
onShow() {
console.log('mixin onshow');
}
}
// pages/index.wpy
import wepy from 'wepy';
import TestMixin from './mixins/test';
export default class Index extends wepy.page {
mixins = [TestMixin];
methods = {
tap () {
console.log('index tap');
}
};
onShow() {
console.log('index onshow');
}
}
// index onshow
// mixin onshow
// ----- when tap
// index tap
// mixin tap
複制代碼
12、資料綁定
原生小程式的資料綁定方式
this.setData({title: 'this is title'});
複制代碼
因為小程式架構本身原因，頁面渲染層和JS邏輯層分開的，setData操作實際就是JS邏輯層與頁面渲染層之間的通信，那麼如果在同一次運作周期内多次執行setData操作時，那麼通信的次數是一次還是多次呢？這個取決于API本身的設計。
WePY資料綁定方式
this.title = 'this is title';
複制代碼
需注意的是，在異步函數中更新資料的時候，必須手動調用$apply方法，才會觸發髒資料檢查流程的運作。如：
setTimeout(() => {
this.title = 'this is title';
this.$apply();
}, 3000);
複制代碼
13、優化細節
請求
// 原生代碼:
wx.request({
url: 'xxx',
success: function (data) {
console.log(data);
}
});
// WePY 使用方式, 需要開啟 Promise 支援，參考開發規範章節
wepy.request('xxxx').then((d) => console.log(d));
// async/await 的使用方式, 需要開啟 Promise 和 async/await 支援，參考 WIKI
async function request () {
let d = await wepy.request('xxxxx');
console.log(d);
}
複制代碼
優化事件參數傳遞
// 原生的事件傳參方式:
Click me!
Page({
tapName: function (event) {
console.log(event.currentTarget.dataset.id)// output: 1
console.log(event.currentTarget.dataset.title)// output: wepy
console.log(event.currentTarget.dataset.other)// output: otherparams
}
});
// WePY 1.1.8以後的版本，隻允許傳string。
Click me!
methods: {
tapName (id, title, other, event) {
console.log(id, title, other)// output: 1, wepy, otherparams
}
}
複制代碼
元件代替模闆和子產品
// 原生代碼:
{{text}}
var item = require('item.js')
// WePY
{{text}}
import wepy from 'wepy';
import Item from '../components/item';
export default class Index extends wepy.page {
components = { com: Item }
}
複制代碼先到這裡了，以後再繼續補充～～