小程序的基本配置

小程序的配置文件

全局配置文件 app.json

pages

:页面 显示项目有几个页面，也可以帮我们新建页面，但是这个操作只能在微信开发者工具里面使用，在vcode编辑器里面就不会帮我们新增页面，谁放在第一个就会先显示谁

window

:定义小程序的状态栏 导航栏的背景文字颜色等
“navigationBarBackgroundColor”:"#CCC" 定义导航栏的背景颜色
“navigationBarTitleText”:“首页”，定义标题
“navigationBarTextStyle”:“white”; 定义标题的文字颜色 只能是white/black
“backgroundTextStyle”:“lingh” 下拉刷新的文字颜色 只能是dark/lingh
“endblePullDownRefresh”:true; 开启下拉刷新
“backgroundColor”:“yellow” 下拉刷新那个区域的颜色

tabBar

这里面list中至少要有两个，
“tabBar”:{
“list”:[
{
“pagePath”: “pages/index/index”, 页面
“text”: “首页”, 文字
“iconPath”: “./icons/33.png”, 没被选中的图标
“selectedIconPath”: “./icons/36.png” 选中的图标
},
]
}

页面配置：

在json文件中
“usingComponents”:{这里可以引入组件}
“navigationBarTitleText”:"拉拉"  // 定义本页面的头部标题文字

这些属性在这里写，就只能在这里生效

“navigationBarBackgroundColor”:"#CCC"  定义导航栏的背景颜色
“navigationBarTitleText”:"首页"，定义标题
"navigationBarTextStyle":"white"; 定义标题的文字颜色 只能是white/black
"backgroundTextStyle":"lingh" 下拉刷新的文字颜色 只能是dark/lingh
“endblePullDownRefresh”:true;  开启下拉刷新
"backgroundColor":"yellow" 下拉刷新那个区域的颜色

模板语法

text 相当于之前的span 不会换行
view 相当于之前的view 会换行
block 占位符 渲染的时候页面不会显示这个标签

数据绑定

在js文件的data中定义一个msg:“hello”
在组件的标签中 {{msg}}
定义一个num:1000
在组件的标签中：{{num}}
isGirl:false
在组件中 是不是女生:{{isGril}}
定义一个对象类型
person:{
age:22,
height:178,
width:100,
name:“lisa”
}
在组件中 渲染对象的时候要写到具体的不然出来的就是object
{{person.age}}
字符串和大括号之间不能存在空格，不然会导致识别失败

在标签的属性中使用
<view data-num="{{num}}">自定义属性</view>

使用布尔类型充当属性
在data中定义一个ischecked:false
<view>
	<checkbox checked="{{ischecked}}"></checkbox>
</view>

小程序之间的运算

// 数字类型
<view>{{1+1}}</view>   //2
// 字符串类型
<view>{{'1'+'1'}}</view>  //11
// 三元类型
<view>{{10%2===0?'偶数':'奇数'}}</view>  //偶数

小程序列表渲染 wx:for

循环数组

在data中定义一个数组

list:[
	{
	id:0,
	name:lisa 
    },
    {
	id:1,
	name:rose
    },
    {
	id:1,
	name:jennie
    }
]

<view wx:for="{{list}}" wx:key="id" wx:for-item="item" wx:for-index="index">{{item.name}}</view>

wx:key绑定唯一值,简单的循环写*this
wx:for-item= 循环项
循环嵌套是不要重名

循环对象

循环对象的时候最好把item index 改一下名字
在data中定义一个对象

msg:{
	name:"lisa",
	age:23,
	like:"jennie"
}
<view wx:for="{{msg}}" wx:for-item="value" wx:for-index="key">{{value.name}}</view>

条件渲染

wx:if 与hidden都能实现控制功能的隐藏或者显示

1. if elif else

wx:if="{{true/false}}" 值为true就显示 为false就隐藏
wx:elif="{{true/false}}"   值为true就显示 为false就隐藏
wx:else  加了这个属性 无论条件是否成立都会执行这里

2.hidden

在标签上直接加入属性hidden

 <view hidden="{{false}}">hiddne</view> 值为false的时候会显示 为true会隐藏

什么场景下使用：
1.当标签不是频繁的切换显示 优先是使用wx:if 直接把这个标签从页面结构上删除 消耗性能
2.当标签频繁切换的时候 优先使用hidden 添加样式的方式来切换显示的 display：block，所以这个标签内最好不要再加display属性，不然会出错

小程序中的事假绑定

给input绑定事件
关键字:bindinput=“事件名 aa”

aa(e){
console.log(e.detail.value) // 获取输入的内容
let {value} = e.detail.value; // 把输入的内容结构出来
this.setData({
num:value // 这个时候data中num的值就等于你input输入的值
})
}
简单的加减
在data中定义一个num:0

<button bindtap="a" data-operation="{{1}}">+</button>
<button bindtap="a" data-operation="{{-1}}">-</button>

在方法中：
a(e){
console.log(e.currentTarget.dataset.operation; // 获取data-operation中的值
this.setData({
num:this.data.num+operation
})
}

小程序中的尺寸单位：rpx 可以根据屏幕宽度进行自适应

不需要主动引入本页面中的样式文件
需要把页面中的某些元素的单位由px改为rpx 或者百分比

可以利用calc来帮助我们计算

小程序的样式导入

路径只支持相对路径 要用@import来引入

例如：
@import '../../styles/commint.wxss';

小程序中常见组件

view text rich-text button image navigator icon swiper radio checkbox等

view

就相当于之前的div来使用 有点击出现样式等属性 具体参考官网

text

：文本标签相当于span 只能嵌套text 文字可以赋值
1.selectable长按赋值

<text selectable>123</text>

2.对空格与回车进行编码与解码 decode 其他参考官网
1234

3.image

小程序的图片
图片最好使用外网的图片，因为小程序打包上传不能好过2M
图片存在默认宽高 320*240
mode 决定图片与图片宽高做适配
1.scrollFill不保持纵横比 图片可以填满容器 常用
2.aspectFit 保持宽高比，保证图片的长边显示出来，页面轮播图 常用
3.aspexFill 保持纵横比 只保证图片的短边能完全显示出来 少用

 <image src="图片地址" ></image>