微信小程序小程序开发的基本配置，组件标签介绍，rpx单位，数据绑定，列表渲染，条件渲染，事件绑定，数据操作，页面跳转

基础回顾：
juejin.cn/post/722513…

基础补充： 1、小程序上线时，是需要用到AppID

2、工具基础功能：清缓存
使用小技巧：当报错很多的时候，可以先清除缓存

微信小程序开发思想：学会看文档
developers.weixin.qq.com/miniprogram…

一、目录结构

1、pages文件夹

（1）.json文件：配置
（2）.wxml文件：模板
（3）.wxss文件：样式
（4）.js文件：脚本逻辑

2、utils文件夹

存放一些工具JS文件。

3、app文件

（1）app.js：小程序最终打包、创建App实例的入口文件（相当于Vue中main.js），可以在这个文件中写一些全局变量、绑定生命周期回调函数、错误监听和页面不存在监听函数等
（2）app.json：小程序全局配置
（3）app.wxss：小程序公共样式表

二、app.json全局配置

1、pages

配置页面路径，只要新建一个页面就要在pages中添加页面路径（新版开发工具会自动添加）
注意：第一项就是进入小程序后显示的默认页

2、windows

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

"window":{
  "enablePullDownRefresh": true,
  "backgroundTextStyle":"dark",
  "navigationBarBackgroundColor": "#0000ff",
  "navigationBarTitleText": "小程序",
  "navigationBarTextStyle":"white"
},

（2）全局下拉刷新
启动下拉刷新

"enablePullDownRefresh": true,

录制_2023_06_21_23_11_27_406.gif

修改下拉刷新样式

"backgroundTextStyle":"dark",

录制_2023_06_21_23_13_48_729.gif

（3）自定义导航栏

"navigationStyle": "custom"

录制_2023_06_21_23_27_24_396.gif

（4）配置复用
例子：当希望每个页面都有自己需要的标题，需要去到对应页面的json文件下配置

{
  "usingComponents": {},
  "navigationBarTitleText": "首页"
}

录制_2023_07_03_14_37_49_301.gif

3、tabBar

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

（2）官方文档配置示例 developers.weixin.qq.com/miniprogram…

"tabBar": {
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },
    {
      "pagePath": "pages/page1/page1",
      "text": "我的"
    }
  ]
},

（3）字体颜色
①未选中："color": "#cdcdcd",
②选中："selectedColor": "#1296db",

"tabBar": {
  "color": "#cdcdcd",
  "selectedColor": "#1296db",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },
    {
      "pagePath": "pages/page1/page1",
      "text": "我的"
    }
  ]
},

（4）tabBar的图标

①图标获取途径：图标大全iconfont
www.iconfont.cn/

②创建文件夹assets，放下载的图标

③未选中："iconPath": "/assets/首页.png",
④选中："selectedIconPath": "/assets/首页 (1).png"

"tabBar": {
  "color": "#cdcdcd",
  "selectedColor": "#1296db",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/assets/首页.png",
      "selectedIconPath": "/assets/首页 (1).png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },
    {
      "pagePath": "pages/page1/page1",
      "text": "我的"
    }
  ]
},

录制_2023_07_03_11_39_35_418.gif

三、页面配置

1、组件标签

（1）view组件：相当于div，块级元素
（2）text组件：相当于span，行内元素
（3）image组件：相当于img，行内块元素
与img不同的是，image有一个特别的属性mode，可以进行图片裁剪、缩放的模式

属性值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

<image src="https://img2.baidu.com/it/u=823515100,3889162028&fm=253&fmt=auto&app=120&f=JPEG?w=741&h=1112" mode=""></image>
<image src="https://img2.baidu.com/it/u=823515100,3889162028&fm=253&fmt=auto&app=120&f=JPEG?w=741&h=1112" mode="aspectFit"></image>

（4）button组件：按钮，会有默认样式，有loading属性

<button loading="true">点击</button>

2、wxss样式

（1）选择器，样式属性和css一模一样
（2）尺寸单位

微信主要使用rpx单位，而不是px，rpx可根据屏幕宽度自适应，规定默认屏幕宽为750rpx
换算公式： 1rpx = 0.5px = 1物理像素
在 iPhone6 上，屏幕宽度- 为375px，共有750个物理像素，750rpx = 375px = 750物理像素
注意： 建议使用机型【iphone 6】

page2.wxml

<view class="box1"></view>
<view class="box2"></view>

page2.wxss

.box1{
  width: 100px;
  height: 200px;
  background-color: red;
}
.box2{
  width: 200rpx;
  height: 400rpx;
  background-color: blue;
}

录制_2023_07_03_15_37_05_619.gif

四、数据绑定

1、插值绑定

（1）格式：{{ 变量值}}
（2）代码例子
page1.wxml

<view>
  <text>{{msg}}</text>
  <text>-----</text>
  <text>{{count==10?'是':'否'}}</text>
</view>

page1.js

data: {
  msg:'是否是数字10',
  count:10,
},

2、属性绑定

（1）格式：{{ 变量值 }}
（2）代码例子
page1.wxml

<view class="box {{isActive?'active':''}}"></view>

page1.wxss

.box{
  width: 200rpx;
  height: 200rpx;
  background-color: red;
}
.active{
  background-color: green;
}

page1.js

data: {
  msg:'是否是数字10',
  count:20,
  isActive:false
},

五、列表渲染

1、基础认识

（1）格式：wx:for="{{变量}}"
（2）使用：
page1.wxml

<view wx:for="{{arr}}" wx:key="item">{{item}}-----{{index}}</view>

page1.js

data: {
  arr:[11,26,93,47,67,34]
},

（3）注意：
①默认数组当前项的值默认为 item，数组的当前项的下标变量名默认为 index，直接使用即可
②如不提供 wx:key，会报警告 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略
③花括号和引号之间如果有空格，将最终被解析成为字符串
④当 wx:for 的值为字符串时，会将字符串解析成字符串数组

2、属性重命名

（1）wx:for-item：可以指定数组当前元素的变量名

<view wx:for="{{arr}}" wx:key="item" wx:for-item="data">{{data}}-----{{index}}</view>

（2）wx:for-index：可以指定数组当前下标的变量名

<view wx:for="{{arr}}" wx:key="item" wx:for-index="data">{{item}}-----{{data}}</view>

六、条件渲染

1、基础认识

（1）格式：wx:if="{{变量}}"、wx:elif=""、wx:else
（2）使用：
page1.wxml

<view wx:if="{{count>=90}}">优秀</view>
<view wx:elif="{{count>=60}}">及格</view>
<view wx:else>不及格</view>

page1.js

data: {
  count:100
},

（3）注意：此方式会销毁标签

2、显示隐藏

（1）格式：hidden="{{变量}}"
（2）使用：
page1.wxml

<view hidden="{{isHidden}}">看不见我</view>

page1.js

data: {
  isHidden:true
},

（3）注意：
①传入true时表示隐藏，false时表示不隐藏
②此方式仅切换显示隐藏，不会销毁标签

七、事件绑定

1、基础认识

（1）格式：bind事件类型="函数名"
（2）使用：
page1.wxml

<button bindtap="btnClick">点击</button>

page1.js

btnClick(){
  console.log('点了点了');
},

（3）注意：微信小程序有不同的传参形式，常见的fn(1,2)传参形式在事件绑定这里并不适用

2、参数传递

（1）格式：data-形参="实参"
（2）使用：
page1.wxml

<view class="btns">
  <view class="btn" wx:for="{{list}}" wx:key="id" bindtap="btnsClick" data-a="{{item}}">{{item.name}}</view>
</view>

page1.wxss

.btns{
  display: flex;
  justify-content: space-between;
}
.btn{
  width: 100rpx;
  height: 100rpx;
  background-color: skyblue;
  color: white;
}

page1.js

data: {
  list:[
    {
      id:0,
      name:'张三',
      age:18
    },
    {
      id:1,
      name:'李四',
      age:20
    },
    {
      id:2,
      name:'王五',
      age:22
    },
  ]
},
btnsClick(item){
  console.log(item);
},

（3）注意：
①数据以 data- 开头，多个单词由连字符 - 连接，即kebab-case命名
②勿出现大写字母，会被自动转为小写字母
③多个参数需要写多个data-指令分别传入

3、参数获取

（1）格式：
①event.currentTarget.dataset.形参名
②event.target.dataset.形参名
（2）使用
①

btnsClick(item){
  console.log(item.currentTarget.dataset.a);
},

②

btnsClick(item){
  console.log(item.target.dataset.a);
},

（3）注意：参数获取都是通过事件形参event，但不一定在其currentTarge属性中，不同事件类型的参数所在区域有所不同

八、数据操作

1、修改数据

（1）格式：setData(obj)
（2）使用：
page1.wxml

<button loading="{{isLoading}}" bindtap="btnClick">点击</button>

page1.js

data: {
  isLoading:false
},
btnClick(){
  this.setData({
    isLoading:true
  })
},

2、获取数据

（1）格式：this.data.变量
（2）使用：
page1.wxml

<button loading="{{isLoading}}" bindtap="btnClick">点击</button>

page1.js

data: {
  isLoading:false
},
btnClick(){
  this.setData({
    isLoading:!this.data.isLoading
  })
},

录制_2023_07_04_11_33_33_374.gif

九、页面跳转

1、switchTab 跳转

（1）说明：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
（2）使用：
page1.wxml

<button bindtap="toIndex">去首页</button>

page1.js

toIndex(){
  wx.switchTab({
    url: '/pages/index/index',
  })
},

录制_2023_07_04_13_45_20_436.gif

（3）注意：仅能跳转tabBar页面

2、跳转

（1）说明：页面链接
（2）使用

<navigator url="/pages/login/login">去登录</navigator>

录制_2023_07_04_13_51_51_233.gif

（3）注意：只能跳转非tabBar的页面

3、navigateTo跳转

（1）说明：页面链接
（2）使用
page1.wxml

<button bindtap="toLogin">去登录</button>

page1.js

  toLogin(){
  wx.navigateTo({
    url: '/pages/login/login',
  })
},

（3）注意：只能跳转非tabBar的页面

微信小程序

一、目录结构

1、pages文件夹

2、utils文件夹

3、app文件

二、app.json全局配置

1、pages

2、windows

3、tabBar

三、页面配置

1、组件标签

2、wxss样式

四、数据绑定

1、插值绑定

2、属性绑定

五、列表渲染

1、基础认识

2、属性重命名

六、条件渲染

1、基础认识

2、显示隐藏

七、事件绑定

1、基础认识

2、参数传递

3、参数获取

八、数据操作

1、修改数据

2、获取数据

九、页面跳转

1、switchTab 跳转

2、 跳转

3、navigateTo跳转

2、跳转