小程序代码的构成
JSON配置文件
1、项目根目录的app.json
是当前小程序的全局配置，包含了小程序的所有页面路径、窗口外观、界面表现、底部tab等
| 配置项 |
作用 |
| pages |
记录当前小程序所有页面的路径 |
| window |
全局定义小程序所有页面的背景色、文字颜色等 |
| style |
全局定义小程序组件所使用的样式版本 |
| sitemapLocation |
用来指明sitemap.json的位置 |
| 2、project.config.json文件 |
|
| 用来记录我们对小程序开发工具所做的个性化配置 |
|
| 配置项 |
作用 |
| – |
– |
| setting |
保存了编译相关的配置 |
| projectname |
保存的是项目名称 |
| appid |
保存的是小程序的账号ID |
| 3、sitemap.json文件 |
|
| 微信开开放了小程序内搜索，效果类似于PC网页的SEO。该文件用来配置小程序页面是否允许微信索引，可以修改aciton配置为disallow修改为不允许索引。 |
|
| 4、页面的.json配置文件 |
|
| 可以使用每个页面的.json文件对本页面的窗口外观进行配置，页面中的配置会覆盖app.json的window中相同的配置项 |
|
WXSS文件
1、新增了rpx尺寸单位
2、app.wxss是全局小程序样式，页面的.wxss是页面自己的样式
JS文件
1、项目根目录的app.js是小程序的入口文件，通过调用App()函数来启动整个小程序。
2、页面的js文件通过调用Page()函数来创建并运行页面
模板语法
wxml文件：
1
2
3
4
5
6
7
8
9
10
11
| //内容
<view>{{value}}</view>
//属性
<view class="{{active}}">选中</view>
/*tap事件相当于电脑的click
需要传递的参数不能像vue一样@click="clickHandle(3)"
而是使用data-xxx属性传递，在事件对象的target.dataset.xxx可获取到*/
<button bind:tap="clickHandle" data-add="{{3}}">触发isClick函数</button>
<button bindtap="clickHandle" data-add="{{3}}">同上</button>
//input事件
<input type="text" bindinput="inputHandle"/>
|
js文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| Page({
//data同vue2的data
data: {
value:0
},
//事件处理函数写在和生命周期钩子同级的位置就行
clickHandle(e){
//通过this.setData修改data中的数据，简单使用实例传入一个对象，这个对象中的属性名因为data中需要被修改的属性名
this.setData({
value:this.data.value+e.target.dataset.add;
})
},
inputHandle(e){
//可以通过e.detail.value获取文本框的内容
console.log(e.detail.value)
}
})
|
条件渲染 wx:if
JS文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| Page({
data: {
isShow:true,
val:2,
userList:[
{id:1,name:"张三"},
{id:2,name:"李四"},
{id:3,name:"王五"},
]
}
})
|
WXML文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <view wx:if="{{isShow}}">展示</view>
<view wx:else>隐藏</view>
<!-- else if -->
<view wx:if="{{val==1}}">val=1</view>
<view wx:elif="{{val==2}}">val=2</view>
<view wx:else>val=3</view>
<!-- hidden -->
<view hidden="{{!isShow}}">条件为true时隐藏</view>
|
wx:if会删除元素，hidden会修改元素样式为display:none，所以在需要频繁切换的时候建议时候用hidden减少性能消耗
列表渲染 wx:for
JS文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| Page({
data: {
isShow:true,
val:2,
userList:[
{id:1,name:"张三"},
{id:2,name:"李四"},
{id:3,name:"王五"},
]
}
})
|
WXML文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!-- 其中index默认为索引，item默认为成员 -->
<view wx:for="{{userList}}">
{{index}}：{{item.name}}
</view>
<!-- 可以通过wx:for-index和wx:for-item指定索引和成员的名字 -->
<view wx:for="{{userList}}" wx:for-index="idx" wx:for-item="user">
{{idx}}：{{user.name}}
</view>
<!-- 可以像vue一样指定key，如果不指定会有一个警告，指定key的时候不能用{{}} -->
<view wx:for="{{userList}}" wx:key="id">
{{index}}：{{item.id}}
</view>
|
WXSS模板样式
wxss支持rpx单位和@import样式引入
1
2
3
4
5
6
| //common.wxss
.header{
color:red;
}
//index.wxss
@import "/common/common.wxss"
|
wxss分为全局样式和局部样式
当局部样式和全局样式冲突时，局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时才会覆盖全局的样式
