今天开始学习小程序,按自己写APP的顺序开始,就不按微信官方文档来了。
有些控件是结合官方和网上其他同学分享的代码。
这一部分看官方网站,了解一下小程序的架构页面组成啥的,没什么难度,打开微信开发者工具,创建一个QuickStart 项目就看到了。
下一步看一下官方的小程序demo,看看都有哪些功能样式,这个跟开发文档是对应的。demo在这里:
然后就可以开始开发了!下面就按功能开始学习了~
tabBar先创建几个页面,要注意文件夹和页面名称,以及app.json里面的配置。官方文档描述的很详细。
注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。
创建一个放图片的文件夹,放上几张tabBar小图标。
在app.json中写tanBar的配置,tabBar与pages、window同级。
"tabBar":{ "color": "#ddd", "selectedColor": "#1AAD00", "backgroundColor": "#fff", "borderStyle": "black", "list":[ { "pagePath": "pages/index/index", "iconPath": "images/footer-icon-01.png", "selectedIconPath": "images/footer-icon-01-active.png", "text": "首页" }, { "pagePath": "pages/find/find", "iconPath": "images/footer-icon-03.png", "selectedIconPath": "images/footer-icon-03-active.png", "text": "发现" }, { "pagePath": "pages/mine/mine", "iconPath": "images/footer-icon-04.png", "selectedIconPath": "images/footer-icon-04-active.png", "text": "我的" } ] }编译一下,tabBar就出现了~
轮播图使用微信提供的swiper控件,在页面wxml中添加控件
<view class=http://www.yiyongtong.com/archives/"page-body"> <view class=http://www.yiyongtong.com/archives/"page-section page-section-spacing swiper"> <swiper indicator-dots=http://www.yiyongtong.com/archives/"{{indicatorDots}}" autoplay=http://www.yiyongtong.com/archives/"{{autoplay}}" interval=http://www.yiyongtong.com/archives/"{{interval}}" duration=http://www.yiyongtong.com/archives/"{{duration}}"> <block wx:for=http://www.yiyongtong.com/archives/"{{background}}" wx:key=http://www.yiyongtong.com/archives/"*this"> <swiper-item> <image src='{{item.url}}' class='slide-image' mode='aspectFill' ></image> </swiper-item> </block> </swiper> </view> 在wxss中设置样式 .swiper { height: 400rpx; width: 100%; } .swiper image { height: 100%; width: 100%; }在js 中设置数据
data: { background:[ {url:'../../images/banner/banner1.jpeg'}, { url: '../../images/banner/banner2.png' }, { url: '../../images/banner/banner3.png' }, ], indicatorDots: true, vertical: false, autoplay: true, interval: 2000, duration: 500 },就这么简单,轮播图就出现了,真的比iOS开发简单多了-_-!
现在的样子(直接从别人的项目抠来的图标,配色巨丑请忽略~):
九宫格九宫格功能上网查了几种实现方式,发现还是直接用weui比较方便
下面是实现步骤:
.wxml中,添加weui-grids
<view class=http://www.yiyongtong.com/archives/"weui-grids"> <view class=http://www.yiyongtong.com/archives/"weui-grid" wx:for=http://www.yiyongtong.com/archives/"{{routers}}" wx:key=http://www.yiyongtong.com/archives/"name"> <navigator url=http://www.yiyongtong.com/archives/"{{item.url}}"> <view class=http://www.yiyongtong.com/archives/"weui-grid__icon"> <image src=http://www.yiyongtong.com/archives/" {{item.icon}}" mode=http://www.yiyongtong.com/archives/"scaleToFill" /> </view> <text class=http://www.yiyongtong.com/archives/"weui-grid__label">{{item.text}}</text> </navigator> </view> </view>