非教程, 个人整理使用, 欢迎提出建议 :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,Windows,tabBar,networkTimeout,debug 等; 至于 page.JSON 即单个页面的配置, 只有 Windows 配置项 (即页面展示样式) 的权限, 所以不用写配置项名字, 直接写内容. 写完页面配置会覆盖掉全局配置的 Windows 属性.
/* 一个小程序的简单文件树模型 */
├── 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 到其他页面时.
来源: http://www.jianshu.com/p/8897d32c3f7b