目录
基础回顾：
基础补充：
1、小程序上线时，是需要用到AppID
2、工具基础功能：清缓存
使用小技巧：当报错很多的时候，可以先清除缓存
微信小程序开发思想：学会看文档
微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/
一、目录结构
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,
修改下拉刷新样式
"backgroundTextStyle":"dark",
（3）自定义导航栏
"navigationStyle": "custom"
（4）配置复用
例子：当希望每个页面都有自己需要的标题，需要去到对应页面的json文件下配置
{
"usingComponents": {},
"navigationBarTitleText": "首页"
}
3、tabBar
（1）如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面
（2）官方文档配置示例
"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
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具
https://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": "我的"
}
]
},
三、页面配置
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;
}
四、数据绑定
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
})
},
九、页面跳转
1、switchTab 跳转
（1）说明：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
（2）使用：
page1.wxml
<button bindtap="toIndex">去首页</button>page1.js
toIndex(){
wx.switchTab({
url: '/pages/index/index',
})
},
（3）注意：仅能跳转tabBar页面
2、<navigator> 跳转
（1）说明：页面链接
（2）使用：
<navigator url="/pages/login/login">去登录</navigator> 
（3）注意：只能跳转非tabBar的页面
3、navigateTo 跳转
（1）说明：页面链接
（2）使用：
page1.wxml
<button bindtap="toLogin">去登录</button>page1.js
toLogin(){
wx.navigateTo({
url: '/pages/login/login',
})
},（3）注意：只能跳转非tabBar的页面
321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
