# wepy實戰源碼示例 ## 目錄結構 ~~~ ├── 基礎篇 │?? ├── Hello World! //數據綁定 │?? ├── 循環列表 │?? ├── 跳轉頁面 │ ├── 自定義組件（組件） ├── 高級篇 │?? ├── 跳轉帶參數 │?? ├── 組件傳參 ├── 實戰篇 │?? ├── 開發一個網站文章列表 │?? ├── 開發一個表單提交數據 ├── 更多 ~~~ ## Hello World 1. 首先在項目中src->pages目錄中新建一個wpy文件，例如：list.wpy。目錄中默認會有一個index.wpy文件，這里我們用新的文件來編寫。 2. 創建普通list.wpy文件，打開后可以看到分三個模塊，分別是`<template><script><style>`。如果創建的是文本格式，將下面代碼復制到文件中。 ~~~ <script> import wepy from 'wepy'; export default class ListTest extends wepy.page { config = {}; components = {}; data = {}; methods = {}; events = {}; onLoad() {}; } </script> <template lang="wxml"> </template> <style lang="less"> </style> ~~~ 重點： class 后面為類名，駝峰命名，不能取關鍵詞，否則項目運行失敗。繼承 wepy.page 3. 現在開始編寫動態數據綁定，可在頁面上展示Hello World！首先我們在data中定義一個參數為message，在后面寫參數，寫法為： ~~~ data = { message : 'hello world' }; ~~~ 4. 定義好了參數，要在頁面上展示就要寫在`<template>`模塊中，我們在標簽中再寫一個`<view>`標簽用來展示數據。 ~~~ <view class="hello"> {{message}} </view> ~~~ 在`<view>`標簽中我定義了一個class為'hello'，可以在`<style>`模塊中定義樣式，寫法跟css一樣。 ~~~ <style> .hello { text-align: center; height : 40px; } </style> ~~~ 5. 寫完hello world還要修改一下配置文件，找到app.wpy文件，找到config屬性里的pages，把默認的頁面修改為剛創建的文件，無需寫后綴。 ~~~ pages: [ 'pages/list' ] ~~~ 6. 配置好頁面后打開Terminal命令窗口輸入 wepy build --watch 來運行項目。成功后打開微信開發工具配置到dist目錄下就可以看到hello world。  ## 循環列表 1. 循環列表為請求后臺，返回數據展示在頁面上。后臺編寫一個返回數據接口，代碼為： Controller為：@RequestMapping("/api/test")  2. 在前端data中我們定義一個array的數組 ~~~ <script> data = { array:[] }; </script> ~~~ 3. 在這里我們定義一個按鈕，點擊按鈕請求后臺返回數據。在`<template></template>`模板中編寫下面代碼： ~~~ <view class="array"> <button @tap="getArray()">顯示LIST列表</button> </view> ~~~ 4. button上有一個getArray()方法，我們要在`<script>`模板中找到method代碼塊，在其中編寫一個getArray()的方法。 ~~~ getArray: async function () { await wepy.request('http://localhost:8080/P3-Web/api/test/list.do').then((d) => this.array=d.data.list); this.$apply(); } ~~~ 重點：要在function前面寫async表示異步，在請求前面編寫 await(等待)，最后寫一句 this.$apply();語句可以實現動態綁定數據。 5. 返回的數據已經賦值到array參數上，這時候來遍歷array，在`<template>`模板上寫下面代碼： ~~~ <repeat for="{{array}}" key="index" index="index" item="item"> <view> ID:{{ item.id }}----Name:{{ item.name}}----Age:{{ item.age }} </view> </repeat> ~~~ 6. 編寫完代碼去微信開發工具上查看是否正確。點擊按鈕，下方出現數據。這就完成了循環列表！  ## 跳轉頁面 1. 首先我們在pages下創建一個新的wpy文件，命名為newPage.wpy，在里面寫了一個hello world。 2. 去app.wpy文件中找到pages添加newPage屬性： ~~~ pages: [ 'pages/list', 'pages/newPage' ] ~~~ 重點： pages數組中是有先后順序的，第一個為首頁。 3. 在list.wpy文件中寫一個按鈕用來跳轉頁面，定義了toNewPage方法。 ~~~ <button @tap="toNewPage">跳轉頁面!</button> ~~~ 4. 在method方法中添加一個toNewPage的方法。 ~~~ toNewPage : function() { wx.navigateTo({ url: 'newPage' }); } ~~~ 5. 編寫完成后打開微信開發工具點擊頁面上的跳轉頁面按鈕，看是否能跳轉成功。   ## 自定義組件 1. 定義一個列表循環組件，我們在src目錄下找到components文件夾，在這個文件夾下創建一個名叫say.wpy的文件。 2. 在文件里面編寫如下代碼： ~~~ <template lang="wxml"> </template> <script> import wepy from 'wepy'; export default class Say extends wepy.component { components = {}; data = {}; methods = {}; events = {}; } </script> <style lang="less"> </style> ~~~ 重點：class后面的名字。繼承需改為 wepy.component，這樣就認為這個類為組件。 3. 在`<template>`模板中我們先寫任意值，看組件是否定義成功。 4. 在list.wpy文件中找到`<script>`模板，在里面引用我們剛寫好的組件。 ~~~ import Say from '../components/say'; ~~~ 5. 在components屬性中我們需要聲明組件。需要注意的是，WePY中的組件都是靜態組件，是以組件ID作為唯一標識的，每一個ID都對應一個組件實例，當頁面引入兩個相同ID的組件時，這兩個組件共用同一個實例與數據，當其中一個組件數據變化時，另外一個也會一起變化。 ~~~ components = { say: Say }; ~~~ 6. 聲明好了組件我們就可以用標簽的寫法來調用，可直接在`<template>`模塊中寫`<say>`就可以顯示我們在組件中`<template>`中寫的內容。 ~~~ <say></say> ~~~ 例: 我在say組件中寫一個hello world，在list頁面上就可以展示。  ## 高級篇-跳轉帶參數 1. 跳轉頁面通過URL傳參數，只要在連接的后面拼'?'問號，參數名=值。如果有多個值就用'&&' ~~~ toNewPage : function() { wx.navigateTo({ url: 'newPage?title=hello world&&age=18' }); } ~~~ 2. 我們到newPage頁面上拿到傳過來的參數，通過onLoad()方法。需要在方法中寫一個參數為options，這個options就是傳過來的參數。在方法中通過用options.參數名來獲取值。 ~~~ onLoad (options) { console.log(options.title); console.log(options.age); } ~~~ 3. 打開微信開發工具跳轉頁面看在頁面控制臺上是否打印了兩個值。  這樣就表示參數傳遞成功。 ## 高級篇-組件傳參 1. 用之前的Say組件來傳參，把循環列表的值用`<say>`標簽打印出來。 2. 在遍歷array方法中，把item傳到say中，用`:item`傳遞值。 ~~~ <repeat for="{{array}}" key="index" index="index" item="item"> <say :item="item"></say> </repeat> ~~~ 3. 在say.wpy文件中的`<template></template>`模板中寫下面代碼： ~~~ <template lang="wxml"> <view> ID:{{ item.id }}----Name:{{ item.name}}----Age:{{ item.age }} </view> </template> ~~~ 4. 這樣就可以實現組件參數傳遞，在頁面上查看值是否打印正確。