在小程序中用.生成带class 的view_微信小程序开发日记日历打卡小程序发现页

说明：这个系列是我开发微信小程序的过程，更新的时间要看我码代码的速度

话不多说～  直接开始：

首先我们要想好用户的需求，再开始搭建

需求

发现页面需求图如下

    

① 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'>                        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 路径拼接相应的参数。(代码框可左右上下滑动)

class=   class=   class=

// 点击标签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>    view>    <view class="line3">view>  view>template>

页面引入template 模板(代码框可左右上下滑动)

<import src="../template/item-hot/item-hot.wxml" /> <view class="home-item">  <block wx:for='{{signDatas}}' wx:for-item='item'>        <view bindtap='tapToDetail'  data-id='{{item.id}}'>            <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">     <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 {{isAtMine ? '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-size: 24rpx;} .footMenuNavWrap-normal .defaultText {  color: #333;} .footMenuNavWrap-normal .activityText {  color: #7885e8;}

你竟然还能看到这里？

结尾

怎么样？是不是挺简单，哈哈。介绍了日历打卡小程序首页的几个功能点的开发点，今天在写这篇文的时候也是查看了小程序的开发文档，image标签之前在使用时候还是没有lazy-mode 懒加载模式，现在已经出现在文档中。今天先写到这吧，已经写了2866字了，头发要掉光了