文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:23
字数 1783
阅读 3
收藏 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
江门
高级程序员
私信 提问
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
08/27
0
0
5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小...

Parry
11/19
0
0
小程序 大假期,技术猿国庆假期的正确打开方式…

明天(10月1日)就是国庆黄金7天假了。作为技术猿,除了美美的睡一觉好像也没啥别的事了。与其窝在家里玩手机刷朋友圈,不如做个小程序玩玩。 微信小程序开发正当时,没有内测资格不要紧。这...

凝小紫
2016/09/30
5.7K
11
微信小程序 - 考勤签到:第一课--tabBar的用法

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

qq_31653405
04/20
0
0
搞定了微信小程序富文本渲染解决方案-后端渲染方案Html2Wxml2J

先介绍一下最近遇到的问题: 最近小程序项目中有文章详情页需要渲染富文本,微信小程序官方提供的<rich-text>是个弱鸡,很多标签不支持,用起来也麻烦,性能也不咋地。 吐槽完了,我们决定寻...

山东-小木
11/18
0
3

没有更多内容

加载失败,请刷新页面

加载更多

SRE的含义及与 DevOps 如何关联?

虽然站点可靠性工程师(site reliability engineer SRE)角色在近几年变得流行起来,但是很多人 —— 甚至是软件行业里的 —— 还不知道 SRE 是什么或者 SRE 都干些什么。为了搞清楚这些问题...

linuxCool
2分钟前
0
0
月入3万之一个程序员的转行坎坷历程

陈年往事 “我月入3万,怎么会少少了你一个鸡蛋啊?” 这是2017年9月左右的一个新闻,一位煎饼摊大妈因和顾客争执时脱口而出这样一句话而走红。当时还上了各大新闻的头条。 互联网兴起今天,...

苏南-首席填坑官
24分钟前
1
1
OSChina 周一乱弹 —— 眼看着这颗陨石砸了下来

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Nachtblut的单曲《Antik》 《Antik》- Nachtblut 手机党少年们想听歌,请使劲儿戳(这里) @mr_chip :上海的初雪之后有点冷 ...

小小编辑
49分钟前
172
7
Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
今天
2
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部