零基础微信小程序开发学习笔记（2.构建静态界面）
上周将《微信小程序开发指南》通读一遍之后有点慌，感觉懂了一点皮毛，不知无何下手，整理好急功近利的焦虑情绪之后，我在B站上找到了非常详细的视频教程，跟我之前上线下java班的授课形式一样，只是现在上网课，有教学有作业，很适合我现阶段的学习。
这种线下培训机构的课程都很有针对性，一般还包含就业服务，所以教授的知识基本都是最常用到的，当然也不会有多少高深的技术，作为入门级的课程够用了。
我这两天跟着做了四个静态界面，就是最简单的那种，没有后台数据交互，纯界面展示，练习页面布局和样式配置。
这四个页面只用到了.wxml和.wxss文件，.wxml里只用到了view和image标签，.wxss里面用得最多的是flex布局样式。
前三个图画得比较粗，最后一个图熟练了以后仔细调了一下样式，看起来还行。
在做最后一个页面的时候，我中间遇到了一个问题，就是登录注册、查看个人主页和下面的这些待支付的好多都显示不出来，我明明写了5个待支付的标签，加上样式之后就只看到了一个。
后来分析了一下，是由于image标签引起的，我本来先把标签的占位都写好了，但是image的属性没有写，但是在做样式的时候我发现，不像view是根据内容大小占空间，image即使没有引入图片路径，也会占一个很大的空间。
后来我引入了图片路径，然后在样式里面把图片的大小固定了，问题就解决了。没有引入图片之前，待支付在横向上只能显示一个，引入图片路径并设置大小后，界面上5个都放得下。
另外样式里面对于层级嵌套布局的，不要怕麻烦一层一层的.，本来我觉得既然取的是class的属性，直接.最里面的名字就好了，后来我发现这样要取很多的名字，感觉更麻烦，对像待支付这种的模块里面都叫item就很方便，而且也感觉更规范了，从样式配置里面就可以看到界面布局层级了。
最后真的要夸一夸阿里巴巴矢量图标库，找图标真的很方便。
零基础微信小程序开发学习笔记（2.构建静态界面）相关推荐
- 基于有Vue基础的微信小程序开发学习笔记
微信小程序开发 文章目录 微信小程序开发 一.微信小程序介绍 二.小程序结构目录 1.小程序的文件结构 2.基本项目目录 三.配置文件详解 1.全局配置文件 2.页面配置文件 3.sitemap配置 ...
- 微信小程序开发学习笔记一
微信小程序学习笔记(一) 环境使用及创建项目 文件目录设置 JS文件 环境使用及创建项目 环境使用:微信开发者工具 一个微信号只能开发一个微信小程序. 在微信小程序开发手册下载最新版本,学习不要bet ...
- 零基础微信小程序开发心得----注册微信小程序
因为项目需要用到小程序,自己想写个从零到有的微信小程序专题,记录学习心得. 目录 1.微信小程序简介 2.注册小程序 3.安装开发工具 4.小程序初始化目录介绍 1.微信小程序简介 微信小程序这个词可 ...
- 微信小程序开发学习笔记007--微信小程序项目01
技术交流QQ群:170933152 今天做项目 小程序开发必备基础 如何独立开发一个项目 豆瓣电影 需要的基础: HTML+CSS JavaScript 网络 先理解需求-->了解项目流程,项目 ...
- 【原创】适合零基础-微信小程序开发之预约小程序-图书馆预约
实现这个小程序分三个步骤(不是云开发)使用语言JavaScript语言. 第一步骤: 首页 代码: App.json {"pages": [ "pages/index/i ...
- 微信小程序开发学习笔记004--微信小程序语法结构
今天讲微信小程序的语法结构 技术交流QQ群:170933152 数据绑定:把数据声明后显示在页面上 渲染:条件渲染,循环渲染 模板:某个小需求,模块封装成模板 事件:点击一个按钮触发一个事件,发送一个 ...
- 微信小程序开发学习笔记002--微信小程序框架解密
1.今天内容比较多, 框架解密 • 目录结构 • 配置文件详解 • 逻辑层 • Api简介 ----------------------- 2.打开微信开发工具, 点击添加项目,选择无appid模 ...
- 微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是 微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
- 微信小程序开发学习笔记006--微信小程序组件详解02
技术交流QQ群:170933152 案例7:开关选择器 案例8:各种图标 案例9:页面跳转 案例10:多媒体音视频 案例11:嵌入地图 案例12:画布:在上面可以画柱状图等等. 今天继续讲组件: 登录 ...
- 微信小程序开发学习笔记2——安心食疗
一.数据绑定 1.1 渲染层和逻辑层 小程序宿主环境 我们称微信客户端给小程序所提供的环境为宿主环境.小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能. 小程序开发框架的目标是通过尽可 ...
最新文章
- craigslist_Craigslist，Wikipedia和丰富经济
- 怎样让小写自动转换成大写_办公软件操作技巧031：如何在word中输入大写数字...
- 【Swift学习】Swift编程之旅---ARC（二十）
- java爬取网页数据_如何使用爬虫工具采集数据
- string（STL）
- php性能优化 --- laravel 性能优化
- 《论文笔记》Experimental Research on Cooperative vSLAM for UAVs
- go语言os.exit(1)_Go语言os包用法简述
- 电脑数据恢复，哪种方法靠谱？
- 有向图的强联通分量 Tarjan算法模板
- 收下这10个终身学习的资源号，Max你的工作效率
- iosmask_iOS Mask属性的详细介绍及应用实例_IOS_脚本之家
- Android Jetpack 之 DataStore 初探
- 如何装计算机网络驱动,网卡驱动安装,详细教您电脑网卡驱动怎么安装
- 普加甘特图数据结构解析
- 我爱淘冲刺阶段站立会议每天任务5
- 几何光学学习笔记（13）- 4.2双平面镜成像
- JSON 与 XML 对比
- 软件行业职位及相关缩写
- Swift：什么时候需要mutating这个参数