MINA程序包含一个描述整体程序的app和多个描述各自页面的page。
跟普通项目区别：
- (最多可以同时调用5个API，跳转5个页面,貌似目前上传项目大小为1M);
- 文件后缀js -> js,html -> wxml, css -> wxss;
- js: 小程序不支持dom和bom,所以js中目前不能出现js和其他引用的框架。但是写法和普通项目中的js类似,貌似js中有的功能也可以用，解码转码就可以。
- wxml: wxml中的目前能用的标签为 view(div),image(img),text(span),input(text,number,idcard(身份证输入键盘),digit(带小数点的数字键盘),time,date,emoji(带表情的输入框),button,form,checkbox,radio,等。。。。目前去掉了h1-h6,ul,textarea（多行输入现在不能实现）。
- wxss:
- 以flex布局为主，大部分标签都可以用。选择器目前支持：class,id,element,:before,:after这几种（+ ~）目前不能用，weui中text-size-adjust: 100%;(是解决 iPhone 横屏时默认会放大文字的问题)没用;
- 字体新增了rpx（responsive pixel;
像素跟分辨率的区别：
(PPI即每英寸所拥有的像素数目)
* 支持样式导入 @import "common.wxss";
主程序包含：app.js,app.json,app.wxss;
app.js:
App()函数用来注册一个小程序,在这个页面中监听并处理小程序的生命周期函数、声明全局变量;
1:小程序的生命周期函数,官方文档截图：
2:声明全局变量:当在多个页面中公用一个变量时，可以在此声明全局变量。全局变量可被声明在页面中的
同名变量所代替。(就像css中*{}中的可被类或ID中的样式替换一样)
app.json:
是对整个小程序的全局配置,包括路由，窗口背景色，导航条样式，默认标题。(此页面不可加注释)
最多可以设置5个tabBar；
此外还包括networkTimeout：设置网络超时时间；debug:是否显示调试。
如果在各个页面中有json,会覆盖全剧中的app.json对应的内容(可以设置没个页面默认显示的标题等)
各个页面的js,wxml,wxss,json
js
Page()函数用来注册一个页面,指定页面的初始数据、生命周期函数、事件处理函数等;
页面的初始数据:
- data数据数据必须是可以转成JSON的格式：字符串，数字，布尔值，对象，数组。
生命周期函数：
- onLoad:
- 可以调用wx.request() (ajax);
- 可传参数，参数就是其url中所带的参数值
1
2
3
4
5
6
7
8
9<!-- 比如其url为http:baidu.com?d=8023y=xx -->
onLoad: function (options) {
console.log(options);
}
<!-- 打印出来为 -->
{
d: 8023,
y: xx,
}
事件处理函数
- 每个函数都有其函数作用域，所以和普通js函数相似，得注意this问题。
1 | <!-- 如同js的将事件直接绑定到元素上 --> |
- 事件分类
没有click，只有bindtap(不阻止事件冒泡)，catchtap(阻止事件冒泡)以及如图：
- 事件对象
打印出来为：
以bindtap为例：
1 | {<!-- 事件类型 --> |
wxml 包括数据绑定、条件渲染、列表渲染、模版、引用、导航
- 数据绑定：
类似react和vue，使用大括号
1 | <view> {{ message }} </view> |
- 条件渲染
代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<view wx:if='{{ manageList.length == 0 }}'>
<view class = "weui__cells">
<view class = "weui__cell">
<text class = "weui-cell__bd middle"> 暂无成员 </text>
<text class = "weui-cell__ft"></text>
</view>
</view>
</view>
<view wx:elif = '{{}}'>
</view>
<view wx:else>
<block wx:for-items="{{ manageList }}">
<view class = "weui__cells" data-id = "{{ item.userId }}">
<view class = "weui__cell">
<image class = "personImg" src = "{{item.userHead}}" model = "aspectFill"></image>
<text class = "weui-cell__bd"> {{ item.userName }} </text>
<text class = "weui-cell__ft"></text>
</view>
</view>
</block>
</view>
- 列表渲染
1 | <block wx:for-items="{{ manageList }}"> |
- 导航 (分为两种：是否关闭当前页面，默认不关闭)
导航可写在wxml中，也可写在js中：- wxml:代码
1 | <block wx:for-items="{{ actionSheetItems }}"> |
* js: 代码
1 | <!-- 创建的群， --> |
- 也支持模版和引用
wxss
- 如果跟app.wxss重名可覆盖app.wxss里面的类名或id名
json
页面的.json只能设置window相关的配置项，以决定本页面的窗口表现，所以无需写window这个键
组件
- 视图容器： view、scroll-view、swiper
- scroll-view: 绑定bindscrolltoupper(滑动到顶部触发)、bindscrolltolower(滑动到底部触发)可实现下拉加载，上拉刷新(需给scroll-view设置固定的高度);
下拉加载：
定义一个全局变量数组；每次请求后将数据push进去。 - swiper(轮播图)
- scroll-view: 绑定bindscrolltoupper(滑动到顶部触发)、bindscrolltolower(滑动到底部触发)可实现下拉加载，上拉刷新(需给scroll-view设置固定的高度);
1 | <!-- indicator-dots：是否显示面板指示点；autoplay：是否自动切换；current：当前所在页面的index |
- 基础内容
1 | <!-- icon type类型：success,success_no_circle,info,warn,waiting,cancel,download,search,clear |
- 表单组件
1 | <!-- 包括button,checkbox,form,input,label,picker(滚动选择器),radio,slider,switch --> |
操作反馈：action-sheet(从屏幕底部出现的菜单表),modal,toast(消息提示框),loading
1
2
3
4
5
6
7
8
<!-- 都是通过hidden来控制隐藏还是显示 -->
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
<block wx:for-items="{{actionSheetItems}}">
<action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
</block>
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>媒体组件：audio,image,video
1 | <!-- poster：默认控件上的音频封面的图片资源地址； |
- 地图和画布 map,canvas
api
(最多可以同时调用5个API);
最常用的为：wx.request();
1 | wx.request({ |
除了在每个json中设置window页面。还可以在js的onReady中设置
遇到的问题
- 不请求ajax的情况下，从列表页跳转到单个详情页。
解决：利用了全局变量及e.currentTarget.dataset - 重新加载页面：(从一个月面跳转到另一个页面再反悔当前页面重新加载数据)
解决：点击跳转时重新 low 了一次数据(已读未读)。 - 修改input框中的内容
解决：设置了两个input框，一个是从data取到的数据，一个是修改后的数据。修改后让第一个隐藏，第二个出现 - 显示群资料时区分是否是自己创建的：
解决：url传了两次值 - 其他 上拉加载更多，转码解码等