微信小程序开发学习笔记记录-黑马优购

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>

在这里插入图片描述

微信小程序开发学习笔记记录-黑马优购

猜你喜欢