静态网页制作方法

日期:2020-12-28 类型:产品中心

静态网页制作方法:微信小程序综合案例实践2

之前用AndroidStudio写过一个菜谱app 这次打算用微信小程序模拟一下app的首页。因为对微信小程序的不熟悉 完成过程中还是掉到了各种小坑。

首页的主要组成部分

输入框----input搜索按钮----image一个滑动的图片框----swiper菜谱图片 菜谱名称列表----image text导航条----tabBar 1.搜索框 搜索按钮 输入框用Input实现 但是给input组件加边框用boder是没有用的 需要在外面加一个view 给view设置border搜索框自带输入提示词是给input组件设置placeholder XXX 微信小程序的按钮不能自定义图片 所以给image设置点击事件来实现搜索按钮搜索框和搜索按钮是在同一个view里面的 为了让二者并排 给此view设置布局 display: flex;图片的大小需要给image标签设置样式 给其所在的容器设置大小没用 图片大小不会变的。

.wxml

 view class container1 
 view class inputView 
 input placeholder 爆浆芝士奶酪海绵蛋糕 auto-focus true class input / 
 /view 
 view class imageView 
 image src /images/search.png class image /image 
 /view 
 /view 

.wxss

.container1{
 width: 100%;
 margin-top: 0;
 padding: 0;
 height: 44px;
 /* background-color: #FFCB57; */
 display: flex;
.inputView{
 border: px solid0 #000;
 border-radius: 6px;
 margin-left: 15px;
 margin-top: 3px;
 margin-bottom: 3px;
 background-color: #F5F7F9;
 width: 76%;
 /* background-color: #EDD3ED;*/
.input{
 margin-left: 30px;
 padding-left: 10px;
 height: 40px;
 font-family: Arial, Helvetica, sans-serif;
.imageView{
 margin-left: 4px;
 width: 20%;
 /* background-color: #C8EFD4; */
.image{
 width: 44px;
 height: 44px;
2.滑动图片框

用swiper组件完成 官方文档有现成代码超方便~ 但是官方文档也有一个小小Bug啊 这个小坑我看了半天才弄懂啊啊啊

下面是遇到的那个神烦的问题吧。

这是完整的图片

swiper的高度是可以正好放下图片的 但是上面偏偏就是有一块空白 我为swiper设置了灰色背景方便看 然后明明可以正常显示的图片被活生生的截了一截 改变图片的mode也丝毫没有作用。

下面是官方文档的代码片段

 swiper indicator-dots {{indicatorDots}} 
 autoplay {{autoplay}} interval {{interval}} duration {{duration}} 
 block wx:for {{imgUrls}} 
 swiper-item 
 image src {{item}} class slide-image width 355 height 150 / 
 /swiper-item 
 /block 
 /swiper 

为什么会有这块空白啊 突然想起以前学html css的时候老师说有些组件会自带一点padding或者margin值 于是我就给swiper的每一层 swaiper、block、swiper-item 都设置了margin 0 padding 0 但是并没有用。

然后我就想是不是我的图片有问题啊 于是我换成了官方给的图片链接 惊奇的发现 官方的图片 就可以完全显示 三张图片中 swiper正好和最高的图那张片完全重合 其余两张图片稍矮 会露出一点点灰色的背景。

然后我还是不懂为什么会这样 我试着改变 image src {{item}} class slide-image width 355 height 150 / 中的高度 发现依然没有用 奇怪的是图片大小一点也没变。去官方文档中仔细看image的属性 发现根本没有width和height这两个属性 在html中是可以这样设置图片的大小的 但是在wxml中 改变图片的大小

要么单独给图片单独添加class 在wxss中设置图片大小

 image src {{item}} class slide-image mode aspectFit / 
.slide-image{
 width: 100%;
 height: 172px;
}

要么就用style

 image src {{item}} mode aspectFit style width:100%;height: 172px; / 

解决了这个问题 swiper还是很简单很美好的

.wxml

 view class swiperView 
 swiper indicator-dots {{indicatorDots}} 
 autoplay {{autoplay}} interval {{interval}} duration {{duration}} class swiperclass 
 block wx:for {{imgUrls}} 
 swiper-item 
 image src {{item}} class slide-image mode aspectFit / 
 /swiper-item 
 /block 
 /swiper 
 /view 

.js

Page({
 data: {
 imgUrls: [
 /images/banner1.png ,
 /images/banner2.png ,
 /images/banner3.png ,
 /images/banner4.png 
 indicatorDots: true,
 autoplay: true,
 interval: 3000,
 duration: 1000
})

.wxss

.swiperView{
 height: 172px;
 width: 100%;
.swiperclass{
 height: 172px;
 width: 100%;
.slide-image{
 width: 100%;
 height: 172px;
}
3.小标题 小标题当然就用text标记完成咯 很简单 让小标题居中显示 涉及一些布局的小知识。如果这一块不清楚可以看一下

.wxml

 view class textview 
 text class text 今 日 推 荐 /text 
 /view 

.wxss

.textview{
 height: 30px;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #7F7F7F;
.text{
 /* background-color: #C8EFD4; */
 font-size: 20px;
}
4.菜品图片 菜品名称列表

首先确定好列表的框架

最外层一个大大的view content 然后里面每一道菜用一个view content-item 来装每一个content-item里面装一个image和一个text用循环可以大大减少代码量哦~~

难点是在布局上 可以参考。图片大小的设置也要小心哦 直接 image width 100 height 100/ 是没有用滴

.wxml

 view class content 
 view class content-item wx:for {{content_item}} 
 image src {{item.image}} class image-intro / 
 text class content-item-text {{item.name}} /text 
 /view 
 /view 

.wxss

.content{
 margin-top: 2px;
 height: 480px;
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
.content-item{
 height: 125px;
 width: 45%;
 margin: 4px;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
.image-intro{
 width: 100%;
 height: 100px;
.content-item-text{
 color: #7F7F7F;
 font-size: 16px;
}

.js

Page({
 data: {
 content_item:[
 image: /images/introduce1.png ,
 name: 麻辣小龙虾 
 image: /images/introduce2.png ,
 name: 五香粉蒸排骨 
 image: /images/introduce3.png ,
 name: 芝麻糖奶香菊花饼 
 image: /images/introduce4.png ,
 name: 宫保虾仁杂素 
 image: /images/introduce5.png ,
 name: 传统意大利披萨 
 image: /images/introduce6.png ,
 name: 香草冰淇淋泡芙 
 image: /images/introduce7.png ,
 name: 芒果木糠杯 
 image: /images/introduce8.jpg ,
 name: 草莓慕斯切块 
})
5.导航条

导航条用tabBar完成 在app.json中完成配置即可。官方是有代码的 也可以参考的app配置部分。

app.json

{
 tabBar : {
 list : [
 pagePath : pages/index/index ,
 text : 首页 ,
 selectedColor : #FDBB1C ,
 iconPath : images/home_gray.png ,
 selectedIconPath : images/home_orange.png 
 pagePath : pages/category/category ,
 text : 目录 ,
 selectedColor : #FC8F1D ,
 iconPath : images/category_gray.png ,
 selectedIconPath : images/category_orange.png 
 pagePath : pages/logs/logs ,
 iconPath : images/more_gray.png ,
 selectedIconPath : images/more_orange.png 
 pagePath : pages/cart/cart ,
 text : 购物车 ,
 selectedColor : #FC8F1D ,
 iconPath : images/cart_gray.png ,
 selectedIconPath : images/cart_orange.png 
 pagePath : pages/profile/profile ,
 text : 我的 ,
 selectedColor : #FC8F1D ,
 iconPath : images/profile_gray.png ,
 selectedIconPath : images/profile_orange.png 

我设置了selectedColor属性 但是当我点击按钮时 文字的颜色并没有变。目前还不知道原因 如果你知道麻烦告诉我哦~~

6.效果图

Android模拟器

微信小程序

感觉山寨得还是很成功哈哈哈

这个小案例主要练习了布局和一些UI组件的使用 需要图片数据或完整代码可以留言邮箱哈~~

谢谢浏览 如有错误烦请指正 (≧∀≦)ゞ

 

***********2020.10.16更新***********

没想到会有这么多小伙伴需要源码 感谢大家的认可~为了让大家更及时的拿到资源 我把源码上传到了CSDN资源 不需要C币 也不需要关注就可以下载哈

 

 


微信小程序Cannot read property 'setData' of null错误 16920
上一篇:网络建站 返回下一篇:没有了