1.了解了一下开发小程序的结构。小程序包含一个描述整体程序的 app 和多个描述各自页面page
其中utils可以删掉。
一个小程序主体部分由三个文件组成,必须放在项目的根目录(app.js,app.json.app.wxss)
而一个小程序页面由四个文件组成(即pages包含了多个页面,页面又包含了四个文件,js,json,wxss,wxml)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.app.json 文件用来对微信小程序进行全局配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

3.添加tab栏
在app.json文件中使用tabBar
在这里插入图片描述
在这里插入图片描述

4.在小程序中使用iconfont图标
在官网生成代码粘贴到新创建的iconfont.wxss中,再在全局样式中使用@import引用
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
5.使用主题颜色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
6.1px=2rpx
justify-content:center;
align-items:center;
7.获取轮播图数据,动态渲染轮播图
利用request
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
8.less文件和wxss文件
Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言
9.flex布局
任何一个容器都可以指定为 Flex 布局。设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
10.获取数据嵌套栗子
如果要获取floor_title里的图片,路径如下:先拿到floorList的item各项(即0,1,2),再从floor_title直接用就ok

<view class="floor_group" wx:for="{{floorList}}" wx:for-item="item1" wx:for-index="index1" wx:key="floor_title">
            <view class="floor_title">
                <image src="{{item1.floor_title.image_src}}" mode="widthFix"/>
            </view>
</view>

如果要获取product_list里面的图片,路径如下:floorList->item1—product_list->item2—item2.image_src

<view class="index_floor">

        <view class="floor_group" wx:for="{{floorList}}" wx:for-item="item1" wx:for-index="index1" wx:key="floor_title">
            <view class="floor_list">
                <navigator wx:for="{{item1.product_list}}" wx:for-item="item2" wx:for-index="index2" wx:key="name">
                    <image src="{{item2.image_src}}" mode="widthFix"/>       
                </navigator>      
            </view>       
        </view>
    </view>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Logo

鸿蒙生态一站式服务平台。

更多推荐