一、微信小程序项目基本结构
微信提供了微信小程序专用的开发者工具
必须文件：app.js/ app.json(配置文件) /app.wxss(样式文件)
pages文件夹存放所有页面，每个页面的路径都要在app.json文件中配置，写在pages字段中
每个页面由四个文件构成.js/.json/.wxss/.wxml，放在pages中的一个文件夹下.wxml是页面结构文件
二、app.json文件
app.json配置项如下：
1.page：将所有页面的路径写在其中，不用写文件后缀名。第一条为首页
2.window：设置导航条、状态栏、标题、窗口背景色
navigationBarBackgroundColor 导航栏背景颜色
navigationBarTextStyle 导航栏标题颜色
navigationBarTitleText 导航栏标题文字内容
backgroundColor 窗口的背景色
backgroundTextStyle 下拉背景字体、loading 图的样式(dark/light)
enablePullDownRefresh 是否开启下拉刷新
3.tabBar：配置底部的tab栏
color tab上的文字默认颜色
selectedColor tab上的文字选中时的颜色
backgroundColor tab 的背景色
borderStyle tabbar上边框的颜色(black/white)
list tab 的列表
重点的list，其中设置一个数组，数组每个项都是一个对象，对应着一个tab和其对应的页面，配置如下：
pagePathtab 对应的页面文件路径（必须在 pages 中先定义）
text tab 上按钮文字
iconPath tab上的icon路径
selectedIconPath 选中时的icon路径
一个tabBar示例：
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
}
4.networkTimeout：设置各种微信请求的网络超时时间
request wx.request的超时时间
connectSocket wx.connectSocket的超时时间
uploadFile wx.uploadFile的超时时间
downloadFile wx.downloadFile的超时时间
微信小程序-视图层
1.数据绑定
使用{{}}即可完成数据绑定，{{}}内也可以进行计算、逻辑判断、字符串运算等
也可以为属性进行数据绑定，在引号内使用，如：
<view id="item-{{id}}"> </view>，在data中定义id＝1，就可以在这里绑定id为item-1
2.列表渲染
使用wx:for后面接需要渲染的数组，示例如下：
<!--wxml--> <view wx:for="{{array}}"> {{item}} </view> // page.js Page({ data: { array: [1, 2, 3, 4, 5] } })
使用列表渲染有默认值index，表示当前下标，如：{{index}}: {{item}}
使用wx:for-index和wx:for-item可以指定当前下标名和元素名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>
3.条件渲染
使用wx:if/elif/else，示例：
<!--wxml--> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view> // page.js Page({ data: { view: 'MINA' } })
上面的代码根据data中的view的值判断到底显示什么样的内容
可以使用<block>结构进行条件渲染多个组件，注意block只是一个包装元素没有实际样式：
<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>
4.使用模版
<template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> </template> <template is="staffName" data="{{...staffA}}"></template> <template is="staffName" data="{{...staffB}}"></template> <template is="staffName" data="{{...staffC}}"></template> // page.js Page({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} } })
上面的例子首先使用template定义了一个模版，指定name属性，然后定义了模版的内容。下面就可以直接使用这个模版了，定义data属性为模版传递每个实例化的数据，is指定要使用的是哪个模版
5.事件
分为bind开头的事件属性和catch开头的事件属性，前者不会阻止冒泡，后者会阻止冒泡
每个事件对应一些属性，如果把一个event打印出来返回内容如下：
<pre name="code" class="javascript"><view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>Page({ tapName: function(event) { console.log(event) } }) 可以看到log出来的信息大致如下：
{ "type": "tap", //事件类型 "timeStamp": 1252, //事件生成的事件戳 "target": { //出发事件的源组件 "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { //组件属性中以data-开头的属性集合 "hi": "MINA" } }, "currentTarget": { //事件绑定的当前组件 "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { "hi": "MINA" } }, "touches": [{ //触摸信息，分别是距离文档左上角、出去导航栏的左上角、整个屏幕左上角距离 "pageX": 30, "pageY": 12, "clientX": 30, "clientY": 12, "screenX": 112, "screenY": 151 }], "detail": { "x": 30, "y": 12 } }
