微信小程序开发

最新推荐文章于 2024-10-26 17:14:04 发布

sorrking

最新推荐文章于 2024-10-26 17:14:04 发布

阅读量202

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序

本文链接：https://blog.csdn.net/sorrking/article/details/123596806

本文详细讲解了微信小程序中底部选项卡的配置和创建，包括`app.json`全局配置，`tabBar`的设置，以及各页面的wxml、wxss和js代码实现。还展示了如何实现选项卡的滑动效果、页面跳转、轮播图功能以及简易音乐播放器，并介绍了利用云开发进行数据库存储的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作业讲解

做小程序底部页面选项

在小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。在"pages"中输入你需要创建的页面如下

创建的页面放在第一排时，打开项目就会直接打开到该页面

（注：创建页面时最好是每新建一个后按Ctrl+S保存，避免微信开发者工具出错）

在"pages"下方输入
"tabBar": {
    "color": "#f00",
    "selectedColor": "#0f0",
    
    "list":[
      {
        "pagePath": "pages/my/my",
        "text":"我的",
        "iconPath": "images/Bane 1.png",
        "selectedIconPath": "images/Bane 2.png"
      },
      {
        "pagePath": "pages/login/login",
        "text":"登录",
        "iconPath": "images/Detective Ellen Yen.png",
        "selectedIconPath": "images/Detective Ethan Bennett.png"
      },
      {
        "pagePath": "pages/type/type",
        "text":"分类"
      }
    ]
  },
"tabBar"为底部 tab 栏的表现，

"color"为tab上的文字默认颜色，仅支持十六进制颜色，

"selectedColor"为tab上的文字选中时的颜色，仅支持十六进制颜色，

"list"为tab页面列表，按"pagePath"的上下排列顺序从左到右排列最少 2 个、最多 5 个 tab，

"text"为tab上按钮文字，

"iconPath"为未选中时该tab显示的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片，

"selectedIcPath"为选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片（注：如果position设置为top则不会出现图片按钮，只有在默认bottom时出现）

效果如下：

<!-- 
wxml:书写页面结构 类似于之前的html。称为组件
https://developers.weixin.qq.com/miniprogram/dev/component/ 
wxss:书写页面样式。和之前的css基本一样
json配置文件
js书写动态效果
-->

<!-- 引入文字text -->
<text>请上传头像</text>
<!-- 引入视图、容器 view -->
<view>容器</view>
<!-- 小程序中的标签一定要闭合
 <标签 />或者<标签>< /标签> -->
<input type="text" />
<!-- 引入图片 -->
<image mode="aspectFit" src="../../images/Alfred Pennyworth.png"></image>
<image src="../../images/aa.gif" mode="aspectFit"></image>
<button>按钮</button>
<view class="box"></view>

上面为某页面的wxml代码段

/* https://www.w3school.com.cn/css/index.asp*/
text{
    background: purple;
    display: block;
    text-align: center;
    font-size: 20px;
    font-family: "楷体";
    color: white;
}
input{
    border:10px dotted red;
}
view{
    /* 快级标签独占一行，行内标签宽高由内容决定 */
    background: pink;
}
button{
    background:lime;
}
.box{
    /* rpx是一个相对单位  750rpx和屏幕一样宽 */
    width:750rpx;
    height: 200rpx;
    /* wxss里面的背景图片不能使用本地图片。
    可以使用网络图片，
    还可以使用base64位图片https://tool.css-js.com/base64.html */
    background:url();
    background-size:20px;
}

上面为该页面的wxss代码段

页面最终效果如下

用js实现选项卡

wxml代码：

<scroll-view class="y" scroll-y="true">
  <text>首页</text>
  <text>首页</text>
  <text>首页</text>
  <text>首页</text>
  <text>首页</text>
  <text>首页</text>
  <text>首页</text>
</scroll-view>
<scroll-view class="x" scroll-x="true">
    <text wx:for="{{list}}" class="{{index==num?'current':''}}" bindtap="change" data-id="{{index}}">{{item}}</text>
</scroll-view>
<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="100"/>
  </block>
</view>
<view>
<navigator url="/pages/index/index">主页</navigator>
<navigator url="/pages/like/like">like</navigator>
<navigator url="/pages/my/my" open-type="switchTab">我的</navigator>
</view>

wxss代码：

.y text{
  display: block;
  height: 200rpx;
  text-align: center;
}
.y{
  height: 200rpx;
  background: orange;
}
.x{
  /* 不换行 */
  white-space: nowrap;
  background:lightcoral
}
.x text{
  display: inline-block;
  width:160rpx;
  text-align: center;
}
.current{
  background: lime;
  color:white;
}

js代码：

// pages/tab/tab.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:['首页','首页','首页','首页','首页','首页','首页','首页','首页'],
    iconType: [
      'success', 'success_no_circle', 'info'
    ],
    num:0
  },
  change:function(e){
    this.setData({
      num:e.target.dataset.id
    })
  }
})

效果如下图

此时选项卡标签可左右滑动，

中间三个为微信小程序自带图标，

下方三行字体为页面跳转

新建一个页面like

wxml代码如下：

<view>
    <text class="{{index==num?'current':''}}" bindtap="change" data-id="{{index}}" wx:for="{{list}}">{{item}}</text>
</view>


<view wx:if="{{num==index}}" wx:for="{{con}}">{{item}}</view>
<!-- 小程序中需要控制数据  -->
<image wx:if="{{num==index}}" src="{{item}}" wx:for="{{srcs}}"></image>

<!-- wx:if="表达式"表达式为真的时候显示 表达式为假的时候隐藏-->
<button wx:if="{{1==2}}">按钮</button>
<swiper autoplay="true" indicator-dots="true" indicator-color="red" indicator-active-color="blue"   circular="true">
    <swiper-item>
        <image mode="widthFix" src="https://i0.hdslb.com/bfs/feed-admin/07b023a79cccfd881d3fda38935071b243a54557.jpg@976w_550h_1c.webp"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="https://i0.hdslb.com/bfs/feed-admin/f8499d203482e324c2557e1332041a7af5db7e69.png@976w_550h_1c.webp"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="https://i0.hdslb.com/bfs/feed-admin/aba331c968396a3661a8d671872ebaa4e82b5173.jpg@976w_550h_1c.webp"></image>
    </swiper-item>
</swiper>

wxss代码如下：


view text{
	/*一行排列，宽高有效果*/
	display:inline-block;
	width:125rpx;
	text-align:center;
}
.current{
	background:lime;
	color:#fff;
}

swiper image{
	width:750rpx;
}
/* 
976 550
750   x
550*750=976*x */
swiper{
	height: 422.6rpx;
}

js代码如下：

// pages/like/like.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        list:['我的','热门','娱乐','知识','游戏','故事'],
        con:['1 俄乌双方临时停火 ','热门','娱乐','知识','游戏','故事'],
        srcs:['../../images/aa.gif','../../images/Bane 1.png','../../images/ManBat.png'],
         num:0
    },
    change:function(e){
       this.setData({
           num:e.target.dataset.id
       }) 
    }
})

最终实现效果如下

上方可点击进行页面选项，

下方为轮播图

简易音乐播放器（使用云开发功能）

wxml设计如下：

<!--pages/music/music.wxml-->
<image src="../../images/nldsn.jpg" mode="widthFix" class="{{num==1?'paused':''}}" bindtap="change"></image>
<button bindtap="change">播放/暂停</button>

wxss代码段如下：

/* pages/music/music.wxss */
image{
  width: 500rpx;
  margin-left: 110rpx;
  animation: move 7s infinite linear;
  border: black 10px ridge;
  border-radius: 50%;
}
button{
  margin-top: 40rpx;
  border: 2px ridge black;
}
.paused{
  animation-play-state: paused;
}
@keyframes move{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

js代码段如下：

// pages/music/music.js
//创建音频
const innerAudioContext = wx.createInnerAudioContext()
//播放地址
innerAudioContext.src = 'cloud://cloud1-2g4jf33a89c90ecf.636c-cloud1-2g4jf33a89c90ecf-1309767401/nldsn.m4a'
//自动播放
innerAudioContext.autoplay = false
//循环播放
innerAudioContext.loop = true
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:1
  },
  change:function(){
    if(this.data.num==0){
      this.setData({
        num:1
      })
      innerAudioContext.pause()
    }else{
      this.setData({
        num:0
      })
      innerAudioContext.play()
    }
  }
})

实现效果如下

点击按钮或图片时会播放音乐，同时图片会按照顺时针转动，

再次点击会暂停音乐，直至重新点击会从暂停处播放

注：需事先存放图片及上床音乐到云存储

实现数据库存储

wxml代码段如下：

<!--pages/data/data.wxml-->
<input type="text" placeholder="请输入用户名" bindinput="getuser"/>
<input type="password" placeholder="请输入密码" bindinput="getpass"/>
<button bindtap="add" type="primary">增加数据</button>

wxss代码段如下：

/* pages/data/data.wxss */
input{
    width: 600rpx;
    margin: 5px auto;
    padding: 10px 10px;
    border: 2px solid black;
    border-radius: 20px;
}
button{
    margin: 5px 0;
}

js代码段如下：

// pages/data/data.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    user:'',
    pass:''
  },

  add:function(){
    const db = wx.cloud.database()
    db.collection('student').add({
      data:{
       user:this.data.user,
       pass:this.data.pass
      },
      success:function(res){
        console.log(res)
      }
    })
  },
  getuser:function(e){
    this.setData({
      user:e.detail.value
    })
  },
  getpass:function(e){
    this.setData({
      pass:e.detail.value
    })
  }
})

实现效果如下