微信小程序版 妹纸图

2080 查看

先来一张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