【食疗坊小程序】原视频指路:b站-我的大学老师
内容简述:
---------------------------------打地基-----------------------------
1.项目搭建基础
- 新建项目
- 认识Page
- app.json
2. tarBar认识与配置
---------------------------------装修啦-----------------------------
3.index-轮播图
- index.wxml-框架搭建
- index.js-数据调用
- index.wxss-样式设置
--------------------------加油努力装修ing----------------------
1.项目搭建基础
----新建项目
这里直接丢图请酌情参考
【注意】
-
APPID:选择自己账号的测试号
-
不使用微信云开发
- 云开发简化了开发流程,降低了开发难度。但自由度并不高,在初学时尽量去体验开发每一个步骤所带来的价值和意义,
-
选择JS基础模板
----认识Page
【page】顾名思义就是小程序的页面
形象一点,我们理解为‘一面白墙’ ,我们通过不断在‘pages’中添加page,进而建起面面白墙,而pages中的每一个page就是我们眼睛所看见的‘界面’
----app.json
小程序全局配置文件
用来设定整个小程序的规则,例如:有多少个页面?有多少个tarBar,有什么权限,可以做什么事情等等…
(前情提要:后续配置tarBar需要)
【新建Page-index】
在pages路径下,右键选择【新建文件夹】
输入‘index’后回车
(此时会出现一个名为index的空文件夹)
选中index空文件夹【单机鼠标右键】-【新建page】
回车后,会自动生成wxml wxss js三个文件
这里要注意,新建的page名称尽量与父级名称保持一致,不然…不然后面页面多了你会后悔的
(听人劝 吃饱饭- -)
这样,我们一个新的页面就创建成功了 [撒花]
我们需要注意的是,当我们想删除某个页面时,我们删完上图文件夹的内容后,还一定要记得删除app.json中相应的pages信息
(不然会因为找不到相应的page 而报错)
2.tarBar认识与配置
tarBar是啥?
“是移动端应用常见的页面效果,用于实现多页面的快速切换.小程序中通常将其分成两类
分别是:底部 tabBar 和 顶部 tabBar”
说人话就是:导航栏
怎么配置tarBar?
微信公众平台-开发文档
将图中的tarbar格式复制进app.json
新建我们所需要的四个页面
(我图截得比较快 少了个index)
实现导航栏选中动画
开发文档-找tarbar相关配置
selectedIconPath–设置导航栏选中时所播放的图片
iconPath–设置导航栏未选中时所播放的图片
全部设置如下:
图中images文件放这里啦
--------------------------我们会得到这个效果--------------------
选中后
选中前
3.index-轮播图
index.wxml-框架搭建
基础框架草图
【代码实现】
【代码解析】
[ ] view
容器(可以理解成div)
块级元素(独占一行)
[ ] swiper
轮播图组件(承载滑块的容器)
需搭配swiper-item(滑块)使用
- wx:for & wx:key
wx:for- 列表渲染指令
- 用于循环渲染一个数组或对象中的数据
- 可以根据数据的长度自动渲染相应的列表项
- 类似于JavaScript中的for循环
wx:key - 这里使用 主要是为了防止程序运行报错
[ ] bindchange事件
用于绑定组件属性改变事件的方法
这里主要为了监听轮播图的动静,当轮播图产生动静时会触发该事件(事件详情在后面js中有)
[ ] autoplay
设置当前轮播图自动播放
[ ] interval
设置不同滑块之间滑动的间隔时间
[ ] cirular
设置为当前滑块 衔接滑动
- 【源码放送】
<!--pages/index/index.wxml-->
<view class="banner">
<swiper bindchange="swiperchange" autoplay="true" interval="3000" circular="true">
<swiper-item wx:for="{{bannerArr}}" wx:key="index">
<image src="{{item.image}}"></image>
<view class="info">{{item.title}}</view>
</swiper-item>
</swiper>
<view class="current">{{current+1}}/{{bannerArr.length}}</view>
</view>
- 【效果实现】
index.js-数据调用
目的:将图片和标题内容传输给页面进行渲染
图中数据请求网址
思路:
- 访问获取有效信息
- 信息返回至页面data,由wxml调用进行渲染
- 编辑bindchange事件
(当监听到轮播图滚动时,获取当前图片的下标)
【代码解析】
- 定义方法function
- 使用方法:
- 方法名:function(值){ }
- 非指针函数
- this 指向当前层级
- 方法名:(值)=>{ }
- 指针函数
- this 指向父级
- 前者需要创建外部指针,后者则无需创建
- 方法名:function(值){ }
- wx.request
- 用于发送HTTP请求的功能
- 原理是向指定的域名发送HTTP请求
- 使用方法:
- wx.request({url:’ ’ ,data({ }) })
- url:小程序合法域名中的URL(文末有)
- data:请求数据时所要传递的信息(id…)
- wx.request({url:’ ’ ,data({ }) })
- this.setData
- 用于修改页面数据的函数
- 原理:将传入的对象的属性和值应用到小程序页面的数据对象上,并触发页面的重新渲染
- 使用方法:
- this.setData({变量:新改变的值})
- 【源码放送】
Page({
data: {
current:0,
bannerArr:[]
},
swiperchange:function(e){
this.setData({
current:e.detail.current
})
},
onLoad(options) {
var that=this;
wx.request({
url: 'http://iwenwiki.com:3002/api/banner',
success:function(res){
if(res.data.status==200){
that.setData({
bannerArr:res.data.data
})
}else{
console.log("请求失败")
}
}
})
}
})
index.wxss-样式设置
目的:优化页面格式 使其更加美观
思路:
----设定各个外容器的宽高
----对容器进行定位布局
----修改相应样式
- 【源码放送】
.banner{
width: 100%;
height:338rpx;
position: relative;
}
.banner swiper{
height: 338rpx;
}
.banner image{
width: 100%;
height: 338rpx;
}
.banner swiper-item{
position: relative;
}
.banner .info{
position: absolute;
bottom: 0;
left: 0;
right: 0;
background:rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
padding: 10rpx;
font-size: 28rpx;
}
.banner .current{
display: block;
position: absolute;
bottom: 0;
right: 0;
color: #fff;
font-size: 28rpx;
padding: 8rpx;
}
对于wxss这里,挺基础的,我就不多做解释了,哈哈虽然我这篇内容也是基础中的基础,但哪能一口气吃成个胖子,能一直在路上就非常棒啦!嘿嘿 我们明天见!