微信小程序入坑笔记-01基础

###一、目录结构

1.根目录下文件(app):控制小程序生命周期逻辑
app.js:控制小程序逻辑
app.json:小程序配置文件
app.wxss:小程序样式表

2.utlis:工具集合

3.pages:小程序所有页面

log:日志

xx.js:当前页面逻辑

xx.wxml:当前页面结构

xx.wxss:当前页面样式表

xx.json:当前文件配置

###二、配置文件详解
1.pages:中第一个页面是主页

2.window:窗体设置状态栏标题背景如果我们要在页面单独设置窗体可以直接在XXX.JSON中配置

3.tabBar:底部导航栏(只能在App.json中设置)

###三、生命周期(app.js)

1.小程序生命周期

2.页面生命周期

###四页面布局
1.新特性

rpx(规定屏幕宽度为750rpx,1rpx = 1物理像素 (1rpx = 2px)

选择引入(@inport “path”)

选择器部分支持(.class,#id,element,::befor,::after)

2.弹性盒(flex模型)

概念:兼容个总屏幕
核心:
容器和项目概念
主轴和交叉轴概念

###五语法结构

1.数据绑定

2.页面渲染

条件渲染
wx:if wx:elseif wx:else

循环

1
2
3
4
5
6
7
8
9
<!--
wx:for 列表
wx:key 指定列表中项目的唯一的标识符。取值:property(代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。类似于字典的key值)
*this(保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字)

-->
<view wx:for="{{arry}}" wx:key="*this" wx:for-index="itemIndex" wx:for-item="itemFor">
{{itemIndex}}:{{itemFor.message}}
</view>

bolck:包裹元素不参加到页面渲染

template:模板

1
2
3
4
5
<template name="msgTm">
<view>
<text> {{index}} </text>
</view>
</template>

引用

inport

inculde

3.事件