微信小程序学习记录day1——配置与绑定

微信公众平台注册小程序后，首先使用测试号，开始教程的学习之路。

一、配置

1.全局配置

其中app.json

//页面路径 顺序影响页面呈现 第一顺序表示调试首先显示的页面
"pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]

 

//小程序页面导航栏设置
"window":{
    "backgroundTextStyle":"dark",                //下拉刷新 三个点的颜色
    "navigationBarBackgroundColor": "#0094ff",   //页面导航栏的背景颜色
    "navigationBarTitleText": "我的小程序",       //页面导航栏字体文本
    "navigationBarTextStyle":"black",            //页面导航栏字体颜色
    "enablePullDownRefresh":true                 //是否下拉刷新
  }

//页面下部 页面跳转导航  
"tabBar":{
   "list":[
    {
      "pagePath": "",            //页面路径
      "text": "",                //文本显示
      "iconPath": "",            //未选中图标路径
      "selectedIconPath": ""     //选中图标路径
    },
    {
      "pagePath": "",
      "text": "",
      "iconPath": "",
      "selectedIconPath": ""
    }
   ]
  },

2.页面配置

pages/index/index.json

//页面导航栏的设置
{
  "usingComponents": {},                       //组件
  "navigationBarBackgroundColor": "#ff555",    //导航栏背景颜色
  "navigationBarTitleText": "我的小程序-1"      //导航栏标题文本
}

二、数据绑定

demo.wxml

<!--pages/demo/demo.wxml-->
<text>pages/demo/demo.wxml</text>
<!--01 字符串类型-->
<view>{{msg}}</view>
<!--02 数字类型-->
<view>{{num}}</view>
<!--03 bool类型-->
<view>是否下雨{{isRain}}</view>
<!--04 object类型-->
<view>{{Object.Chinese}}</view>
<view>{{Object.English}}</view>
<view>{{Object.Science}}</view>
<!--05 在标签的属性中使用-->
<view data-num="{{num}}">自定义标签</view>
//字符和花括号之间不能存在空格 否则识别会失败
<view>
<checkbox checked="{{isChecked}}"></checkbox>    
</view>

demo.js

// pages/demo/demo.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        msg:"hello yijie zhu.",
        num:121314,
        isRain:false,
        Grade:
        {
            Chinese:99,
            Math:100,
            Science:98
        },
        isChecked:false
    }
})

此外一些循环以及标签
1）列表循环

wx-for="{{数组或者对象}}" wx:for-item=”循环对象" wx:for-index="循环项的索引"

wx-key="唯一的值"用来提高列表渲染的性能

wx-key绑定一个普通字符串的时候，这个字符串的名称肯定是循环数组中对象的唯一属性

wx-key=“*this”表示 数组是一个普通的数组 *this表示循环项

当出现数组的嵌套循环 尤其注意 以下绑定的名称不能重名

wx:for-item="item" wx:for-index=“index”  并且如果是一层循环该部分可以省略

2）对象循环

wx:for=“{{对象}}” wx:for-item="对象的值" wx:for-index="对象的属性"

循环对象的时候最好把item和index名称修改一下

wx:ofr-item="value" wx:for-index="key"

3）block标签

占位符标签；

写代码的时候 可以看到这个标签存在 ；

页面渲染 小程序会移除

使用情境：当循环某些数据不需要额外加入一层内容（不需要进行换行）

4）条件渲染

if elseif else
hidden在标签上直接加入属性hidden hidden="{{true}}"
具体使用场景:
当标签不是频繁的切换显示 优先使用wx:if(直接把标签从页面结构移除)
频繁切换使用 优先使用hidden(通过添加样式的方式diaplay数值为none)

注意：当页面使用hidden并在添加style=“diaplay flex”display会把hidden覆盖掉最终显示

<!--条件渲染-->
<!--
    1.if elseif else
    2.hidden在标签上直接加入属性hidden hidden="{{true}}"
    具体使用场景
    当标签不是频繁的切换显示 优先使用wx:if(直接把标签从页面结构移除)
    频繁切换使用 优先使用hidden(通过添加样式的方式)
-->
<view>
    <view>条件渲染</view>
    <view wx:if="{{true}}">显示</view>
    <view wx:if="{{false}}">隐藏</view>
    <view wx:if="{{false}}">1</view>
    <view wx:elif="{{true}}">2</view>
    <view wx:else="{{false}}">2</view>
</view>

三、事件绑定

1.需要给input标签绑定input事件

    绑定关键字bindinput

2.如何获取 输入框的数值

    通过事件源对象来获取e.detail.value

3.把输入框的值复制到data中

 不能直接

this.data.num=e.detail.value

正确的写法

this.setData({

        num:e.detail.value

 })

4.需要加入一个点击事件

bindtap

无法在小程序当中的事件中直接传参

通过自定义属性方法来传递参数

事件源中获取 自定义属性

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

// pages/demo1/demo1.js
Page({
    data: {
    num:0
    },
    //输入框input的执行逻辑
    handleInput(e){
        this.setData({
            num:e.detail.value
        })
    },
    //加减按钮事件
    handletap(e){
        const operation=e.currentTarget.dataset.operation;                 
        this.setData({
            num:this.data.num+operation
        })
        // console.log(num);
    }
})