Wx-Programming-2

了解json配置文件、基本语法加数据绑定实例

全局配置文件

参考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。	iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。 详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)
restartStrategy	string	homePage	重新启动策略配置	2.8.0
initialRenderingCache	string		页面初始渲染缓存配置，支持 static / dynamic	2.11.1
visualEffectInBackground	string	none	切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none	2.15.0

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom / top
custom	boolean	否	false	自定义 tabBar，见详情	2.5.0

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px 81px，不支持网络图片。 *当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px 81px，不支持网络图片。 *当 position 为 top 时，不显示 icon。

页面配置

参考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

page.json

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

sitemap配置

参考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

sitemap.json

配置其小程序页面是否允许微信索引。

基本语法

page.js

//Page Oblect
Page({

    data: {
      msg:"hello bing",
      num:100000,
      isGirl:true,
      person:{
          age:74,
          height:145,
          weight:200,
          name:"富婆"
      },
      isChecked:false,
        list:[
            {
                id:0,
                name:"猪八戒"
            },
            {
                id:1,
                name:"天蓬元帅"
            },
            {
                id:2,
                name:"悟能"
            }
        ]
    },
})//Page Oblect
Page({

    data: {
      msg:"hello bing",
      num:100000,
      isGirl:true,
      person:{
          age:74,
          height:145,
          weight:200,
          name:"富婆"
      },
      isChecked:false
    },
})

page.wxml

<!--pages/demo/demo03.wxml-->

<!-- 
    1 text -> span标签 行内元素 不会换行
    2 view -> div标签 块级元素 会换行
    3 checkbox -> 以前的复选框标签
 -->
<text>1</text>
<text>2</text>
<text>3</text>
<view>1</view>
<view>2</view>
<view>3</view>
<text class=""></text>


<!-- 1 字符串 -->
<view>{{msg}}</view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型 -->
<view>是否是女生：{{isGirl}}</view>
<!-- 4 object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}">自定义属性</view>

<!-- 6 使用bool类型充当属性 checked
        1 字符串和花括号之间一定不要存在空格 否则会导致识别失败
         <checkbox checked="    {{isChecked}}> </checkbox>"
-->
<view>
    <checkbox checked="{{isChecked}}"></checkbox>
</view>

<!-- 7 运算-》表达式
        1 可以在花括号忠厚加入 表达式 --
        2 表达式
          指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算 
          1 数字的加减
          2 字符串拼接
          3 三元表达式
        3 语句
          1 复杂的代码段
            1 if else
            2 Switch
            3 do while...
            4 for ...
-->
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{ 11%2 == 0 ? '偶数' : '奇数'}}</view>

<!-- 
    8 列表循环
        1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称" wx:for-index="循环项的索引"
        2 wx:key="唯一的值"用来提高列表渲染的性能
            1 wx:key 绑定一个普通的字符串的时候 那么这个字符串的名称 一定是循环数组中的对象的唯一属性
            2 wx:key = *this 就表示 你的数组 是一个普通数组 *this 表示是循环项
            [1,2,3,4,5]
            [1,'nihao',"22"]
        3 当出现 数组的嵌套循环的时候 尤其要注意 一下绑定的名称 不要重名
            wx:for-item="item wx:for-index="index"
        4 默认情况下 我们 不写
            wx:for-item="item" wx:for-index="index"
            小程序也会把 循环项的名称 和索引的名称 item 和 index
            只有一层循环的话 （wx:for-item="item" wx:for-index="index" ）可以省略
    9 对象循环
        1 wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
-->
<view>
    <view 
    wx:for="{{list}}"
    wx:for-item="item"
    wx:for-index="index"
    wx:key="name">
        索引：{{index}}
        --
        值：{{item.name}}
    </view>
</view>
<view>
    <view>对象循环</view>
    <view 
    wx:for="{{person}}" 
    wx:for-item="value" 
    wx:for-index="key"
    wx:key="name">
        属性：{{key}}
        --
        值：{{value}}
    </view>
</view>

<!-- 
    10 block
        1 占位符的标签
        2 写代码的时候 可以看到这个标签存在
        3 页面渲染 小程序会移除
 -->
<view>
    <block wx:for="{{list}}"
    wx:for-item="item"
    wx:for-index="index"
    wx:key="name"
    class="my_list"
    >
        索引：{{index}}
        --
        值：{{item.name}}
    </block>
</view>

<!-- 
    11 条件渲染
        1 wx:if="{{true/false}}"
        wx:if
        wx:elif
        wx:else
        2 hidden
            1 在标签上直接加入属性 hidden
            2 hidden="{{true}}"
        3 什么场景下用哪个
            1 当标签不是频繁的切换显示 优先使用 wx:if
                直接把标签从页面结构给移除掉
            2 当标签频繁切换显示 优先使用 hidden 
                通过添加样式的方式来切换显示
                hidden（相当于style="display:none;"）与样式dieplay不要混用，display会把hidden覆盖
 -->

 <view>
    <view wx:if="{{true}}">显示</view>    
    <view wx:if="{{false}}">隐藏</view>

    <view wx:if="{{true}}"> 1 </view>
    <view wx:elif="{{false}}"> 2 </view>
    <view wx:else> 3 </view>
    
    <view>------------------------</view>
    <view hidden>hidden1</view>
    <view hidden="{{false}}">hidden2</view>

    <view>----------000-------------</view>
    <view wx:if="{{false}}">wx:if</view>
    <view hidden>hidden</view>
</view> 

数据绑定实例

demo.wxml

<!-- 
    1 需要给input标签绑定 input事件
        绑定关键字 bindinput
    2 如何获取 输入框的值
        通过事件源对象来获取
        e 事件原对象
        e.detail.value
    3 把输入框的值 赋值到 data 当中  setData()
        不能直接
        1 this.data.num = e.detail.value
        2 this.num = e.detail.value
        正确的写法
        this.setData({
            num:e.detail.value
        })
    4 需要加入一个点击事件
        1 bindtap
        2 无法在小程序当中 直接 传参  handtap(1)错误 不能带参数 不能带括号
        3 通过自定义属性的方式(data-...)来传递参数
        4 事件源中获取 自定义属性(e.currentTarget.dataset)
 -->


<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
    {{num}}
</view>

demo.js

// pages/demo/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
  handleInput(e){
    this.setData({
        num:Number(e.detail.value)
    })
  },
  //加 减 按钮的事件
  handletap(e){
    //  console.log(e);
    // 1 获取自定义属性 operation
    const operation=e.currentTarget.dataset.operation;
    this.setData({
        num: this.data.num + operation
    })
  }
})