微信小程序入坑-基础1.0

作为一枚Android开发者突然想学小程序的学习记录（不是很全面希望大家见谅）
###一、目录结构

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

循环

 <!--
  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：模板

<template name="msgTm">
   <view>
    <text> {{index}} </text>
  </view>
</template>

引用

inport

inculde

3.事件
冒泡事件
非冒泡事件