E企盈营销工具技术服务商 热线:4006-838-530

微信小阿巴嘎旗E企盈小程序程序开发(二)入门之日历打卡小程序发现页

相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(三)入门之创建打卡活动微信小程序开发(四)入门之打卡功能开发

前言

上篇文章简单的介绍了微信开发者工具和小程序的框架,后续文章将会对日历打卡各个模块的开发思路以及遇到的问题和大家做个分享,本篇将对首页的开发做个介绍。

需求

发现页面需求图如下    ① json文件配置上篇文章在介绍小程序的框架时,每个页面都会有json文件,在json文件中可以配置当前页面的窗口信息。下面来介绍下常用的一些配置。{    "enablePullDownRefresh": true,                         //是否开启下拉刷新 对应js文件中    "navigationBarBackgroundColor": "#7885e8",             //导航栏背景颜色 ,16进制     "navigationBarTitleText": "发现",                       //导航栏标题内容    "navigationBarTextStyle": "white",                     //导航栏标题字体颜色    "backgroundColor": "#7885e8"                           //下拉后窗口拓展部分背景色,一般设置导航栏(默认白色)    "disableScroll":false                                  //设置为true,则不能上下滚动,只在页面的page.json生效     "onReachBottonDistance":100                            //触发上拉加载方法时距离底部距离(不设置为0)}

②swiper控件 - 轮播图实现相对于安卓开发来说,小程序中封装好了易于开发者操作的视图滑块容器,因为swiper组件属性过多,这里不一一介绍,有兴趣可以研究下开发文档。swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' indicator-active-color='{{indicatorSelectColor}}' duration='{{duration}}' circular="true" style="height:175px'      block wx:for='{{bannerDatas}}'        swiper-item          image src='{{item.dakaPic}}'  class="slide-image" lazy-mode='true'  mode='aspectFill' style='height:100%' /        /swiper-item      /block    /swiper

这里顺带介绍下image组件,有两个比较重要的属性

  • lazy-mode : 懒加载,对page和scroll-view下的image才有效。用户滚动页面自动获取更多的图片,不会一次性全部加载mode : 图片剪裁缩放模式,有13种,大家可以根据项目的需求自行选择。③页面跳转(路由跳转)这部分使用的是flex布局,将分类平分页面宽度即可。这里较为简单,不贴代码了。点击分类跳转到此分类的页面,下面来介绍下小程序页面的跳转。wx.navigateTo({            //保留当前页面 跳转到其他页面,url来表明页面的地址  url: 'test?id=1'})wx.redirectTo({            //关闭当前页面,跳转到其他页面  url: 'test?id=1'})wx.switchTab({            //跳转tabbar页面,关闭其他所有非tabbar页面  url: '/index'})wx.navigateBack({          //返回之前的页面,参数delta是返回的页面数  delta: 2})wx.reLaunch({              //关闭所有页面,跳转到指定页面  url: 'test?id=1'})

    页面之间相互跳转避免不了值传递,小程序里页面间传值也是很简单,小程序提供了属性data-xxx(名字自取),可以设置对应的值,通过bintap(点击事件绑定)在对应的方法中获取到传递的值通过url 路径拼接相应的参数。view class='read-layout tag-item' data-index='0' bindtap='tagClick'   image class='tag-logo' src='../imgs/tag_read.png'/image   text class='tag-name'读书/text/view

    // 点击标签tagClick: function (event) {    //绑定点击事件产生event事件,在  console.log(event)            //控制台输出event事件对象  var tagId = event.currentTarget.dataset.index;  wx.navigateTo({    url: 'taglist/taglist?tagId=' + tagId,       //传值到下个页面  })},

    ④template模板使用(重要)考虑到模块化的复用,小程序提供了template,以发现列表热门打卡列表为例,将介绍模板的编写以及使用。创建template文件夹以及item-hot.wxml 与 item-hot.wxss文件。

  • 编写wxml文件(wxss样式文件这里就不贴出来)!--模板要定义一个名字 作为使用凭据--template name="hotSignTemplate"  view class="list"    !-- 创建者信息 --    view class="personal-info"      image class="avatar" src="{{headPortrait}}"/image      text class="nickname"{{nickName}}/text    /view    !-- 打卡封面 --    image class="sign-cover" mode='aspectFill' src="{{pic}}"/image    !-- 打卡活动名称 --    text class="sign-title"{{activityName}}/text    !-- 参加者信息 --    view class="sign-info"      text class="numberop"{{joinNum}}/text      text class="sign-hint1"人参加/text      view class="line2"/view      text class="sign-times"{{dakaNum}}/text      text class="sign-hint1"次打卡/text开通牛排小程序电话:4006-838-530    /view    view class="line3"/view  /view/template
  • 页面引入template 模板!-- 导入template --import src="../template/item-hot/item-hot.wxml" /view class="home-item"  block wx:for='{{signDatas}}' wx:for-item='item'    !-- 模板上不能绑定点击事件,在外面添加一层view --    view bindtap='tapToDetail'  data-id='{{item.id}}'      !-- template使用 这里的 is="templateName" --      template is='hotSignTemplate' data='{{...item}}' /    /view  /block/view

    wxss文件也要导入template/item-hot/item-hot.wxss,模板样式才能生效@import "../../template/item-hot/item-hot.wxss";

    注意:小程序中template 是不需要在app.json 中注册的,它只是作为页面的组成部分,并不是页面,也没有自己的生命周期,当然我们在template中是可以创建item-hot.js和item.json文件的。⑤底部 TabBar实现在上一篇文章中介绍了小程序系统tabbar的配置,小程序提供的tabbar虽然方便,但是不能对其定制,根据要求设置对应的宽高,设置的图片看起来也很模糊,在开发时候舍弃了系统提供的tabbar,根据UI要求编写了自己的tabbar,通过模板的方式创建template/foot_menu/foot_menu,哪些页面需要使用直接以模板的形式引入即可。wxml文件:template name="footMenu"   !--适配IPhoneX--  view class="{{isIphoneX ? 'footMenuNavWrap-x':'footMenuNavWrap-normal'}}"    view class="{{isIphoneX ?'img-text-iphonex':'img-text-normal'}}" bindtap="bindTap" data-index='0'      image class="menuIcon" src="{{isAtDiscovery ? '../imgs/discovery_select.png' : '../imgs/discovery_normal.png'}}" mode="widthFix" /      view class="text {{isAtDiscovery ? 'activityText' : 'defaultText'}}"发现/view    /view    view class="{{isIphoneX ?'img-text-iphonex':'img-text-normal'}}" bindtap="bindTap" data-index='1'      image class="menuIcon" src="{{isAtManage ? '../imgs/manage_select.png' : '../imgs/manage_normal.png'}}" mode="widthFix" /      view class="text {{isAtManage? 'activityText' : 'defaultText'}}"管理/view    /view    view class="{{isIphoneX ?'img-text-iphonex':'img-text-normal'}}" bindtap="bindTap" data-index='2'      image class="menuIcon" src="{{isAtMine ? '../imgs/mine_select.png' : '../imgs/mine_normal.png'}}" mode="widthFix" /      view class="text {{i开通婴儿推车小程序电话:4006-838-530sAtMine ? 'activityText' : 'defaultText'}}"我的/view    /view  /view/template

    //wxss文件.footMenuNavWrap-x {  width: 100%;  display: flex;  flex-direction: row;  align-items: center;  height: 140rpx;  position: fixed;  bottom: 0;  left: 0;  background-color: #fff;  border-top: 1px solid #F7F7F7;}.footMenuNavWrap-normal {  width: 100%;  display: flex;  flex-direction: row;  align-items: center;  height: 100rpx;  position: fixed;  bottom: 0;  left: 0;  background-color: #fff;  border-top: 1px solid #F7F7F7;}.footMenuNavWrap-x .img-text-iphonex {  flex: 1;  display: flex;  flex-direction: column;  padding-bottom: 20rpx;  align-items: center;}.footMenuNavWrap-normal .img-text-normal {  flex: 1;  display: flex;  flex-direction: column;  align-items: center;}.footMenuNavWrap-x .menuIcon {  margin-top: 5rpx;  width: 38rpx;  height: 38rpx;}.footMenuNavWrap-x .text {  margin-top: 10rpx;  font-size: 24rpx;}.footMenuNavWrap-x .defaultText {  color: #333;}.footMenuNavWrap-x .activityText {  color: #7885e8;}.footMenuNavWrap-normal .menuIcon {  margin-top: 5rpx;  width: 38rpx;  height: 38rpx;}.footMenuNavWrap-normal .text {  margin-top: 10rpx;  font开通计算器小程序电话:4006-838-530-size: 24rpx;}.footMenuNavWrap-normal .defaultText {  color: #333;}.footMenuNavWrap-normal .activityText {  color: #7885e8;}

    结尾

    本篇文章介绍了日历打卡小程序首页的几个功能点的开发点,今天在写这篇文的时候也是查看了小程序的开发文档,image标签之前在使用时候还是没有lazy-mode 懒加载模式,现在已经出现在文档中。随着小程序不断的更新发展,不断地学习是必要的。写博客也是温故知新,下篇将介绍网络请求以及请求的封装,介绍创建打卡等功能点开发。

  • 赞(0) 打赏
    未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小阿巴嘎旗E企盈小程序程序开发(二)入门之日历打卡小程序发现页
    分享到: 更多 (0)

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    模王系统开发

    联系我们升级日志

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信扫一扫打赏