微信小程序大小问题整理

非教程，个人整理使用，欢迎提出建议 :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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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}}"）、属性（class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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到其他页面时。

作者：Yet_Barclay
链接：https://www.jianshu.com/p/8897d32c3f7b