微信的小程序设计原理 第1篇
小程序根目录下的 文件是小程序的全局配置文件。常用的配置项如下:
属性名
类型
默认值
说明
navigationBarTitleText
String
字符串
导航栏标题文字内容
navigationBarBackgroundColor
HexColor
#000000
导航栏背景颜色,如 #000000
navigationBarTextStyle
String
white
导航栏标题颜色,仅支持 black / white
backgroundColor
HexColor
#ffffff
窗口的背景色
backgroundTextStyle
String
dark
下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh
Boolean
false
是否全局开启下拉刷新
onReachBottomDistance
Number
页面上拉触底事件触发时距页面底部距离,单位为px
概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
设置步骤: -> window -> 把 enablePullDownRefresh 的值设置为 true
注意:在 中启用下拉刷新功能,会作用于每个小程序页面!
当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为: -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。
当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果,设置步骤为 -> window -> 为 backgroundTextStyle 指定 dark 值。效果如下:
注意: backgroundTextStyle 的可选值只有 light 和 dark
概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。
设置步骤: -> window -> 为 onReachBottomDistance 设置新的数值
注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。
tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为: 底部 tabBar 顶部 tabBar
注意:
tabBar中只能配置最少 2 个、最多 5 个 tab 页签
当渲染顶部 tabBar 时,不显示 icon,只显示文本
默认值
position
String
bottom
tabBar 的位置,仅支持 bottom/top
borderStyle
String
black
tabBar 上边框的颜色,仅支持 black/white
color
HexColor
tab 上文字的默认(未选中)颜色
selectedColor
HexColor
tab 上的文字选中时的颜色
backgroundColor
HexColor
tabBar 的背景色
list
Array
tab 页签的列表,
最少 2 个、最多 5 个 tab
pagePath
String
页面路径,页面必须在 pages 中预先定义
text
String
tab 上显示的文字
iconPath
String
未选中时的图标路径;当 postion 为 top 时,不显示 icon
selectedIconPath
String
选中时的图标路径;当 postion 为 top 时,不显示 icon
微信的小程序设计原理 第2篇
JSON 是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现。小程序项目中也不例外:通过不同的 .json 配置文件,可以对小程序项目进行不同级别的配置。 小程序项目中有 4 种 json 配置文件,分别是:
项目根目录中的 配置文件
项目根目录中的 配置文件
项目根目录中的 配置文件
每个页面文件夹中的 .json 配置文件
是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。Demo 项目里边的 配置内容如下:
简单了解下这 4 个配置项的作用:
是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:
微信现已开放小程序内搜索,效果类似于 PC 网页的 SEO。 文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。
注意:sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件 的 setting 中配置字段 checkSiteMap 为 false
小程序中的每一个页面,可以使用 .json 文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖 的 window 中相同的配置项。例如:
微信的小程序设计原理 第3篇
小程序官方把 API 分为了如下 3 大类:
事件监听 API
同步 API
异步 API
在 data 中定义数据
在 WXML 中使用数据
在页面对应的 .js 文件中,把数据定义到 data 对象中即可:
把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。语法格式为
绑定内容
绑定属性
运算(三元运算、算术运算等)
页面的数据如下
页面的结构如下:
绑定方式
事件描述
tap
bindtap 或 bind:tap
手指触摸后马上离开,类似于 HTML 中的 click 事件
input
bindinput 或 bind:input
文本框的输入事件
change
bindchange 或 bind:change
状态改变时触发
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:
type
String
事件类型
timeStamp
Integer
页面打开到触发事件所经过的毫秒数
target
Object
触发事件的组件的一些属性值集合
currentTarget
Object
当前组件的一些属性值集合
detail
Object
额外的信息
touches
Array
触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches
Array
触摸事件,当前变化的触摸点信息的数组
target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。举例如下:
微信的小程序设计原理 第4篇
项目目录结构
这个目录是刚刚勾选quick start项目自动生成的。
.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件类似.css,.wxml结构文件类似.html
看一下
可以看到pages项目配资的是页面路径,以及入口。默认第一个路径做为入口。
pages/index/index,这个项目省略了.wxml后缀。
每一个页面就会生成一个目录,每个目录默认都四个文件。