小程序配置、WXML语法

目录

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>