微信小程序大小问题整理
非教程，个人整理使用，欢迎提出建议 :D
文件格式
视图层 [ .wxml ]、[ .wxss ]、[ .wxs ]、逻辑层[ .js ]、配置[ .json ]
wxml类似一个嵌套组件，开头并没有声明之类的东西，直接上了<view></view>功能类似于<div></div>。
wxss目前没发现和css有太大区别的地方，可以用@import引入另外一个表（一般引公共表），也可以直接在wxml里写内联样式<view style="height={{mainHeight}}rpx"></view>。
wxs是小程序的脚本语言，有自己语法，和js类似但并不一致，两者运行互不相关，也不能调用API，据官方说IOS下比js运行快2-20倍，通过<wxs></wxs>内嵌或者建立 .wxs 文件。注意每个wxs都是单独模块，变量和函数私有，给外边就用module.exports。
小程序的 js 里目前可知的是不能操作DOM的，但是同时也给定了一大批API，十分方便好用，js总是有很多好玩的，这里先贴一块文档介绍。
- 增加 App 和 Page 方法，进行程序和页面的注册。
- 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
- 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
- 每个页面有独立的作用域，并提供模块化能力。文档入口
json是一个定义配置的json数据文件，有全局配置app.json、工具配置project.config.json，还有单个子页面的配置page.json。小程序的json里配置项有现成名字,像全局的 pages、window、tabBar、networkTimeout、debug等；至于page.json即单个页面的配置，只有window配置项（即页面展示样式）的权限，所以不用写配置项名字，直接写内容。写完页面配置会覆盖掉全局配置的window属性。
/*一个小程序的简单文件树模型*/
├── app.js
├── app.json
├── app.wxss
├── pages /*页面文件包*/
│ │── index /*每个文件夹一个页面*/
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json /*page.json*/
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils
└── utils.js /*封装的工具类js，utils里用 module.exports 输出，外部用require调用*/
文件的嵌套
wxml中嵌套另外一个wxml<include src="../public/public.wxml"/>
wxss中的嵌套@import "../public/public.wxss";
js中的嵌套var utils = require('../../utils/util.js')
需要配合在被引用js中使用module.exports = {sayHi:sayHi,task:task}
rpx/rem
rpx、rem是自适应屏幕尺寸的单位。小程序的宽度是750rpx（20rem）。如果屏幕宽度是375px，使用rpx后， 1rpx = 0.5px；使用rem的话，1rem = 18.75 px。相比之下，rpx更适合精细定位。
花括号/大括号
//开发者工具中
if(true){
this.setData({
foo:'bar'
})
}
//可省略为
if(true)
this.setData({
foo:'bar'
})
//强迫症 短时间内不打算采用，还是老规矩写
双花/大括号
<text class="tipText">{{valueText}}</text>和PHP（或者Vue）里的用法比较像，wxml里插入，js里动态设定内容。双括号可以充当类名（class="{{className}}"）、属性（src="{{imageUrl}}"）。可以包裹三元表达式如class="{{dataNum == 2?'newClass':''}}"根据外在条件做判断，可以达到动态改变元素样式的目的。
小程序组件
swiper
滑块视图容器，就是焦点图，不用再写一大堆js，定义一下属性就可以实现不错的效果。
<swiper style="height:300rpx;width:100%" autoplay="true"
indicator-dots="true" indicator-color="#fff"
indicator-active-color="#00c0ff"
bindchange="swiperChange" bindanimationfinish="swiperFinish">
<swiper-item >
<image mode="widthFix" src="demo.jpg"></image>
</swiper-item>
</swiper>
swiper 和 swiper-item需要组合使用，上面这个定义了宽高、自动、小圆点指示器。还有interval、duration、circular、vertical这些属性等等。可以绑定 change 和 finish 事件。
view
view也是视图容器，还有scroll-view、movable-view、cover-view，就是字面意思，可滚动的，可移动的，覆盖的。给个入口
textarea原生组件
textarea适合在输入多行文本时候使用，不过需要注意这是个原生组件，层级是最高的，非原生组件是盖不到它上面的。scroll-view、swiper、picker-view、movable-view这几个里面不能使用，没C3动画，也不能fixed。
为了在原生组件上添加内容，小程序定义了两个特殊的原生组件，cover-view 与cover-image，这两个可以覆盖在部分原生组件之上。可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher。很遗憾这个部分不包括textarea，只好把样式写在view里，使textarea不影响外观，两个组件在一个view里上下排列。
另外，在textarea输入区域内不建议有其它元素的事件，因为事件是可以绑定成功的，但是真机上有问题。比如我通过定位把一个按钮布局进textarea区域内，bindtap="copy"(copy是自定义的名字)开发者工具里点击按钮一次，实现了复制；预览进入真机之后，点击会弹出键盘，私以为这是原生组件的最高层级问题，但是在疯狂点击之后，有那么一两次会触发成功，而且在特意放大按钮之后，触发几率会变大。最后是以将按钮移出textarea的办法解决，暂时没有详细测试根本原因。Mark
小程序Flex布局
Flex布局的常用属性总结一下
.container{
display:flex;
height:100%;
width:100%;
flex-direction:row; //默认是 row 按行排，column 是按列排。
flex-wrap:nowrap; //挤不下的时候压扁，wrap 的话换行
flex-flow:nowrap row; //上边两个的复合写法
justify-content:center; //水平居中
//flex-start | flex-end | space-between | space-around
align-items:center; //垂直居中，针对一行
//flex-start | flex-end | baseline | stretch;
align-content:center; // 垂直居中，针对wrap的多行
}
.content{
flex-grow:2; //地方足够大时，规定这个元素放大的比例
flex-shrink:1; //不够大时，规定这个元素缩小的比例
flex-basis:100rpx; //水平方向占多大空间
flex:2 1 100rpx; //grow,shrink,basis复合写法
order:3; //从左到右显示的顺序
alifn-self:; //每个元素自己的对齐方式
}
做一个简单的复制、清空按钮
<!--wxml文件-->
<view>
<text>{{results}}</text>
<button size='mini' bindtap='clear'>清空<button/>
<button size='mini' bindtap='copy'>复制<button/>
</view>
//js文件
page({
data:{
results:'测试文本',
}
//判断是否有内容，没有就提示，有就清空
clear: function (e) {
var that = this;
if (that.data.results == '') {
wx.showToast({
title: '无内容',
icon: 'none'
});
} else {
that.setData({
results: ''
})
wx.showToast({
title: '清除成功',
icon: 'none'
});
}
},
//判断是否有内容，没有就提示，有就放进剪切板
copy: function (e) {
var that = this;
if (that.data.results == '') {
wx.showToast({
title: '内容为空',
icon: 'none'
});
} else {
wx.setClipboardData({
data: that.data.results,
success: function (res) {
wx.showToast({
title: '复制成功',
icon: 'none'
});
}
});
}
},
做一个有字数提示的输入框
使用的组件是textarea，想添加一个限定字数的提示。
<!--wxml文件-->
<view>
<textarea bindinput='inputs' value='{{majorValue}}'></textarea>
<text class='textTip'>你还可以输入{{currentLeft}}字</text>
</view>
//js文件 字数检测
page({
data:{
majorValue:"",
currentLeft:140,
}
inputs: function (e) {
var value = e.detail.value; //找到当前框内的值
var len = parseInt(value.length); //算出长度
this.setData({
currentLeft: 140-len //总长度减去目前长度
});
},
})
生命周期函数
onLoad: function () //监听页面加载
onShow: function () //页面显示/切入前台时触发。
onReady: function () //页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
/*对界面内容进行设置的 API 如wx.setNavigationBarTitle，需在onReady之后进行。*/
onHide: function () //页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
onUnload: function () //页面卸载时触发。如redirectTo或navigateBack到其他页面时。
