ylbtech-小程序-demo：妹纸图

1.返回顶部
0、
   
1、app.js
  1. //app.js
  2. App({
  3.   onLaunch: function () {
  4.     //调用API从本地缓存中获取数据
  5.     var logs = wx.getStorageSync('logs') || []
  6.     logs.unshift(Date.now())
  7.     wx.setStorageSync('logs', logs)
  8.   },
  9.   getUserInfo:function(cb){
  10.     var that = this
  11.     if(this.globalData.userInfo){
  12.       typeof cb == "function" && cb(this.globalData.userInfo)
  13.     }else{
  14.       //调用登录接口
  15.       wx.login({
  16.         success: function () {
  17.           wx.getUserInfo({
  18.             success: function (res) {
  19.               that.globalData.userInfo = res.userInfo
  20.               typeof cb == "function" && cb(that.globalData.userInfo)
  21.             }
  22.           })
  23.         }
  24.       })
  25.     }
  26.   },
  27.   globalData:{
  28.     userInfo:null
  29.   }
  30. })
2、app.json
  1. {
  2.   "pages":[
  3.     "pages/index/index",
  4.     "pages/image/image"
  5.   ],
  6.   "window":{
  7.     "backgroundTextStyle":"dark",
  8.     "navigationBarBackgroundColor": "#fff",
  9.     "navigationBarTitleText": "妹纸图",
  10.     "navigationBarTextStyle":"black"
  11.   }
  12. }
3、app.wxss
  1. /**app.wxss**/
4、project.config.json
  1. {
  2.     "description": "项目配置文件。",
  3.     "packOptions": {
  4.         "ignore": []
  5.     },
  6.     "setting": {
  7.         "urlCheck": false,
  8.         "es6": true,
  9.         "postcss": true,
  10.         "minified": true,
  11.         "newFeature": true
  12.     },
  13.     "compileType": "miniprogram",
  14.     "libVersion": "2.2.3",
  15.     "appid": "wx7d22ab7088f2db6a",
  16.     "projectname": "meiziApp",
  17.     "isGameTourist": false,
  18.     "condition": {
  19.         "search": {
  20.             "current": -1,
  21.             "list": []
  22.         },
  23.         "conversation": {
  24.             "current": -1,
  25.             "list": []
  26.         },
  27.         "game": {
  28.             "currentL": -1,
  29.             "list": []
  30.         },
  31.         "miniprogram": {
  32.             "current": -1,
  33.             "list": []
  34.         }
  35.     }
  36. }
5、pages
-image
-index
6、utils
-constant.js
  1. //url相关
  2. var BASE_URL = "http://gank.io/api";
  3. var GET_MEIZHI_URL = BASE_URL.concat("/data/%E7%A6%8F%E5%88%A9/10/");
  4.  
  5. // 将方法、变量暴露出去
  6. module.exports = {
  7.     BASE_URL: BASE_URL,
  8.     GET_MEIZHI_URL: GET_MEIZHI_URL
  9. }
-util.js
  1. // 工具类
  2. function formatTime(date) {
  3.   var year = date.getFullYear()
  4.   var month = date.getMonth() + 1
  5.   var day = date.getDate()
  6.  
  7.   var hour = date.getHours()
  8.   var minute = date.getMinutes()
  9.   var second = date.getSeconds()
  10.  
  11.   return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
  12. }
  13.  
  14. function formatNumber(n) {
  15.   n = n.toString()
  16.   return n[1] ? n : '0' + n
  17. }
  18.  
  19. module.exports = {
  20.   formatTime: formatTime
  21. }
7、
2. pages返回顶部
1、image
a) .js
  1. Page({
  2.     data: {
  3.         url: "",
  4.         hidden: false,
  5.         toastHidden: true,
  6.         modalHidden: true,
  7.         toastText: "数据异常",
  8.         loadingText: "加载中..."
  9.     },
  10.  
  11.     onLoad: function (options) {
  12.         that = this;
  13.         if (options == null || options.url == null) {
  14.             this.setData({ hidden: true, toastHidden: false });
  15.             return;
  16.         }
  17.  
  18.         this.setData({
  19.             hidden: true,
  20.             toastHidden: true,
  21.             url: options.url
  22.         })
  23.     },
  24.     //Toast信息改变
  25.     onToastChanged: function (event) {
  26.         this.setData({ toastHidden: true });
  27.     },
  28.     // 长按
  29.     onlongclick: function () {
  30.         this.setData({ modalHidden: false });
  31.     },
  32.     // 保存
  33.     onSaveClick: function (event) {
  34.         var mUrl = "";
  35.         if (event.currentTarget.dataset.url != null)
  36.             mUrl = event.currentTarget.dataset.url;
  37.         console.log("download：" + mUrl);
  38.         saveImage(mUrl);
  39.     },
  40.     // 取消
  41.     onCancelClick: function (event) {
  42.         this.setData({ modalHidden: true });
  43.     },
  44. });
  45.  
  46. var that;
  47. /**
  48.  * 保存图片
  49.  */
  50. function saveImage(mUrl) {
  51.     that.setData({
  52.         hidden: false,
  53.         toastHidden: true,
  54.         modalHidden: true,
  55.         loadingText: "下载中..."
  56.     });
  57.     wx.downloadFile({
  58.         url: mUrl,
  59.         type: 'image',
  60.         success: function (res) {
  61.             console.log("download success");
  62.             that.setData({
  63.                 hidden: true,
  64.                 toastHidden: false,
  65.                 toastText: "恭喜你，图片保存成功"
  66.             });
  67.         },
  68.         fail: function (res) {
  69.             console.log("download fail");
  70.             that.setData({
  71.                 hidden: true,
  72.                 toastHidden: false,
  73.                 toastText: "保存失败，请稍后再试"
  74.             });
  75.         },
  76.         complete: function (res) {
  77.             console.log("download complete");
  78.         }
  79.     })
  80. }
b) .json
  1. {}
c) .wxml
  1. <!--image.wxml-->
  2. <view >
  3.     <loading hidden="{{hidden}}" >
  4.      {{loadingText}}
  5.     </loading>
  6.  
  7.     <toast hidden="{{toastHidden}}" bindchange="onToastChanged">
  8.         {{toastText}}
  9.     </toast>
  10.  
  11. <view bindlongtap = "onlongclick">
  12.     <image class = "bigImage" mode="aspectFill" src="{{url}}" />
  13. </view>
  14.  
  15. <modal title="是否保存？" confirm-text="保存" cancel-text="取消" data-url="{{url}}"
  16.     hidden="{{modalHidden}}" bindconfirm="onSaveClick" bindcancel="onCancelClick">
  17. </modal>
  18.  
  19. </view>
d) .wxss
  1. /*image.wxss*/
  2. .bigImage{
  3.     width: 95%;
  4.     height: 1000rpx;
  5.     margin: auto;
  6.     overflow: auto;
  7.     position: absolute;
  8.     top:; left:; bottom:; right:;
  9. }
e)
2、index
a) .js
  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.   data: {
  6.     items: [],
  7.     hidden: false,
  8.     loading: false,
  9.     // loadmorehidden:true,
  10.     plain: false
  11.   },
  12.  
  13.   onItemClick: function (event) {
  14.     var targetUrl = "/pages/image/image";
  15.     if (event.currentTarget.dataset.url != null)
  16.       targetUrl = targetUrl + "?url=" + event.currentTarget.dataset.url;
  17.     wx.navigateTo({
  18.       url: targetUrl
  19.     });
  20.   },
  21.  
  22.   // loadMore: function( event ) {
  23.   //   var that = this
  24.   //   requestData( that, mCurrentPage + 1 );
  25.   // },
  26.  
  27.   onReachBottom: function () {
  28.     console.log('onLoad')
  29.     var that = this
  30.     that.setData({
  31.       hidden: false,
  32.     });
  33.     requestData(that, mCurrentPage + 1);
  34.   },
  35.  
  36.   onLoad: function () {
  37.     console.log('onLoad')
  38.     var that = this
  39.     requestData(that, mCurrentPage + 1);
  40.   }
  41.  
  42. })
  43.  
  44. /**
  45.  * 定义几个数组用来存取item中的数据
  46.  */
  47. var mUrl = [];
  48. var mDesc = [];
  49. var mWho = [];
  50. var mTimes = [];
  51. var mTitles = [];
  52.  
  53. var mCurrentPage = 0;
  54.  
  55. // 引入utils包下的js文件
  56. var Constant = require('../../utils/constant.js');
  57.  
  58. /**
  59.  * 请求数据
  60.  * @param that Page的对象，用来setData更新数据
  61.  * @param targetPage 请求的目标页码
  62.  */
  63. function requestData(that, targetPage) {
  64.   wx.showToast({
  65.     title: '加载中',
  66.     icon: 'loading'
  67.   });
  68.   wx.request({
  69.     url: Constant.GET_MEIZHI_URL + targetPage,
  70.     header: {
  71.       "Content-Type": "application/json"
  72.     },
  73.     success: function (res) {
  74.       if (res == null ||
  75.         res.data == null ||
  76.         res.data.results == null ||
  77.         res.data.results.length <= 0) {
  78.  
  79.         console.error("god bless you...");
  80.         return;
  81.       }
  82.  
  83.       for (var i = 0; i < res.data.results.length; i++)
  84.         bindData(res.data.results[i]);
  85.  
  86.       //将获得的各种数据写入itemList，用于setData
  87.       var itemList = [];
  88.       for (var i = 0; i < mUrl.length; i++)
  89.         itemList.push({ url: mUrl[i], desc: mDesc[i], who: mWho[i], time: mTimes[i], title: mTitles[i] });
  90.  
  91.       that.setData({
  92.         items: itemList,
  93.         hidden: true,
  94.         // loadmorehidden:false,
  95.       });
  96.  
  97.       mCurrentPage = targetPage;
  98.  
  99.       wx.hideToast();
  100.     }
  101.   });
  102. }
  103.  
  104. /**
  105.  * 绑定接口中返回的数据
  106.  * @param itemData Gank.io返回的content;
  107.  */
  108. function bindData(itemData) {
  109.  
  110.   var url = itemData.url.replace("//ww", "//ws");
  111.   var desc = itemData.desc;
  112.   var who = itemData.who;
  113.   var times = itemData.publishedAt.split("T")[0];
  114.  
  115.   mUrl.push(url);
  116.   mDesc.push(desc);
  117.   mWho.push(who);
  118.   mTimes.push(times);
  119.   mTitles.push("publish by：" + "@" + who + " —— " + times);
  120. }
b) .json
  1. {}
c) .wxml
  1. <!--index.wxml-->
  2. <view>
  3.  
  4.   <view class= "card" wx:for = "{{items}}">
  5.  
  6.     <view  data-url="{{item.url}}" bindtap = "onItemClick">
  7.        <image class= "image" mode="aspectFill" src="{{item.url}}"/>
  8.        <view class="title">{{item.title}}</view>
  9.     </view>
  10.  
  11.   </view>
  12.  
  13. </view>
d) .wxss
  1. /**index.wxss**/
  2. .card {
  3.     border: 2px solid #ffffff;
  4.     border-radius: 5px;
  5.     background-color: #ffffff;
  6.     box-shadow: 0px 5px 1px #cccccc;
  7.     margin: 8px;
  8.     position: relative;
  9. }
  10.  
  11. .loadmore {
  12.     border: 0px solid #ffffff;
  13.     border-radius: 5px;
  14.     background-color: #ffffff;
  15.     box-shadow: 0px 5px 1px #cccccc;
  16.     margin: 8px;
  17. }
  18.  
  19. .image{
  20.   width:100%;
  21.   height:240px;
  22. }
  23.  
  24. .title {
  25.     padding: 14px;
  26.     font-size: 14px;
  27. }
e)
3、
3.返回顶部
 
4.返回顶部
1、https://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/1
  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. 博弈 Nim问题 POJ2234

    定义: 通常的Nim游戏的定义是这样的:有若干堆石子,每堆石子的数量都是有限的,合法的移动是 “选择一堆石子并拿走若干颗(不能不拿)”,如果轮到某个人时所有的石子堆都已经被拿空了, 则判负(因为他此刻 ...

  2. 2017"百度之星"程序设计大赛 - 初赛（B）度度熊的交易计划

    n个村庄m条带权路,权值为花费,村庄可以造东西卖东西,造完东西可以换地方卖,给出每个村庄造东西花费a和最多个数b.卖东西价值c和最多个数d,求最大收益. 裸的费用流.然而还WA了一发.很好. 建源向每 ...

  3. bitset初始化问题

    在C++primer上面说,bitset可以用unsigned long来进行初始化,但是上面的例子只是采用了常数如0xffff,而在实际中,当在vs2010中,我采用unsigned long类型的 ...

  4. SpringMvc架构流程

  5. final finally finalize 区别及用法

    final 1,final修饰的class,代表不可以继承扩展. 2.final的方法也是不可以重写的. 3.final修饰的变量是不可以修改的.这里所谓的不可修改对于基本类型来来,的确是不可以修改. ...

  6. Windows下C/C++连接mysql数据库的方法

    步骤 安装MySQL数据库 项目属性页->C/C++->常规->附加包含目录:xxx\mysql Server 5.6\include 项目属性页->链接器->常规-&g ...

  7. 发挥bat的作用

    from 转自:http://blog.csdn.net/hitlion2008/article/details/7467252 1.什么是Windows BATCH BATCH也就是批处理文件,有时 ...

  8. mongodb数据出现undefined如何查询

    某些字段出现undefined,该如何查询? 如下: db.getCollection('license').find({"holder_code":{$type:"un ...

  9. JavaScript语句-流程控制语句

    JavaScript定义了一组语句,语句通常用于执行一定的任务.语句可以很简单,也可以很复杂. 选择结构,可以在程序中创建交叉结构来指定程序流的可能方向.JavaScript中有四种选择结构: 1.单 ...

  10. IOS报错:Unexpected ‘@’ in program

    IOS开发中出现此错误的原因: 1.宏定义重复. 我在OC与C++混编的时候,由于C++中使用到了interface,在工程中年将interface从定义为struct,当引用此接口时候出现Unexp ...