微信小程序
目录结构：pages/
index/
index.js 配置文件入口，page()
index.wxml 配置页面布局、UI
index.wxss 页面的样式文件，可选，可覆盖app.wxss
index.json 页面当前窗口定义 "window"，可选，可覆盖app.json 的window中的配置
app.js App() 定义一个实例化方法，传入config配置项；定义项目的启动入口
app.json "pages":数组，配置每个页面；"window":JSON对象，定义当前窗口设置
app.wxss 项目样式 （可选）
数据的双向绑定：.wxml:{{text}} 在 .js 里定义data:{text:'xxx'}
bindtap='btnClick' btnClick:function(){ this.setData({text:'new xxx'})}
渲染模式：条件渲染 判断标签<view wx:if="{{false}}">{{text}}1</view> 如果为false 就掩藏，为true 就显示。<view wx:else >{{text}}2</view>
循环标签：<view wx:for="{{['aaa','bbb','ccc']}}">{{index}}-{{item}}</view> //其中默认为item 读取到数组中的每一项，可以通过wx:for-item='news-item' 自定义；
<view wx:for="{{['aaa','bbb','ccc']}}" wx:for-item="itemx">{{itemx}}</view>
模版饮用：
方式1:include 相当于把全部内容包括节点引入进来：<include src="../templates/header" />
方式2:import 导入<template> 需要指定name值
<import src='../template/footer'/>
<template is='footers' data="{{text:'导入的设置内容...'}}" /> 同时设置data来激活模版中的{{text}}
事件 ：
点击事件 tap
长按事件 longtap
触摸事件 touchstart touchend touchmove touchcancel
其他 submit input...
事件冒泡：点击事件、长安事件、触摸事件都属于冒泡事件
通过bindtap绑定的事件会触发事件冒泡
通过catchtap绑定的事件不会触发事件冒泡
事件的对象：currenttarget是当前绑定的事件
target是触发的事件源 是冒泡的根元素
dataset 自定义属性 data-id='' data-title=''
api配置：参考官网https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=20161122
app的生命周期：
App({
onLaunch: function () {
数据加载
},
onShow: function () {
显示
},
onHide: function () {
切换至后台时
}
})
可在app里定义全局变量或方法，子页面通过var app= getApp() ; app.xxx获取
页面page()的生命周期
Page({
data:{
String1
},
onLoad:function(options){ 1
// 页面初始化 options为页面跳转所带来的参数
String2
},
onReady:function(){ 3
// 页面渲染完成
String3
},
onShow:function(){ 2
// 页面显示 、进入此页面触发
String4
},
onHide:function(){
// 页面隐藏,\跳转至其他页面时触发 、切换至后台
String5
},
onUnload:function(){
// 页面关闭 、离开的此页面触发
String6
}
})
页面跳转：
方式1 wx.navigateTo({url:'../logs/logs?id=1'})
wx.redirectorTo({...}) 禁用返回
方式2 <navigator url='' redirector><view....</navigator> //加redirector 禁用了返回功能
布局
1 flex布局
flex container 容器的属性：
flex-direction 决定元素的排列方向
flex-wrap 决定元素是否换行 wrap-reverse;wrap; nowrap;
flex-flow:flex-direction和flex-wrap的简写 row nowrap;
justify-content 元素在主轴上的对齐方式 center; flex-start; flex-end; space-around均匀对齐 ; space-between两端对齐；
align-items 元素在交叉轴上的对齐方式 stretch （当元素没设置高度时，让item占据整个容器的高度）；baseline:以内在一行文字的对齐；center ； flex-start； flex-end；
flex item 元素的属性：
flex-grow 当空间多余时，元素的放大比例 默认为0 1标示均匀充满主轴容器宽度。
flex-shrink 当空间不足时，元素的缩小比例 默认为1 当空间不足时 默认等比缩小；0不缩小
flex-basis 元素在主轴上占据的空间 300px;
flex 是grow shrink basis 的简写
order 定义元素的排列顺序
align-self 定义元素自身的对齐方式 （会覆盖align-items)
2 相对布局 绝对布局
relative 想对自身的定位
absolute 相对于最近的已定位的父元素进行的定位
动态伪类选择器(:link,:visited,:hover,:active,:focus)
状态伪类选择器(:enabled,:disabled, :checked) 按钮禁用 选中
选择伪类选择器(:first-child,:last-child,:nth-child(),:nth-last-child(),:nth-of-type(),:nth-last-of-type(),:first-of-type,:last-of-type,:only-child,:only-of-type)
空内容伪类选择弃(:empty)
否定伪类选择弃(:not)
伪元素(::first-line第一行使用特定样式, ::first-letter第一个字符使用某种样式, ::before, ::after, ::selection) .text1::after{content:'...';}在text1文本后添加文本...
基础内容组件：icon text progress
视图容器组件：view scroll-view swiper
UI高级组件：
1 action-sheet <action-sheet hidden='{{}}' bindchange=''></action-sheet>
2 toast <toast hidden="{{toastHidden}}" duraction="1000"></toast>
3 loading <loading hidden="{{loadingHidden}}"></loading>
导航组件<navigator url='../logs/logs' redirect><view...</navigator>
地图组件<map ....>
画布 canvas
请求服务器数据：wx.request({url:'',data:{x:'',y:''},hearder:{},success:function(res){}})
产品开发过程 ：
Xmind 思维导图分析需求
墨刀 原型图设计：页面元素 数据逻辑 操作逻辑
产品层级、组建模块化设计：（原因1 有代码大小限制、2 提高代码复用率）
方法1 通过WXML的import 和 include 来使用文件模版
2 使用WXSS的@import 来引用 WXSS 文件
3 使用JS的 require 来引用js文件
