1.全局配置
通过修改根目录下的 app.json
文件可对微信小程序进行全局配置。
文件内容为一个 JSON 对象,有很多属性
①pages属性
用于指定小程序由哪些页面组成,每一项都对应一个页面的 url 信息。
文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json
, .js
, .wxml
, .wxss
四个文件进行处理。
未指定 entryPagePath
时,数组的第一项代表小程序的初始页面(首页)
②windows属性
常用的四个属性
navigationBarBackgroundColor 导航栏背景颜色
navigationBarTextStyle 导航栏标题颜色 black
/ white
navigationBarTitleText 导航栏标题文字内容
backgroundTextStyle 下拉 loading 的样式,仅支持 dark
/ light
enablePullDownRefresh 是否开启全局的下拉刷新
app.json
{
...
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#ddccbb",
"navigationBarTitleText": "我的世界",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true
},
...
}
③tabBar属性
设置用来切换页面的tab栏,可以放在顶部或底部
app.json
{
.... //原代码不变
"tabBar": {
"color": "#000",
"selectedColor": "#0f0",
"backgroundColor": "#eee",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/home.png",
"selectedIconPath": "images/home_h.png"
},{
"pagePath": "pages/logs/logs" ,
"text": "日志",
"iconPath": "images/logs.png",
"selectedIconPath": "images/logs_h.png"
},{
"pagePath": "pages/profile/profile" ,
"text": "我的",
"iconPath": "images/profile.png",
"selectedIconPath": "images/profile_h.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2.局部页面配置
每一个小程序页面也可以通过 .json
文件来对本页面的窗口表现进行配置。
页面中配置项在当前页面会覆盖 app.json
的 window
中相同的配置项。
主要是一些导航栏的设置,比如用navigationBarTitleText属性修改导航栏上的text、开启下拉刷新功能等等。。。
3.WXML语法
WXML(WeiXin Markup Language)是框架设计的一套标签语言
数据绑定、条件渲染
使用 Mustache 语法(双大括号)将变量包起来
绑定的数据可以是字符串、数组、对象
使用 wx:if、wx:elif
、wx:else
来进行条件渲染wx:if、wx:elif
、wx:else
都是控制属性,需要添加到标签上
如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
注意: wx:if、wx:elif
、wx:else
这些属性所在标签要连在一起,中间插入其他组件会报错
<view>{{title}}</view>
<view style="color: #0f0;">{{content}}</view>
<view>{{listArr[0]}}</view>
<view>{{listArr}}</view>
<view>
{{obj.name}} - {{obj.age}} - {{obj.sex}}
</view>
<view wx:if="{{day==1}}">周1</view>
<view wx:elif="{{day==2}}">周2</view>
<view wx:elif="{{day==3}}">周3</view>
<view wx:elif="{{day==4}}">周4</view>
<view wx:elif="{{day==5}}">周5</view>
<view wx:else>错误</view>
<block wx:if="{{true}}">
<navigator url="/pages/news/news">跳转1</navigator>
<view>这是标题</view>
<view>这是内容</view>
</block>
<block wx:else>
<navigator url="/pages/news/news">跳转2</navigator>
</block>
Page({
/**
* 页面的初始数据
*/
data: {
title: "stay hungry, stay foolish",
content: "The tough times never last, but the tough people do.",
listArr: ["one", "two", "three"],
obj:{
name: "fyx",
age: 20,
sex: "男"
},
day: 5
},
...//原代码不变
})
组件属性、控制属性要用到绑定的变量都要用{{}}括起来,true和false这样的关键字也要
{{}}里面也可以进行一些简单的运算,具体看官方文档
<view id="item-{{id}}"> </view>
<view wx:if="{{condition}}"> </view>
<checkbox checked="{{false}}"> </checkbox>
列表渲染(for循环)
在组件上使用 wx:for
控制属性绑定一个数组
数组的当前项的下标变量名默认为 index
,当前项的变量名默认为 item
<view wx:for="{{3}}">首页</view>
<view wx:for="{{listArr}}" wx:key="*this">{{index}}.{{item}}</view>
<view wx:for="{{listObj}}" wx:key="index">
<text>{{item.title + '\n'}}</text>
<text>{{item.content}}</text>
</view>
const app = getApp()
Page({
data: {
listArr: ['Vue', 'Angular', 'React'],
listObj: [
{
id: 0,
title: '登科后',
content: '春风得意马蹄疾,一日看尽长安花'
},{
id: 1,
title: '浪淘沙',
content: '流水落花春去也,天上人间'
},{
id: 2,
title: '无题',
content: '春心莫共花争发,一寸相思一寸灰'
}
]
},
... //原代码不变
})
使用 wx:for-item
可以指定数组当前元素的变量名
使用 wx:for-index
可以指定数组当前下标的变量名
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>