小程序界面开发 第1篇
在小程序中,使用 wx:if = _{{ condition }}_ 来判断是否需要渲染该代码块:
也可以用 wx:elif 和 wx:else 来添加 else 判断:(else不用加任何条件,代表最后一种情况)
如果要一次性控制多个组件的展示与隐藏,可以使用一个
注:
在小程序中,直接使用 hidden=_{{ condition }}_ 也能控制元素的显示与隐藏:
通过wx:for可以根据指定的数组,循环渲染重复的组件结构,示例如下:
默认情况下,当前循环项的索引用index表示;当前循环项用item表示。
示例代码:
类似于Vue列表渲染中的 :key,小程序再实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率,示例代码如下:
WXSS 是一套 样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS。
WXSS具有CSS大部分特性,同时,WXSS还对CSS进行了扩充以及修改,以适应微信小程序的开发。
与CSS相比,WXSS扩展的特性有:
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
rpx的实现原理:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)
小程序在不同设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。
在iPhone6上,屏幕宽度为375px,共有750个物理像素,等分为750rpx。则:
750rpx = 375px = 750物理像素
1rpx = = 1物理像素
官方建议:开发微信小程序时,设计师可以用iPhone6作为视觉稿的标准。
开发举例:在iPhone6上如果要绘制宽100px,高20px的盒子,换算成rpx单位,宽高分别为200rpx和40rpx。
使用WXSS提供的 @import 语法,可以导入外联的样式表。
@import 后跟需要导入的外联样式表的相对路径,用 ; 表示语句结束。示例如下:
定义在中的样式为全局样式,作用于每一个页面。
在页面 .wxss 文件中定义的样式为局部样式,只作用于当前页面。
注意:
小程序根目录下的 文件时小程序的全局配置文件。常用的配置项如下:
1、2、3是用来配置导航栏相关的样式效果;4、5用来配置窗口背景相关的;6、7用来控制页面效果的选项
设置步骤: ---> window ---> navigationBarTitleText
设置步骤: ---> window ---> navigationBarBackgroundColor
不支持文本颜色,只支持以#开头的
设置步骤: ---> window ---> navigationBarTextStyle
需求:将导航条上的标题从默认的black改为white
↓
注意:navigationBarTextStyle 的可选值只有 black 和 white
概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
设置步骤: ---> window ---> enablePullDownRefresh 改为true
注意:在中启用下拉刷新功能,会作用于每一个小程序页面!
模拟器并不能百分百还原真机操作,调试时需要真机预览进行测试
当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为: ---> window ---> backgroundColorTop 为指定16进制的颜色值#efefef
当全局开启下拉刷新功能之后,默认窗口的loading样式为白色,如果要更改loading样式的效果,设置步骤为: ---> window ---> backgroundTextStyle 为指定值 dark / light。
概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。
设置步骤为: ---> window ---> onReachBottomDistance
注意:默认距离为50px,如果没有特殊需求,使用默认值即可。
小程序界面开发 第2篇
JOSN是一种数据格式,在实际开发中,JSON总是以 配置文件 的形式出现。小程序项目中也不例外:通过不同的 .json配置文件,可以对小程序项目进行不同级别的配置。
小程序项目中由4种json配置文件,分别是:
是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。Demo项目里边的配置内容如下:
是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:
微信现已开放 小程序内搜索,效果类似于PC网站的SEO。 文件用来 配置小程序页面是否允许微信索引。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的所有关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。
小程序中的每一个页面,可以使用 .json文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖 的 window中相同的配置项。
在 --> pages 中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件。小程序会把排在第一位的页面当作项目首页进行渲染。
小程序界面开发 第3篇
数据绑定的基本原则
Mustache语法的应用场景
绑定内容
动态绑定内容
页面数据如下:
页面结构如下:
绑定属性
动态绑定属性
页面数据如下:
页面结构如下:
注:可以添加 mode属性使图片自适应展示
运算(三元运算、算术运算等)
三元运算
页面数据如下:
页面结构如下:
算术运算
页面数据如下:
页面结构如下:
在微信小程序中,random
是一个常用的方法,用于生成一个 [0, 1) 之间的随机浮点数。
toFixed()
是 JavaScript 中 Number
对象的一个方法,用于将数字格式化为具有指定小数位数的字符串。
你看到的类似这样的代码:
在上面的代码中:
所以,randomNum
会是一个形如 __ 的字符串,其中 _xx_ 是两位随机小数。
如果你想在微信小程序中生成一个具有特定小数位数的随机浮点数,你应该首先使用 ()
生成随机数,然后使用 toFixed()
进行格式化。如果你需要的是一个数字而不是字符串,你可以再次使用 parseFloat()
或 Number()
来转换它。
请注意,使用 toFixed()
会四舍五入到指定的小数位数,并且结果是一个字符串。因此,如果你想再次得到一个数字,你需要进行转换。
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
当事件回调触发的时候,会收到一个事件对象event,它的详细属性如下表所示:
target是触发该事件的源头组件,currentTarget是当前事件所绑定的组件。举例如下:
小程序界面开发 第4篇
1、了解 权限管理需求
在中大型的公司里,人员的分工非常仔细:同一个小程序项目,一般会有不同岗位、不同角色的员工同时参与设计和开发。
此时处于管理需要,我们迫切需要对不同岗位、不同角色的员工的权限进行边界的划分,使他们能够高效的进行协同工作。
2、了解项目成员的组织结构
3、小程序的开发流程
提出需求 → 设计 → 开发 → 体验 → 测试 → 发布
1、软件开发过程中的不同版本
在软件开发工程中,根据时间节点的不同,会产出不同的软件版本,例如:
2、小程序的版本
3、发布上线
整体步骤:
小程序界面开发 第5篇
WXML 是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML
WXSS是一套 样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS
.js文件的分类:
宿主环境指的是 程序运行所必须的依赖环境。例如:
Android系统和iOS系统 是两个不同的宿主环境。安卓版的微信App是不能在iOS环境下运行的,所以,Android是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的。
手机微信是小程序的宿主环境
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能
实现如图的flex横向布局效果:
实现如图的纵向滚动效果:
通过text组件的 selectable / user-select 属性,实现长按选中文本内容的效果:
通过rich-text组件的 nodes 属性节点,把HTML字符串渲染为对应的UI结构:
image组件的 mode 属性用来指定图片的 裁剪 和 缩放 模式,常用的 mode 属性值如下:
scaleToFill
缩放模式,宽度不变,高度自动变化,保持原图宽高比不变