【食疗坊小程序开发】学习笔记1---初识小程序

本文链接：https://blog.csdn.net/qq_51325580/article/details/138572840

【食疗坊小程序】原视频指路：b站-我的大学老师
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需要）
show time
【新建Page-index】
在pages路径下，右键选择【新建文件夹】
page
输入‘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 指向父级
- 前者需要创建外部指针，后者则无需创建
wx.request
用于发送HTTP请求的功能
原理是向指定的域名发送HTTP请求
使用方法：
- wx.request({url:’ ’ ,data({ }) })
  - url:小程序合法域名中的URL（文末有）
  - data:请求数据时所要传递的信息（id…）
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;
}