微信小程序学习总结(一)
微信小程序学习总结(一)
微信小程序:
简称: 小程序,是一种不需要安装即可使用的应用
特点: 免安装 操作更接近原生APP 必须在微信中使用 不占内存 易传播
官方文档地址: https://developers.weixin.qq.com/miniprogram/dev/
一.小程序目录结构:
app.js 注册一个小程序
app.json 全局配置(窗口的表现, 网络超时时间, 页面路径)
app.wxss 设置微信小程序的全局样式
project.config.json 保存微信开发者工具的配置信息
pages 存放小程序所有页面,每个页面最多有4个文件
├── app.js 注册一个小程序
├── app.json 全局配置(窗口的表现, 网络超时时间, 页面路径...)
├── app.wxss 设置微信小程序的全局样式
├── pages 存放小程序所有页面,每个页面最多有4个文件
│ │── index
│ │ ├── index.wxml 页面结构
│ │ ├── index.js 页面逻辑
│ │ ├── index.json 页面配置
│ │ └── index.wxss 页面样式
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils 存放工具函数, 用来代码复用
└── project.config.json 保存微信开发者工具的配置信息
二.全局配置:
Pages注册微信小程序的所有页面路径
tabBar指定导航栏的表现
networkTimeout设置各个网络请求的超时时间
debug开启debug模式,可以打印调试信息
navigationStyle设置导航栏标题颜色
enablePullDownRefresh设置小程序全局和单个页面的下拉刷新表现
disableScroll设置页面是否开启滚动
三.小程序开发框架
基本构成:
WXML WXSS WXS javaScrip
1.WXML(Weixin Markup Language)
是框架设计的一套标签语言,结合组件,wxs和事件系统, 可以构建出页面的结构
<标签名 属性=""…>
注意: 标签必须闭合 属性大小写敏感
特性:
(1).数据绑定(Mustache)
{{message}}
// index.js
Page({
data: {
message: 'Hello World',
theName: 'Tony',
flag: false
}
})
标签共同属性:
属性名 类型 描述 注解
id String 组件的唯一标识 保持整个页面唯一
class String 组件的样式类 在对应的WXSS中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式
hidden Boolean 组件是否显示 所有组件默认显示
data-* Any 自定义属性 组件上触发的事件时,会发送给事件处理函数
bind*/catch EventHandler 组件的事件 事件
(2).列表渲染
{{index}}:{{item.name}}
// index.js
Page({
data: {
items: [
{name: '货物A'},
{name: '商品B'},
{name: '汽车C'}
]
}
})
(3).条件渲染
今天吃什么?
饺子
米饭
面
// index.js
Page({
data: {
eat: Math.floor(Math.random() * 3 + 1)
}
})
(4).模板引用
收件人: {{name}}
联系方式: {{phone}}
地址: {{address}}
// index.js
Page({
data: {
item: {
name: '张三',
phone: '132546874',
address: "中国"
}
}
})
name定义模板名称, is引用模板, 只能通过data向模板传入数据, ... 是扩展运算符,将data传给模板
文件引用 两种方式
Hello, World
Hello World!
import将引用a.wxml中的template模板,如果模板里面还有模板,将不会被引用
This is a.wxml
Hello World
include将引用除了template模板外的, 所有内容
2.WXSS(WeiXin Style Sheets)
是一套样式语言,用于描述WXML的组件样式
特点:
①尺寸单位: rpx 最终转换为rem
②样式导入
@import 外联样式导入
Hello World
/* index.wxss */
@import './assets.wxss';
.container {
color: red;
}
/* assets.wxss */
.container {
border: 1px solid black;
}
③内联样式
Hello World!
// index.js
Page({
data: {
colorValue: 'red'
}
})
④选择器
选择器 样例 样例描述 优先级
.class .intro 选择所有拥有 class="intro" 的组件 10
#id #firstname 选择拥有 id="firstname" 的组件 100
element view 选择所有 view 组件 1
element,element view, checkbox 群组选择器 1
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容
!import 无穷大 内联样式 1000