非教程，个人整理使用，欢迎提出建议 :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到其他页面时。
作者：Yet_Barclay
链接：https://www.jianshu.com/p/8897d32c3f7b
随时随地看视频
