微信小程序 实战小程序实例


Posted in Javascript onOctober 08, 2016

微信小程序 实战小程序实例

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

项目中我能学到什么?

  1. tabbar使用方式
  2. 网络调用真实接口
  3. loading使用
  4. scroll-view实现下拉刷新上拉加载
  5. image组件对图片的处理,
  6. 音乐和视频组件的使用
  7. 跳转传值使用
  8. 等等等。。。。

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 欢迎start

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
node.js实现博客小爬虫的实例代码
Oct 08 #Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 #Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 #Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 #Javascript
微信小程序 canvas API详解及实例代码
Oct 08 #Javascript
微信小程序 animation API详解及实例代码
Oct 08 #Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 #Javascript
You might like
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
js单例模式详解实例
2013/11/21 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
javascript实现密码验证
2015/11/10 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
实现python版本的按任意键继续/退出
2016/09/26 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python实现打砖块游戏
2020/02/25 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
python 读取串口数据的示例
2020/11/09 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书