南安市网站建设,青岛网站seo,wordpress ip地址,中国万网网站建设过程目录 1 使用模板创建小程序2 app.json3 页面布局总结 原来我们使用微信开发者工具#xff0c;比较困难的是前端框架的选择上#xff0c;官方也没有提供一套框架供我们使用#xff0c;最近开发者工具已经提供了一套前端框架#xff0c;后续我们开发的效率会因为使用模板提高… 目录 1 使用模板创建小程序2 app.json3 页面布局总结 原来我们使用微信开发者工具比较困难的是前端框架的选择上官方也没有提供一套框架供我们使用最近开发者工具已经提供了一套前端框架后续我们开发的效率会因为使用模板提高不少。本篇我们带着大家一起体验一下这套框架。 1 使用模板创建小程序
打开微信开发者工具在新建项目的时候选择官方提供的模板 创建成功后会生成一系列的文件
2 app.json
要学习一套模板我们就要从头开始阅读代码那从哪个位置开始看起呢首先是要先阅读微信小程序的入口文件。入口文件是app.json这个配置文件是我们程序的全局配置文件具体的配置项可以参考官方的文档 带的这套模板分别配置了pages、subpackages、usingComponents、window和sitemapLocation
pages表示我们小程序的页面每一个页面由wxml、wxss、json和js四个文件组成配置项的类型是数组里边的元素是一个页面的路径我们先看一下目前模板的配置
pages: [pages/home/home]我们找到我们home文件 首先我们的页面都是放在pages文件夹里然后第二层是我们的home文件夹第三层home是我们的home.wxml
wxml相当于网页开发里的html只是他不需要html、body这些标记可以直接写页面的内容部分
在pages配置数组里的第一个元素就相当于首页你需要哪个作为首页就把它放入到第一个位置现在他叫home你也可以创建一个index作为首页。
创建页面的方法是先选中pages目录右键创建一个文件夹
然后选中文件夹再创建页面(Page) 然后我们去app.json里调整一下页面的顺序将index放到第一个位置
3 页面布局
在小程序中我们可以使用两种布局模式一种是相对定位一种是绝对定位。相对定位其实就是我们的流式布局组件会从左到右从上到下依次排列。绝对定位就是按照像素进行布局通过xy坐标来决定某一个组件具体放置到哪里
相对定位的优势是可以做到自适应随着手机屏幕大小的不同我们可以做到自动变化。缺点是要想做到自适应我们需要更多的布局组件的组合性能要稍差一点。
绝对定位的好处是大小和位置固定可以使用更少的组件缺点是不能做到自适应。
在具体的应用开发中我们通常是两种布局结合起来使用比如底部的菜单我们一直是固定不变的那就用绝对定位而内容部分通常需要使用相对定位。
小程序中布局组件是使用view组件来实现的语法是需要有一对儿标签出现比如我们现在可以先添加一个布局组件 view
/view组件一共有两种内容需要配置分别是组件的样式和事件。目前我们作为基础的组件不需要设置事件只需要设置样式即可。
小程序里的样式通常是定义在wxss中的类似于网页中的css它是使用类选择器定义语法是以一个点作为开头后边跟一个样式的名称一对儿大括号里写我们具体的样式的属性。比如这样 .main {width: 100%;box-sizing: border-box;padding-left: 32rpx;padding-right: 32rpx;padding-top: 48rpx;padding-bottom: 240rpx;}我们解读一下这些属性表示啥意思width表示组件的宽度既可以按照百分比设置也可以按像素设置。我们目前父容器通常是需要它占据百分百的宽度。
box-sizing如果不知道是啥意思我们可以百度一下搜索的时候关键词后边加一个MDN我们就可以找到具体的文档也可以鼠标移动到样式上直接点击文档跳转到具体的说明里 看文档的意思是让浏览器如何计算盒模型的宽和高我们并不希望子组件超出我们父组件的宽度因此设置为border-box
然后就是设置组件的内边距分别给上、下、左、右留出一定的空间来让里边的组件不显得那么拥挤
单位的话是rpxrpx是小程序的单位可以在文档里搜索一下 主要是为了做自适应我们设置为rpx小程序会自动根据屏幕的大小来计算距离
样式定义好之后如果想起作用我们就需要在组件上使用class属性来引用我们的样式类代码改成这样 view classmain
/view这样看上去没啥变化是因为我们的父容器里没有放置内容我们再放入一个布局组件
view classmainview/view
/view给子组件继续定义样式 .title-wrap {display: flex;align-items: center;justify-content: flex-start;padding-left: 16rpx;padding-right: 16rpx;}这里我们就采用了流式布局display表示布局的模式flex我们表示是采用流式布局align-items表示我们元素采用垂直居中而justify-content表示我们采用左对齐还设置了一定的左内边距和右内边距
你看虽然我们写的是英文但是知道每一个属性的具体含有就可以做到自由自在的布局
之后子组件引用我们的样式
view classmainview classtitle-wrap/view
/view搭建好这两层之后我们在第二次布局组件里放入一个图片组件来显示LOGO view classmainview classtitle-wrapimage classtitle-icon modeaspectFit src/assets/TDesignLogo2x.png aria-labelTDesign Logo //view
/view我们继续把样式写一下
.title-icon {width: 296rpx;height: 80rpx;
}这里主要是要控制一下图片组件的宽和高
为空让图片显示比例正常我们需要设置一下图片的显示模式可以打到官网看一下属性值 这里选择的是aspcetFit表示让图片看着缩放完整的显示出来
src表示图片的路径这里的路径是绝对路径从根目录开始找到assets文件夹下的图片 像这种LOGO本身是一种素材我们可以自己建一个文件夹用来存放素材比如设计师给你切好图之后可以将素材都上传到这个文件夹里方便布局的时候使用
还使用到了aria-label查看官方文档本身不需要设置这个属性这个是模板自带的如果看不到屏幕可以朗读出具体的内容来
总结
好了我们这一篇就是按照通常的思路去阅读了一下官方模板。当然了要想看懂别人的作品还是需要一定的基本功的就像如果你不学习英语要想看懂英文写的文章是比较难的。我们会按照这种模式逐步的把模板一点点的读完、读懂后续就可以自由发挥自己创作了。
