微信小程序开发day01_微信小程序开发按钮粉色-CSDN博客

本文链接：https://blog.csdn.net/m0_55710075/article/details/117928990

刚入门了微信小程序开发，实现的功能也比较简单。界面整体布局是粉色！可以用取色器快速查找选择自己想要的颜色。图标来源于阿里巴巴矢量图标，下载的时候也可以调自己喜欢的颜色。

界面截图：
在这里插入图片描述

1.这部分是实现导航以及整体颜色布局

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/movies/movies"
  ],
  "tabBar": {
    "color": "#dddddd",
    "selectedColor": "#F6CEE3",
    "backgroundColor": "#FFFFFF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "热门电影",
        "iconPath": "assets/img/hotmovies.png",
        "selectedIconPath": "assets/img/hotmovies1.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "查找电影",
        "iconPath": "assets/img/findmovies.png",
        "selectedIconPath": "assets/img/findmovies1.png"
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "我的电影",
        "iconPath": "assets/img/house1.png",
        "selectedIconPath": "assets/img/home.png"
      }
    ]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6CEE3",
    "navigationBarTitleText": "Unini",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2.实现我的电影中的音频插入和图片插入，首先我们在pages目下选择新建文件夹命名为movies，然后点击movies文件选择新建Compenent
在这里插入图片描述

然后在movies.wxml文件下编写如下代码

<view>
  <audio src="http://music.163.com/song/media/outer/url?id=346089.mp3" controls="true"
  poster="https://p2.music.126.net/XU-Z6hBKDNP5U91DxTTT8g==/109951165566448052.jpg?param=130y130"
  name="海阔天空" author="beyond乐队"></audio>
</view>

<!-- view:就是一个盒子，类似div -->
<view>
    <!-- //text:显示中文信息 -->
    <text>小老虎：</text>
    <image src="/assets/img/xiaolaofu.jpg"/>
</view>
<view>
    <text>小兔叽：</text>
    <image src="/assets/img/xiaotuji.jpg"/>
</view>

3.图片的插入
在这里插入图片描述