相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(三)入门之创建打卡活动微信小程序开发(四)入门之打卡功能开发
前言
上篇文章简单的介绍了微信开发者工具和小程序的框架,后续文章将会对日历打卡各个模块的开发思路以及遇到的问题和大家做个分享,本篇将对首页的开发做个介绍。
需求
发现页面需求图如下 ① json文件配置上篇文章在介绍小程序的框架时,每个页面都会有json文件,在json文件中可以配置当前页面的窗口信息。下面来介绍下常用的一些配置。{ "enablePullDownRefresh": true, //是否开启下拉刷新 对应js文件中 "navigationBarBackgroundColor": "#7885e8", //导航栏背景颜色 ,16进制 "navigationBarTitleText": "发现", //导航栏标题内容 "navigationBarTextStyle": "white", //导航栏标题字体颜色 "backgroundColor": "#7885e8" //下拉后窗口拓展部分背景色,一般设置导航栏(默认白色) "disableScroll":false //设置为true,则不能上下滚动,只在页面的page.json生效 "onReachBottonDistance":100 //触发上拉加载方法时距离底部距离(不设置为0)}
上篇文章简单的介绍了微信开发者工具和小程序的框架,后续文章将会对日历打卡各个模块的开发思路以及遇到的问题和大家做个分享,本篇将对首页的开发做个介绍。
需求
发现页面需求图如下 ① json文件配置上篇文章在介绍小程序的框架时,每个页面都会有json文件,在json文件中可以配置当前页面的窗口信息。下面来介绍下常用的一些配置。{ "enablePullDownRefresh": true, //是否开启下拉刷新 对应js文件中 "navigationBarBackgroundColor": "#7885e8", //导航栏背景颜色 ,16进制 "navigationBarTitleText": "发现", //导航栏标题内容 "navigationBarTextStyle": "white", //导航栏标题字体颜色 "backgroundColor": "#7885e8" //下拉后窗口拓展部分背景色,一般设置导航栏(默认白色) "disableScroll":false //设置为true,则不能上下滚动,只在页面的page.json生效 "onReachBottonDistance":100 //触发上拉加载方法时距离底部距离(不设置为0)}
发现页面需求图如下 ① 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组件,有两个比较重要的属性
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文件。
!--模板要定义一个名字 作为使用凭据--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 --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;}
最新评论