微信小程序大小问题整理

非教程，个人整理使用，欢迎提出建议 😀

文件格式

视图层 [ .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到其余页面时。