文档章节

微信小程序实战之百思不得姐精简版

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:23
字数 1783
阅读 2
收藏 0
点赞 0
评论 0

这里写图片描述

微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块。这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎star。

地址: https://github.com/shuncaigao/BS

项目中我能学到什么?

  • tabbar使用方式

  • 网络调用真实接口

  • loading使用

  • scroll-view实现下拉刷新上拉加载

  • image组件对图片的处理,

  • 音乐和视频组件的使用

  • 跳转传值使用

  • 等等等。。。。

app.json全局配置文件

{
  "pages":[ "pages/word/word", "pages/image/image", "pages/voice/voice", "pages/video/video", "pages/detail/detail" ],
  "tabBar": { "color": "#a9b7b7", "selectedColor": "#eb4f38", "borderStyle": "white", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/word/word", "text": "段子", "iconPath": "image/wordN.png", "selectedIconPath": "image/wordS.png" }, { "pagePath": "pages/image/image", "text": "图片", "iconPath": "image/imageN.png", "selectedIconPath": "image/imageS.png" }, { "pagePath": "pages/voice/voice", "text": "声音", "iconPath": "image/voiceN.png", "selectedIconPath": "image/voiceS.png" }, { "pagePath": "pages/video/video", "text": "视频", "iconPath": "image/videoN.png", "selectedIconPath": "image/videoS.png" } ] },
  "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#eb4f38", "navigationBarTextStyle":"white" } }

这里写图片描述

这里我们只要配置下程序全局属性,每个页面需要在pags属性中引入,有时候tabbar不显示有可能是因为这个,tabbar底部导航Item分为四个就是list里面的,这里主要配置选中未选中颜色背景色及每个底部选项页面页面引入和图片引入。window 属性主要配置窗体整体的颜色文字颜色和背景色,这里的window属性会被每个页面的window属性给覆盖。

app.wxss

/*整体view样式*/
.containsView{ padding: 15rpx 15rpx 15rpx 15rpx; margin-top: 15rpx; margin-bottom: 15rpx; background-color: white; }
/*头部整体样式*/
.topContainsView{ display: flex; flex-direction: row; align-items: center; margin-bottom: 18rpx; }

/** * 头像样式 */
.profileImage{ width: 60rpx; height: 60rpx; border-radius: 30rpx; }

/*头部显示名字和时间整体样式*/
.topRightView{ margin-left: 15rpx; display: flex; flex-direction: column; }
/*用户名称样式*/
.topRightName{ font-size: 18rpx; }
/*时间样式*/
.topRightTime{ font-size: 14rpx; color: #b8b2b2; margin-top: 10rpx; }

/*因为中间部分不一样不放在整体样式中*/

/*底部view整体样式*/
.bottomView{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
/*每个Item样式*/
.bottomItemView{ display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 18rpx; padding-left: 10rpx; padding-right: 10rpx; }
/*Item样式中的图标样式 顶 踩 分享 评论*/
.bottomItemImage{ width: 45rpx; height: 45rpx; }
/*Item中的文字样式 顶 踩 分享 评论*/
.bottomItemText{ font-size: 15rpx; color: #b8b2b2; margin-left: 10rpx; margin-top: 8rpx; }

/*分割线样式*/
.divLine{ background: #f3f3f3; width: 100%; height: 15rpx; }

这里写图片描述

app.wxss我将四个模块分为三个部分 头部,内容区域, 底部因为每个页面头部,底部样式都一样而中间部分不一样所以我把1,3抽到全局中,注释比较清晰

段子模块

word.wxml

<loading hidden="{{loadingHidden}}">正在加载...</loading> <scroll-view scroll-y="true" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" style="height: 100%"> <block wx:for-items="{{list}}"> <!-- 分割线 --> <view class="divLine"></view> <!-- 整体item样式 --> <view class="containsView"> <view class="topContainsView"> <image class="profileImage" src="{{item.profile_image}}" /> <view class="topRightView"> <text class="topRightName">{{item.name}}</text> <text class="topRightTime">{{item.passtime}}</text> </view> </view> <!-- 中间内容 --> <text class="centerContent">{{item.text}}</text> <!-- 底部view样式 --> <view class="bottomView"> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/ding.png" /> <text class="bottomItemText">{{item.ding}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/cai.png" /> <text class="bottomItemText">{{item.cai}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/share.png" /> <text class="bottomItemText">{{item.repost}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/comment.png" /> <text class="bottomItemText">{{item.comment}}</text> </view> </view> </view> </block> </scroll-view>

外层我们用scroll-view包裹以实现加载更多和上拉刷新 bindscrolltoupper=”bindscrolltoupper” 这个属性当滑动到顶部会调用这个方法bindscrolltolower=”bindscrolltolower”这个则滑到底部会调用,起始这里还可以将头部和底部布局抽出来通过引入方式使用,就不用四个页面都写了,自己可以弄下

word.js

Page({
  data: {
    list: [],
    maxtime: '',
    loadingHidden: false
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    //加载最新
    this.requestData('newlist');
  },

  /** * 上拉刷新 */
  bindscrolltoupper: function () {
    //加载最新
    // this.requestData('newlist');
  },

  /** * 加载更多 */
  bindscrolltolower: function () {
    console.log('到底部')
    //加载更多
    this.requestData('list');
  },

  /** * 请求数据 */
  requestData: function (a) {
    var that = this;
    console.log(that.data.maxtime)
    wx.request({
      url: 'http://api.budejie.com/api/api_open.php',
      data: {
        a: a,
        c: 'data',
        maxtime: that.data.maxtime,
        type: '29',
      },
      method: 'GET',
      success: function (res) {
        console.log(res)
        console.log('上一页', that.data.list)
        that.setData({
          // 拼接数组
          list: that.data.list.concat(res.data.list),
          loadingHidden: true,
          maxtime: res.data.info.maxtime
        })

      }
    })
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

这里写图片描述

这里通过requestData方法加载数据,这个方法接受个参数,就是通过这个参数加载最新还是更多,通过maxtime这个参数去加载下一页,上一页的maxtime作为加载下一页的条件, 加载下一页数据我们通过concat方法将数组进行拼接,并改变加载状态loading。word.wxml和word.json中一个设置内容字体大小,一个设置导航条字,就不贴了。

图片模块

这里写图片描述

image.wxml

<loading hidden="{{loadingHidden}}">正在加载...</loading> <scroll-view scroll-y="true" bindscrolltolower="bindscrolltolower" style="height: 100%"> <block wx:for-items="{{list}}"> <!-- 分割线 --> <view class="divLine"></view> <!-- 整体item样式 --> <view class="containsView"> <view class="topContainsView"> <image class="profileImage" src="{{item.profile_image}}" /> <view class="topRightView"> <text class="topRightName">{{item.name}}</text> <text class="topRightTime">{{item.passtime}}</text> </view> </view> <text style="font-size: 30rpx">{{item.text}}</text> <!-- 当时gif图 --> <view wx:if="{{item.is_gif != 0}}" style="position: relative;"> <image class="centerContent" src="{{item.cdn_img}}" mode="aspectFill" /> </view> <!-- 普通大图 可点击查看全部图片 --> <view data-url="{{item.cdn_img}}" data-height="{{item.height}}" data-width="{{item.width}}" bindtap="lookBigPicture" wx:elif="{{item.is_gif == 0}}" style="position: relative;"> <!-- 图片资源 --> <image class="centerContent" src="{{item.cdn_img}}" mode="aspectFill" /> <!-- 图片上浮动的点击查看详情图片view --> <view class="flexView"> <image src="../../image/seeBigPicture.png" style="width: 60rpx; height: 60rpx;" /> <text class="flexText">点击查看全图</text> </view> </view> <!-- 底部view样式 --> <view class="bottomView"> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/ding.png" /> <text class="bottomItemText">{{item.ding}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/cai.png" /> <text class="bottomItemText">{{item.cai}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/share.png" /> <text class="bottomItemText">{{item.repost}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/comment.png" /> <text class="bottomItemText">{{item.comment}}</text> </view> </view> </view> </block> </scroll-view>

这里写图片描述 这里写图片描述
这里主要看中间部分我们通过是否是gif来区分处理图片,不是gif可以点击查看大图,这里有个view悬浮效果,结合界面和image.wxss看

image.wxss

/*中间文字样式*/
.centerContent{ margin-top: 20rpx; width: 100%; height: 600rpx; }
/*中间浮动文字样式*/
.flexView{ display: flex; justify-content: center; align-items: center; width: 100%; height: 80rpx; position: absolute; z-index: 2; top: 540rpx; background: #000000; opacity: 0.6 }
/*浮动文字*/
.flexText{ color: white; font-size: 35rpx; }

image.js

var detail = '../detail/detail'
Page({
  data: {
    list: [],
    maxtime: '',
    loadingHidden: false
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    this.requestData('newlist');

  },
  /** * 滚动到底部时加载下一页 */
  bindscrolltolower: function () {
    console.log('到底部')
    this.requestData('list');

  },

  /** * 加载数据 */
  requestData: function (a) {
    var that = this;
    wx.request({
      url: 'http://api.budejie.com/api/api_open.php',
      data: {
        a: a,
        c: 'data',
        // 上一页的maxtime作为加载下一页的条件,
        maxtime: this.data.maxtime,
        type: '10',
      },
      method: 'GET',
      success: function (res) {
        console.log(res)
        console.log('上一页', that.datalist)
        that.setData({
          // 拼接数组
          list: that.data.list.concat(res.data.list),
          loadingHidden: true,
          maxtime: res.data.info.maxtime
        })

      }
    })
  },
  /** * 查看大图 */
  lookBigPicture: function (e) {
    console.log(e);
    console.log(e.currentTarget.id)
    //图片url 对应wxml中data-url="{{item.url}}"
    var url = e.currentTarget.dataset.url;
    //获取图片高度 对应wxml中data-height="{{item.height}}"
    var height = e.currentTarget.dataset.height;
    //获取图片高度 对应wxml中data-width="{{item.width}}"
    var width = e.currentTarget.dataset.width;
    // 传参方式向GET请求
    wx.navigateTo({
      url: detail + '?' + 'url=' + url + "&height=" + height + "&width=" + width,
      success: function (res) {
        console.log(res)
      },
      fail: function (err) {
        console.log(err)
      },
    })
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

这里主要看lookBigPicture方法 view data-url=”{{item.cdn_img}}” data-height=”{{item.height}}” data-width=”{{item.width}}”会在逻辑代码中装换成.语法使用 var url = e.currentTarget.dataset.url; 传值调转则向GET发送请求一样按照格式来就行了

音频和视频模块大致雷同看代码去吧!!!

地址: https://github.com/shuncaigao/BS 欢迎star

本文转载自:http://blog.csdn.net/u014360817/article/details/52753565

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
微信小程序 - 考勤签到:第一课--tabBar的用法

如何搭建多选面板(HH自己理解):tabBar的用法??? 1,打开微信小程序的开发工具:微信web开发者工具,创建自己的小程序的项目 2,目录结构中,找到app.json文件,在page中输入tabBar的相...

qq_31653405 ⋅ 04/20 ⋅ 0

腾讯云+社区沙龙·小程序敏捷开发实战(北京)开启报名

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:由云加社区技术沙龙发表在云+社区 2018伊始,最火爆的不是春晚和红包,而是从天而降的“跳一跳”。这款来自微信的轻量级小...

腾讯云+社区 ⋅ 03/22 ⋅ 0

wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度 ⋅ 01/25 ⋅ 2

透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度 ⋅ 01/26 ⋅ 0

小程序开放插件功能,共享开发时代已来

3月13日晚,沉寂许久的微信团队终于又迎来大更新:开放小程序插件功能,开发者工具新增“代码片段”功能。 新功能怎么理解?如何应用?对小程序开发者有什么影响?对小程序生态又将有什么影响...

天鸽小程序 ⋅ 03/14 ⋅ 0

mysql级联查询求指点!

小弟想做一个mysql级联查询的通用函数,在测试输出时,临时表中存放的竟然是N条输入参数中的id,百思不得姐,请高手指点: ps:可以用任意一个有级联的表测试,至于查询效率,也请大家指点一下吧! ...

magican ⋅ 2014/04/05 ⋅ 3

微信小程序: 如何将一台电脑上的代码放到另一台电脑上安装运行

1。 首先,将代码放到固定的文件夹下 2。 启动微信小程序开发工具 3。在工具中点击 在弹出的页面选择: 点击 + 后,选择之前存放微信小程序的代码的文件夹,然后选中 确定即可。 ——————...

qq_31653405 ⋅ 04/23 ⋅ 0

SurfaceView周边淡出效果

请教个问题,点击视频播放,其他地方变黑(有点像变淡的效果),界面底下有评论栏 然后点击界面黑色的地方,又会显示出整个布局。 描述可能不清楚,效果就是百思不得姐里面点击视频播放的效果...

楠D枫 ⋅ 2016/12/01 ⋅ 0

win10系统升级后远程连接 出现身份验证错误

一、出现问题原因,说明 昨天系统关机更新后,今天连接服务器出现 远程连接错误,“出现身份验证错误” 对应的win10 更新版本, 2018-适用于 Windows 10 Version 1709 的 05 累积更新,适合基...

tianma3798 ⋅ 05/11 ⋅ 0

python爬虫:爬取网站视频

python爬取百思不得姐网站视频:http://www.budejie.com/video/ 新建一个py文件,代码如下: #!/usr/bin/python -- coding: UTF-8 -- import urllib,re,requestsimport sysreload(sys)sys.se......

M四月天 ⋅ 2017/05/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JDK1.6和JDK1.7中,Collections.sort的区别,

背景 最近,项目正在集成测试阶段,项目在服务器上运行了一段时间,点击表格的列进行排序的时候,有的列排序正常,有的列在排序的时候,在后台会抛出如下异常,查询到不到数据,而且在另外一...

tsmyk0715 ⋅ 12分钟前 ⋅ 0

spring RESTful

spring RESTful官方文档:http://spring.io/guides/gs/rest-service/ 1. 可以这么去理解RESTful:其实就是web对外提供的一种基于URL、URI的资源供给服务。不是一个原理性知识点。是一个方法论...

BobwithB ⋅ 14分钟前 ⋅ 0

C++ 中命名空间的 5 个常见用法

相信小伙伴们对C++已经非常熟悉,但是对命名空间经常使用到的地方还不是很明白,这篇文章就针对命名空间这一块做了一个叙述。 命名空间在1995年被引入到 c++ 标准中,通常是这样定义的: 命名...

柳猫 ⋅ 16分钟前 ⋅ 0

@Conditional派生注解

@Conditional派生注解(Spring注解版原生的@Conditional作用) 作用:必须是@Conditional指定的条件成立,才给容器中添加组件,配置配里面的所有内容才生效; @Conditional扩展注解 作用(判...

小致dad ⋅ 17分钟前 ⋅ 0

适配器模式

适配器模式 对象适配器 通过私有属性来实现的类适配器 通过继承来实现的接口适配器 通过继承一个默认实现的类实现的

Cobbage ⋅ 21分钟前 ⋅ 0

Java 限流策略

概要 在大数据量高并发访问时,经常会出现服务或接口面对暴涨的请求而不可用的情况,甚至引发连锁反映导致整个系统崩溃。此时你需要使用的技术手段之一就是限流,当请求达到一定的并发数或速...

轨迹_ ⋅ 25分钟前 ⋅ 0

GridView和子View之间的间隙

默认的情况下GridView和子View之间会有一个间隙,原因是GridView为了在子View被选中时在子View周围显示一个框。去掉的办法如下: android:listSelector="#0000" 或 setSelector(new ColorDra...

国仔饼 ⋅ 28分钟前 ⋅ 0

idea插件开发

1 刷新页面要使用多线程 2 调试要使用restart bug 不要去关闭调试的idea 否则再次启动会卡住

林伟琨 ⋅ 28分钟前 ⋅ 0

Java 内存模型

物理机并发处理方案 绝大多数计算任务,并不是单纯依赖 cpu 的计算完成,不可避免需要与内存交互,获取数据。内存要拿到数据,需要和硬盘发生 I/O 操作。计算机存储设备与 cpu 之间的处理速度...

长安一梦 ⋅ 35分钟前 ⋅ 0

思路分析 如何通过反射 给 bean entity 对象 的List 集合属性赋值?

其实 这块 大家 去 看 springmvc 源码 肯定可以找到实现办法。 因为 spirngmvc 的方法 是可以 为 对象 参数里面的 list 属性赋值的。 我也没有看 具体的 mvc 源码实现,我这里只是 写一个 简...

之渊 ⋅ 55分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部