文件夹:
pages:
index:首页
logs:日志
json配置文件:
app.json:
app.json为全局配置,包括了所有页面路径(pages)、窗口外观(window)、界面表现(style)、底部tab等。
#页面配置会覆盖全局配置
project.config.json:
"setting" : 本地设置 "es6": JS编译成ES5是否开启 "postcss": 上传代码时样式自动补全是否开启
sitemap.json:
"action": 是否允许被索引(disallow为都不允许)
新建小程序页面:
修改项目首页:
#小程序会把排在第一的页面当作项目首页进行渲染
WXML:
小程序框架设计的一套标签语言,用于构建页面结构
- #div,view:布局
- #span,text:文本
- #img,image:图像
- #a,navigator:导航跳转
WXSS:
一套样式语言,用于描述WXML的组件样式,美化页面结构
JS逻辑交互:
处理用户的操作。例如响应用户点击,获取用户位置等等。
通信的主体:
小程序的通信主体为渲染层和逻辑层
通信模型:
小程序启动过程:
页面渲染过程:
组件:
组件由宿主环境提供,开发者可基于组件快速搭建出漂亮的页面结构。 常见组件分类:
1.视图类组件:
view:
scroll-view:
例:
#滚动条实现
swiper和swiper-item:
例:
#轮播图实现(类似广告条幅) #每一个可轮播的内容为swiper-item组件实现
view组件基础布局:
- #定义大容器结构
- #定义文本样式
- #添加背景颜色
- #定义布局
scroll-view滚动效果:
swiper和swiper-item轮播图:
#有几张轮播图就需添加几个swiper-item项
nth-child()后面需要加空格!
swiper组件常用属性:
text和rich-text:
#新版本selecttable已经被废弃了,新增useselect属性,但仍可使用
button和image:
#style设置可以控制按钮样式
#可用src属性指定渲染的具体图片
按比例缩放:
API:
数据绑定:
mustache(插值表达式):
将data中的数据绑定到页面中渲染,使用mustache语法(双大括号)将变量包起来即可 #info和msgList均为变量名
语法格式:
<view>{{要绑定的数据名称}}<view>
#Page的P需要大写!
动态绑定内容:
动态绑定属性:
三元运算:
算数运算:
事件:
回调触发
target和currentTarget区别:
bindtap语法格式:
#console.log(e)为接收的数据显示在调试器中
this.setData(dataObject)方法:
this.函数.参数代表旧值
事件传参:
bindinput的语法格式:
条件渲染:
wx:if和wx:elif以及wx:eles判断:
#两个等号是数值相等,三个等号是全等,条件不一样
结合< block >:
例:
hidden控制元素显隐:
#配置hidden属性时,不能使用block标签;而且,无论条件成立与否都会被渲染