微信小程序开发学习笔记记录-黑马优购
一.学习第一天1.了解了一下开发小程序的结构。小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。其中utils可以删掉。
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>
更多推荐
所有评论(0)