# 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。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/10103400_QUo9.png "hello world") ## 循环列表 1. 循环列表为请求后台,返回数据展示在页面上。后台编写一个返回数据接口,代码为: Controller为:@RequestMapping("/api/test")![输入图片说明](https://static.oschina.net/uploads/img/201805/10104223_XDA2.png "ListMap数据集合") 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. 编写完代码去微信开发工具上查看是否正确。点击按钮,下方出现数据。这就完成了循环列表! ![输入图片说明](https://static.oschina.net/uploads/img/201805/10105846_K8fg.png "array列表") ## 跳转页面 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. 编写完成后打开微信开发工具点击页面上的跳转页面按钮,看是否能跳转成功。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/10110726_EnFb.png "toNewPage") ![输入图片说明](https://static.oschina.net/uploads/img/201805/10110805_aGY7.png "NewPage") ## 自定义组件 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页面上就可以展示。 ![](https://static.oschina.net/uploads/img/201805/10112557_iOO0.png) ## 高级篇-跳转带参数 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. 打开微信开发工具跳转页面看在页面控制台上是否打印了两个值。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/10113347_5qp8.png "跳转页面传参") 这样就表示参数传递成功。 ## 高级篇-组件传参 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. 这样就可以实现组件参数传递,在页面上查看值是否打印正确。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/10114405_PtsB.png "在这里输入图片标题")