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

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

一、配置

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

{{msg}}

{{num}}

是否下雨{{isRain}}

{{Object.Chinese}}
{{Object.English}}
{{Object.Science}}

自定义标签
//字符和花括号之间不能存在空格 否则识别会失败




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&＃xff09;列表循环

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

wx-key&＃61;"唯一的值"用来提高列表渲染的性能

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

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

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

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

2&＃xff09;对象循环

wx:for&＃61;“{{对象}}” wx:for-item&＃61;"对象的值" wx:for-index&＃61;"对象的属性"

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

wx:ofr-item&＃61;"value" wx:for-index&＃61;"key"

3&＃xff09;block标签

占位符标签&＃xff1b;

写代码的时候 可以看到这个标签存在 &＃xff1b;

页面渲染 小程序会移除

使用情境&＃xff1a;当循环某些数据不需要额外加入一层内容&＃xff08;不需要进行换行&＃xff09;

4&＃xff09;条件渲染

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

注意&＃xff1a;当页面使用hidden并在添加style&＃61;“diaplay flex”display会把hidden覆盖掉最终显示



条件渲染显示隐藏122


三、事件绑定

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

    绑定关键字bindinput

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

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

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

 不能直接

this.data.num&＃61;e.detail.value

正确的写法

this.setData({

        num:e.detail.value

 })

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

bindtap

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

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

事件源中获取 自定义属性


&＃43;
-
{{num}}


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