微信小程序版 妹纸图

先来一张Gif：

Gif演示

本人是一枚Android开发者，听闻微信小程序的内测后激动不已，便四处寻找各种资料学习，由于对HTML、CSS、JS不太熟悉，欢迎指出项目中可以改进的地方~

1、如图，Demo只有两个页面，比较简单，主要可以学习到微信小程序的基本结构。

项目结构及配置文件

2、使用微信官方的wx.request()方法请求gank.io提供的API，获取妹纸图并展示。

index.json

3、首页视图主要用了一个wx:for循环渲染<view></view>，承载数据内容。

index.wxml

4、从上面两张图可以看到，我们在组件(wxml)中定义数据，这些数据会通过事件传递给 SERVICE。我们可以在js文件中通过event.currentTarget.dataset.***取出，从而拿到对应item的图片url，将其传入下一个page。

5、page间传递信息/参数：

传递：如下图，首先定义一个点击事件，然后在后面像传统的web的get方法一样在url后面带上所需参数。

index.js点击事件

取值：如图，我们在onLoad()方法中通过options可以直接拿出，然后赋值到当前页面的data里就行了。

image.js取出参数并赋值

6、微信官方为我们提供了下载文件的方法，具体可以看文档。

download

最后，大概就是这样子了，没什么好写的，看代码很直观，挺简单的一个小程序，看下官方文档就着一些demo就不难理解了。

附赠源码：https://github.com/brucevanfdm/WeChatMeiZhi