成都住房和城乡建设厅网站首页,四大门户网站流量对比,什么网站可以做引文分析,长春营销型网站设计目录
开发者界面
app.json配置(举例)
组件
样式
像素
flex布局 微信小程序是一种基于微信平台的应用程序开发模式#xff0c;它可以让开发者使用前端开发技术#xff08;如HTML、CSS和JavaScript#xff09;开发应用程序#xff0c;并在微信客户端中运行。以下是微信…
目录
开发者界面
app.json配置(举例)
组件
样式
像素
flex布局 微信小程序是一种基于微信平台的应用程序开发模式它可以让开发者使用前端开发技术如HTML、CSS和JavaScript开发应用程序并在微信客户端中运行。以下是微信小程序开发的一些介绍
1. 开发环境微信小程序开发工具是官方提供的专门用于开发和调试小程序的集成开发环境IDE。它支持实时预览、代码编辑、调试和发布小程序等功能。
2. 技术栈微信小程序基于前端开发技术主要使用HTML、CSS、JavaScript进行开发。开发者可以使用框架如Vue.js、React等来构建小程序页面也可以使用原生的小程序开发语言WXML、WXSS和JS进行开发。
3. 小程序开发模式微信小程序采用了一种即用即走的开发模式用户不需要下载安装可以直接通过扫描二维码或搜索进入小程序使用。小程序的使用体验和原生应用类似可以实现多种功能如在线购物、社交娱乐、工具助手等。
4. API和能力微信小程序提供了丰富的API和能力开发者可以使用这些API来实现小程序的各种功能如获取用户信息、调用微信支付、使用地理定位等。开发者还可以通过组件、模板和插件来丰富小程序的界面和功能。
5. 发布和分发在开发完成后开发者可以通过微信开放平台进行小程序的提交和审核。审核通过后小程序将可以在微信平台上线并通过微信搜索、朋友推荐等方式进行分发。 微信小程序由于其开发简便、使用方便的特点已经成为了很多企业和个人开发者的首选可以快速地开发和发布应用程序满足用户的需求。如果你有一定的前端开发经验那么学习和开发微信小程序将是一个不错的选择。
开发者界面 pages文件夹下的.js,.wxml.wxss可以理解为jshtmlcss分开到了三个页面中
.json 文件是用来配置页面、组件或项目的一些基本信息和行为的。
app.js,app.wxss,app.json是与小程序整体配置和逻辑相关的文件。而文件夹中的如index.js只能在该文件夹中使用,理解为单独页面自己的配置。
app.json配置(举例)
{pages: [pages/index/index,pages/logs/index],window: {navigationBarTitleText: Weixin},tabBar: {list: [{pagePath: pages/index/index,text: 首页}, {pagePath: pages/logs/index,text: 日志}]},networkTimeout: {request: 10000,downloadFile: 10000},debug: true
}
pages字段指定小程序的页面路径即可访问的页面列表。在示例中有两个页面pages/index/index 和 pages/logs/index。这里需要注意文件路径不需要添加后缀名。window字段用于配置小程序窗口的样式。在示例中设置了导航栏标题的文本为 Weixin。tabBar字段用于配置小程序的底部导航栏tabBar。在示例中有两个菜单项分别对应两个页面。菜单项的 pagePath 指定了页面的路径text 是菜单项的显示文本。networkTimeout字段用于配置网络请求的超时时间单位为毫秒。在示例中设置了请求和下载文件的超时时间都为 10000 毫秒即10秒。debug字段用于配置是否打开调试模式。在示例中设置为 true表示开启调试模式。
组件
text编写文本信息类似于span标签
view容器类似于div标签
image图片
样式
像素 rpx 是微信小程序中用于适配不同设备屏幕的尺寸单位它是相对于屏幕宽度的单位其中 1rpx 等于屏幕宽度的 1/750。使用 rpx 单位可以实现在不同设备上以相对一致的比例展示元素的尺寸使小程序在不同尺寸的设备上都有良好的适配效果。
注意rpx 单位只适用于微信小程序开发它并不是标准的 CSS 单位。其他平台的小程序或网页开发可能使用不同的尺寸单位来进行适配。
flex布局 flex 是 CSS 中的一种布局模型。它是一种响应式的布局方式可以使元素在容器内灵活地伸缩和排列适应不同的屏幕尺寸和设备。
以下是一些常用的 flex 属性及其对齐方式的写法
1. flex-container包含了设置 display: flex;设置为flex布局
2. flex-direction用于设置弹性项的主轴方向常用的值有- row默认主轴水平向右延伸弹性项从左到右排列。- column主轴垂直向下延伸弹性项从上到下排列。- row-reverse主轴水平向左延伸弹性项从右到左排列。- column-reverse主轴垂直向上延伸弹性项从下到上排列。
3. flex-wrap用于设置当弹性项在一行或一列中放不下时是否换行。- nowrap默认不换行弹性项将被压缩到一行或一列中。- wrap换行弹性项会自动换行到下一行或下一列。- wrap-reverse反向换行弹性项从右到左或从下到上换行。
4. flex-flow是 flex-direction 和 flex-wrap 的缩写可以同时设置弹性项的主轴方向和是否换行。- 例如flex-flow: row wrap; 表示弹性项水平向右排列并换行。
5. justify-content用于设置弹性项在主轴上的对齐方式。- flex-start默认靠主轴起始边对齐。- flex-end靠主轴结束边对齐。- center在主轴上居中对齐。- space-between在弹性项之间平均分配空白空间。- space-around在弹性项周围平均分配空白空间。
6. align-items用于设置弹性项在侧轴上的对齐方式。- stretch默认弹性项被拉伸以填充侧轴。- flex-start靠侧轴起始边对齐。- flex-end靠侧轴结束边对齐。- center在侧轴上居中对齐。- baseline基线对齐。与文本项目有关
7. align-content用于设置多行或多列的弹性项在侧轴上的对齐方式。- flex-start靠侧轴起始边对齐。- flex-end靠侧轴结束边对齐。- center在侧轴上居中对齐。- space-between在行或列之间平均分配空白空间。- space-around在行或列周围平均分配空白空间。- stretch弹性项被拉伸以填充侧轴。
总结本文主要介绍了开发者界面的布局以及组件样式和flex布局
