ylbtech-小程序-demo：妹纸图

1.返回顶部
0、
   
1、app.js
//app.js

App({

  onLaunch: function () {

    //调用API从本地缓存中获取数据

    var logs = wx.getStorageSync('logs') || []

    logs.unshift(Date.now())

    wx.setStorageSync('logs', logs)

  },

  getUserInfo:function(cb){

    var that = this

    if(this.globalData.userInfo){

      typeof cb == "function" && cb(this.globalData.userInfo)

    }else{

      //调用登录接口

      wx.login({

        success: function () {

          wx.getUserInfo({

            success: function (res) {

              that.globalData.userInfo = res.userInfo

              typeof cb == "function" && cb(that.globalData.userInfo)

            }

          })

        }

      })

    }

  },

  globalData:{

    userInfo:null

  }

})
2、app.json
{

  "pages":[

    "pages/index/index",

    "pages/image/image"

  ],

  "window":{

    "backgroundTextStyle":"dark",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "妹纸图",

    "navigationBarTextStyle":"black"

  }

}
3、app.wxss
/**app.wxss**/
4、project.config.json
{

    "description": "项目配置文件。",

    "packOptions": {

        "ignore": []

    },

    "setting": {

        "urlCheck": false,

        "es6": true,

        "postcss": true,

        "minified": true,

        "newFeature": true

    },

    "compileType": "miniprogram",

    "libVersion": "2.2.3",

    "appid": "wx7d22ab7088f2db6a",

    "projectname": "meiziApp",

    "isGameTourist": false,

    "condition": {

        "search": {

            "current": -1,

            "list": []

        },

        "conversation": {

            "current": -1,

            "list": []

        },

        "game": {

            "currentL": -1,

            "list": []

        },

        "miniprogram": {

            "current": -1,

            "list": []

        }

    }

}
5、pages
-image
-index
6、utils
-constant.js
//url相关

var BASE_URL = "http://gank.io/api";

var GET_MEIZHI_URL = BASE_URL.concat("/data/%E7%A6%8F%E5%88%A9/10/");

// 将方法、变量暴露出去

module.exports = {

    BASE_URL: BASE_URL,

    GET_MEIZHI_URL: GET_MEIZHI_URL

}
-util.js
// 工具类

function formatTime(date) {

  var year = date.getFullYear()

  var month = date.getMonth() + 1

  var day = date.getDate()

  var hour = date.getHours()

  var minute = date.getMinutes()

  var second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')

}

function formatNumber(n) {

  n = n.toString()

  return n[1] ? n : '0' + n

}

module.exports = {

  formatTime: formatTime

}
7、
2. pages返回顶部
1、image
a) .js
Page({

    data: {

        url: "",

        hidden: false,

        toastHidden: true,

        modalHidden: true,

        toastText: "数据异常",

        loadingText: "加载中..."

    },

    onLoad: function (options) {

        that = this;

        if (options == null || options.url == null) {

            this.setData({ hidden: true, toastHidden: false });

            return;

        }

        this.setData({

            hidden: true,

            toastHidden: true,

            url: options.url

        })

    },

    //Toast信息改变

    onToastChanged: function (event) {

        this.setData({ toastHidden: true });

    },

    // 长按

    onlongclick: function () {

        this.setData({ modalHidden: false });

    },

    // 保存

    onSaveClick: function (event) {

        var mUrl = "";

        if (event.currentTarget.dataset.url != null)

            mUrl = event.currentTarget.dataset.url;

        console.log("download：" + mUrl);

        saveImage(mUrl);

    },

    // 取消

    onCancelClick: function (event) {

        this.setData({ modalHidden: true });

    },

});

var that;

/**

 * 保存图片

 */

function saveImage(mUrl) {

    that.setData({

        hidden: false,

        toastHidden: true,

        modalHidden: true,

        loadingText: "下载中..."

    });

    wx.downloadFile({

        url: mUrl,

        type: 'image',

        success: function (res) {

            console.log("download success");

            that.setData({

                hidden: true,

                toastHidden: false,

                toastText: "恭喜你，图片保存成功"

            });

        },

        fail: function (res) {

            console.log("download fail");

            that.setData({

                hidden: true,

                toastHidden: false,

                toastText: "保存失败，请稍后再试"

            });

        },

        complete: function (res) {

            console.log("download complete");

        }

    })

}
b) .json
{}
c) .wxml
<!--image.wxml-->

<view >

    <loading hidden="{{hidden}}" >

     {{loadingText}}

    </loading>

    <toast hidden="{{toastHidden}}" bindchange="onToastChanged">

        {{toastText}}

    </toast>

<view bindlongtap = "onlongclick">

    <image class = "bigImage" mode="aspectFill" src="{{url}}" />

</view>

<modal title="是否保存？" confirm-text="保存" cancel-text="取消" data-url="{{url}}"

    hidden="{{modalHidden}}" bindconfirm="onSaveClick" bindcancel="onCancelClick">

</modal>

</view>
d) .wxss
/*image.wxss*/

.bigImage{

    width: 95%;

    height: 1000rpx;

    margin: auto;

    overflow: auto;

    position: absolute;

    top:; left:; bottom:; right:;

}
e)
2、index
a) .js
//index.js

//获取应用实例

var app = getApp()

Page({

  data: {

    items: [],

    hidden: false,

    loading: false,

    // loadmorehidden:true,

    plain: false

  },

  onItemClick: function (event) {

    var targetUrl = "/pages/image/image";

    if (event.currentTarget.dataset.url != null)

      targetUrl = targetUrl + "?url=" + event.currentTarget.dataset.url;

    wx.navigateTo({

      url: targetUrl

    });

  },

  // loadMore: function( event ) {

  //   var that = this

  //   requestData( that, mCurrentPage + 1 );

  // },

  onReachBottom: function () {

    console.log('onLoad')

    var that = this

    that.setData({

      hidden: false,

    });

    requestData(that, mCurrentPage + 1);

  },

  onLoad: function () {

    console.log('onLoad')

    var that = this

    requestData(that, mCurrentPage + 1);

  }

})

/**

 * 定义几个数组用来存取item中的数据

 */

var mUrl = [];

var mDesc = [];

var mWho = [];

var mTimes = [];

var mTitles = [];

var mCurrentPage = 0;

// 引入utils包下的js文件

var Constant = require('../../utils/constant.js');

/**

 * 请求数据

 * @param that Page的对象，用来setData更新数据

 * @param targetPage 请求的目标页码

 */

function requestData(that, targetPage) {

  wx.showToast({

    title: '加载中',

    icon: 'loading'

  });

  wx.request({

    url: Constant.GET_MEIZHI_URL + targetPage,

    header: {

      "Content-Type": "application/json"

    },

    success: function (res) {

      if (res == null ||

        res.data == null ||

        res.data.results == null ||

        res.data.results.length <= 0) {

        console.error("god bless you...");

        return;

      }

      for (var i = 0; i < res.data.results.length; i++)

        bindData(res.data.results[i]);

      //将获得的各种数据写入itemList，用于setData

      var itemList = [];

      for (var i = 0; i < mUrl.length; i++)

        itemList.push({ url: mUrl[i], desc: mDesc[i], who: mWho[i], time: mTimes[i], title: mTitles[i] });

      that.setData({

        items: itemList,

        hidden: true,

        // loadmorehidden:false,

      });

      mCurrentPage = targetPage;

      wx.hideToast();

    }

  });

}

/**

 * 绑定接口中返回的数据

 * @param itemData Gank.io返回的content;

 */

function bindData(itemData) {

  var url = itemData.url.replace("//ww", "//ws");

  var desc = itemData.desc;

  var who = itemData.who;

  var times = itemData.publishedAt.split("T")[0];

  mUrl.push(url);

  mDesc.push(desc);

  mWho.push(who);

  mTimes.push(times);

  mTitles.push("publish by：" + "@" + who + " —— " + times);

}
b) .json
{}
c) .wxml
<!--index.wxml-->

<view>

  <view class= "card" wx:for = "{{items}}">

    <view  data-url="{{item.url}}" bindtap = "onItemClick">

       <image class= "image" mode="aspectFill" src="{{item.url}}"/>

       <view class="title">{{item.title}}</view>

    </view>

  </view>

</view>
d) .wxss
/**index.wxss**/

.card {

    border: 2px solid #ffffff;

    border-radius: 5px;

    background-color: #ffffff;

    box-shadow: 0px 5px 1px #cccccc;

    margin: 8px;

    position: relative;

}

.loadmore {

    border: 0px solid #ffffff;

    border-radius: 5px;

    background-color: #ffffff;

    box-shadow: 0px 5px 1px #cccccc;

    margin: 8px;

}

.image{

  width:100%;

  height:240px;

}

.title {

    padding: 14px;

    font-size: 14px;

}
e)
3、
3.返回顶部
 
4.返回顶部
1、https://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/1
{"error":false,"results":[{"_id":"5b7b836c9d212201e982de6e","createdAt":"2018-08-21T11:13:48.989Z","desc":"2018-08-21","publishedAt":"2018-08-21T00:00:00.0Z","source":"web","type":"\u798f\u5229","url":"https://ws1.sinaimg.cn/large/0065oQSqly1fuh5fsvlqcj30sg10onjk.jpg","used":true,"who":"lijinshanmx"},{"_id":"5b74e9409d21222c52ae4cb4","createdAt":"2018-08-16T11:02:24.289Z","desc":"2018-08-16","publishedAt":"2018-08-16T00:00:00.0Z","source":"api","type":"\u798f\u5229","url":"https://ws1.sinaimg.cn/large/0065oQSqly1fubd0blrbuj30ia0qp0yi.jpg","used":true,"who":"lijinshan"},{"_id":"5b7102749d2122341d563844","createdAt":"2018-08-13T12:00:52.458Z","desc":"2018-08-13","publishedAt":"2018-08-13T00:00:00.0Z","source":"api","type":"\u798f\u5229","url":"https://ww1.sinaimg.cn/large/0065oQSqly1fu7xueh1gbj30hs0uwtgb.jpg","used":true,"who":"lijinshan"},{"_id":"5b6bad449d21226f45755582","createdAt":"2018-08-09T10:56:04.962Z","desc":"2018-08-09","publishedAt":"2018-08-09T00:00:00.0Z","source":"web","type":"\u798f\u5229","url":"https://ww1.sinaimg.cn/large/0065oQSqgy1fu39hosiwoj30j60qyq96.jpg","used":true,"who":"lijinshanmx"},{"_id":"5b67b7fd9d2122195bdbd806","createdAt":"2018-08-06T10:52:45.809Z","desc":"2018-08-06","publishedAt":"2018-08-06T00:00:00.0Z","source":"api","type":"\u798f\u5229","url":"https://ww1.sinaimg.cn/large/0065oQSqly1ftzsj15hgvj30sg15hkbw.jpg","used":true,"who":"lijinshan"},{"_id":"5b63cd4e9d21225e0d3f58c9","createdAt":"2018-08-03T11:34:38.672Z","desc":"2018-08-03","publishedAt":"2018-08-03T00:00:00.0Z","source":"api","type":"\u798f\u5229","url":"https://ww1.sinaimg.cn/large/0065oQSqgy1ftwcw4f4a5j30sg10j1g9.jpg","used":true,"who":"lijinshan"},{"_id":"5b6151509d21225206860f08","createdAt":"2018-08-01T14:21:04.556Z","desc":"2018-08-01","publishedAt":"2018-08-01T00:00:00.0Z","source":"api","type":"\u798f\u5229","url":"https://ww1.sinaimg.cn/large/0065oQSqly1ftu6gl83ewj30k80tites.jpg","used":true,"who":"lijinshan"},{"_id":"5b60356a9d212247776a2e0e","createdAt":"2018-07-31T18:09:46.825Z","desc":"2018-07-31","publishedAt":"2018-07-31T00:00:00.0Z","source":"api","type":"\u798f\u5229","url":"http://ww1.sinaimg.cn/large/0065oQSqgy1ftt7g8ntdyj30j60op7dq.jpg","used":true,"who":"lijinshan"},{"_id":"5b5e93499d21220fc64181a9","createdAt":"2018-07-30T12:25:45.937Z","desc":"2018-07-30","publishedAt":"2018-07-30T00:00:00.0Z","source":"web","type":"\u798f\u5229","url":"https://ww1.sinaimg.cn/large/0065oQSqgy1ftrrvwjqikj30go0rtn2i.jpg","used":true,"who":"lijinshanmx"},{"_id":"5b50107f421aa917a31c0565","createdAt":"2018-07-19T12:15:59.226Z","desc":"2018-07-19","publishedAt":"2018-07-19T00:00:00.0Z","source":"web","type":"\u798f\u5229","url":"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg","used":true,"who":"lijinshanmx"}]}
2、
5.返回顶部
0、
1、
 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

小程序-demo：妹纸图的更多相关文章

  1. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  2. 微信小程序开发 [05] wx.request发送请求和妹纸图

    1.wx.request 微信小程序中用于发起网络请求的API就是wx.request了,具体的参数太多,此处就不再一一详举了,基本使用示例如下: wx.request({ url: 'test.ph ...

  3. 微信小程序demo

    微信小程序demo github地址 去年小程序刚发布时特别火,赶潮流做了个demo.感觉小程序开发还是比较简单的,主要是官方文档写得比较好,遗憾的是很多API需要微信认证才能使用. 由于小程序包大小 ...

  4. 微信小程序DEMO初体验

    小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...

  5. 微信小程序demo－环球小镇

    微信小程序-环球小镇说明:实现了环球小镇(huanqiuxiaozhen.com)移动端商城客户端部分功能,包括首页,分类,购物车,帐户,品牌列表,商品详情等功能.    项目下载:http://bb ...

  6. 微信小程序的轮播图swiper问题

    微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...

  7. 微信小程序登陆流程图时序图

    微信小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系. 微信小程序登录流程时序图 说明 调用 wx.login() 获取 临时登录凭证cod ...

  8. 番外篇！全球首个微信应用号开发教程！小程序 DEMO 视频奉上！

    大家好,我是博卡君.经过国庆节的七天假期,相信很多朋友都已经研究出自己的小程序 demo 了吧?我最近也利用休息时间关注了一下网上关于小程序开发的讨论,今天就利用这个番外篇谈谈自己对小程序的一些想法吧 ...

  9. 微信小程序-阅读小程序demo

    今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的demo,然后现在分享一下. 一.先来上图: 二.然后下面是详细的说明  首先先说下边的tabBar,项目采用json格式的数据配置,不 ...

随机推荐

  1. 【01背包变形】Robberies HDU 2955

    http://acm.hdu.edu.cn/showproblem.php?pid=2955 [题意] 有一个强盗要去几个银行偷盗,他既想多抢点钱,又想尽量不被抓到.已知各个银行 的金钱数和被抓的概率 ...

  2. 事件和委托： 第 6 页 .Net Framework中的委托与事件

    原文发布时间为:2008-11-01 -- 来源于本人的百度文章 [由搬家工具导入] .Net Framework中的委托与事件 尽管上面的范例很好地完成了我们想要完成的工作，但是我们不仅疑惑：为什么 ...

  3. 【Java源码】集合类-队列Queue

    一.描述 队列Queue这种数据结构,通常指先进先出(FIFO)这种容器.可以模拟生活中依次排队这种场景. 下面是集合体系继承树: 二.Queue Queue和List一样都是Collection的子 ...

  4. openstack ocata 的cell 和 placement api

    The Ocata openstack just released recently. The official docs is not very stable yet. Some key steps ...

  5. C#如何引用定义好的dll文件

    1 添加引用,找到dll文件   2 引用类的名称空间,生成类的实例,调用类的方法,测试OK.

  6. 谈一谈关于NODE里的N管理

    模块可能与当前的NODE版本不和,NODE升级问题? 一切尽在掌握 1.首先设置好PATH(你安装的目录) Debian系列: sudo gedit /etc/profile Redhat系列: su ...

  7. 基于UDP的通讯

    XX:那飘过的100~_~{2014/10/03 10:57} UDP是一种面向非连接SOCK_DGRAM,提供无连接服务.数据包以独立包形式发送,不提供无措保证,数据能够丢失或反复. UDP的Ser ...

  8. 【CSS3动画实战】Mailman Icon

    周末闲来无事,就想着做点东西练练手.又苦于自己 PS 水平太差,设计不出什么好看的东西. 干脆就在 Dribbble 上逛一逛,看看有什么看起来比较屌的,实际上却很简单的东西. 一共做了 3 个,均已 ...

  9. 使用HD/IDE层的ioctl接口获取磁盘容量get_hdd_max_sector

    利用HD/IDE layer的ioctl函数接口获取HD/IDE的磁盘容量.HDIO_DRIVE_TASK  能发出訪问LBA地址的命令.但不能读写数据. #include <stdio.h&g ...

  10. UIwebView缩放

    首先就是需要让webView去设置下可以支持缩放 [__webView setScalesPageToFit:YES]; 如果网页支持缩放只需要上面的一句就可以了.你可以加在谷歌的试一下,但是你要加在 ...