第一步：注册账号，安装微信小程序开发者工具
第二步：新建项目，不使用云服务，选择JavaScript语言
pages：用来存放小程序所有的页面
utils：用来存放工具性质的模块（例如：格式化时间的自定义模块）
app.js: 小程序项目的入口文件
app.json： 小程序项目的全局配置文件
app.wxss： 小程序项目的全局样式文件
页面中json文件
.json: 当前页面的配置文件，配置窗口的外观，表现等 会覆盖app.json中的配置
app.json 内容
pages： 用来记录当前小程序所有页面的路径
window： 全局定义小程序所有页面的背景色，文字颜色
style：全局定义小程序组件所使用的样式版本
sitemaplocation： 用来指明sitemap.json 的位置
project.config.json
是项目配置文件，用来记录对微信开发者工具所做的个性化配置
新建小程序页面:app.json中加入路径
修改小程序首页:修改app.json中pages的存放路径
1. 标签名称不同
2. 属性节点不同
3. 提供了类似vue的模板语法
类似css
渲染层 wxml和wxss工作在渲染层
逻辑层 js脚本工作在逻辑层
渲染层和逻辑层的通信由微信客户端进行转发
同时客户端负责与服务器之间的数据请求和数据响应
小程序启动
页面渲染
flex布局
效果
wxml
wxss
容器的6个属性
wxml
<swiper class="container2">
<swiper-item><view class="item">ok1</view></swiper-item>
<swiper-item><view class="item">ok2</view></swiper-item>
<swiper-item><view class="item">ok3</view></swiper-item>
</swiper>
复制代码wxss
.container2{
height: 150px;
width: 100%;
text-align: center;
line-height: 150px;
}
//选择的是第一个swiper-item
swiper-item:nth-child(1) .item{
background-color: rgb(98, 103, 112);
}
//选择的是第二个swiper-item
swiper-item:nth-child(2) .item{
background-color: rgb(155, 201, 165);
}
swiper-item:nth-child(3) .item{
background-color: rgb(157, 177, 214);
}
复制代码button,image,navigator
<!-- button按钮 -->
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- 镂空 plain -->
<button size="mini" plain>小小的按钮</button>
<button size="mini" type="primary">小主色调按钮</button>
复制代码<!-- image标签 -->
<!-- mode属性,默认是scaleToFill:不保持纵横比缩放图片,使图片宽高拉伸至刚好填满image元素
1.图片完整显示 2. 会被拉伸的很丑哦-->
<image src="/images/QQ图片20220522090034.jpg"></image>
<!-- aspectFit 保持纵横比缩放图片,使长边刚好完全显示出来
1. 图片完整显示 2.会留空白哦-->
<image src="/images/QQ图片20220522090034.jpg" mode="aspectFit"></image>
<!-- aspectFill 只保证短边能够刚好显示出来,
1. 图片不会完整显示 这种模式会不改变纵横比填满整个image
2. image图片的宽高不会改变-->
<image src="/images/QQ图片20220522090034.jpg" mode="aspectFill"></image>
<!-- widthFix 宽度不变,高度自适应
1. 图片会完整显示 2. image标签的高度改变了-->
<image src="/images/QQ图片20220522090034.jpg" mode="widthFix"></image>
<!-- heightFix 高度不变,宽度自适应
1. 图片会完整显示 2. image标签的宽度被改变了-->
<image src="/images/QQ图片20220522090034.jpg" mode="heightFix"></image>
复制代码三大分类:
事件监听类API
example:wx.onWindowResize 监听窗口尺寸变化的事件
同步API
example: wx.setStorageSync('key','value')向本地存储写入内容
异步API
example:用wx.request()发起网络数据请求,需要success回调函数接收数据
与vue不一样,无论是动态绑定内容还是动态绑定属性,都需要插值语法
<image src="{{imageSrc}}" mode="widthFix"></image>
复制代码动态绑定数据
三元运算
<view>{{randomNum >=5?'随机数字大于等于5':'随机数字小于5'}}</view>
复制代码<view>{{randomNumber* 100}}</view>
复制代码小程序常用事件
| 类型 | 绑定方式 | 事件描述 |
|---|---|---|
| tap | bindtap / bind:tap | 手指轻点 |
| input | bindinput / bind:input | 输入 |
| change | bindchange / bind:change | 状态改变时触发 |
target和currentTarget
wxml
<button type="primary" bindtap="btnTapHandler">点击触发事件</button>
复制代码js
btnTapHandler(e){
console.log(e)
},
复制代码利用事件绑定改变data里面的数据
wxml
<view>{{count}}</view>
<button bindtap="countChange">+1</button>
复制代码js
countChange(e){
this.setData({
count: this.data.count+1
})
},
复制代码小程序中无法一边绑定事件一边传递参数,因为小程序的事件采用插值语法的解析方式,会误认为整体是个函数名,只能通过data_* 的方式去传递参数
wxml
<!-- 事件传参 -->
<!-- 如果不加花括号,传入的是字符串,加了花括号,传入的是数字 -->
<button type="primary" bindtap="btnTapHandler2" data-info="2">+2</button>
复制代码js
btnTapHandler2(e){
this.setData({
//dataset是一个对象,保存着所有通过data-*传递过来的参数项
count:this.data.count+e.target.dataset.info,
})
},
复制代码wxml
<input bindinput="inputHandler" value="12345"></input>
复制代码js
inputHandler(e){
console.log(e.detail.value)
},
复制代码wxml
<!-- 条件渲染 -->
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>
复制代码结合block标签控制多个组件的展示与隐藏
<!-- 结合block标签控制多个组件的展示与隐藏 -->
<!-- 避免渲染出一些不必要的外层盒子 -->
<block wx:if="{{true}}">
<view>abc</view>
<view>def</view>
</block>
复制代码hidden和wx:if的区别
hidden是控制样式,wx:if是动态创建和移除元素
频繁切换的时候使用hidden,如果是多个选择一个显示的时候,控制条件比较复杂,可以选择wx:if
wxml
<view wx:for="{{arr1}}">
索引是:{{index}}
item项是:{{item}}
</view>
复制代码改名
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName"></view>
复制代码key
<!-- wx:key的使用 不用加花括号,建议把id当做key值 -->
<view wx:for="{{user}}" wx:key="no">
{{item.name}}
</view>
复制代码具有大部分css的特性,具有扩展:1.rpx 2. @import
rpx
是微信小程序独有的,用于解决屏幕适配的尺寸单位
rpx的实现原理 :rpx把所有屏幕在横向上分为750份
rpx与px之间的单位换算: example: 在iphone6上面,屏幕宽度为375px
750rpx = 375px
1rpx=0.5 px
样式导入
@import后跟要导入的样式表的相对路径,用;结尾
当局部样式和全局样式冲突时,根据就近原则,如果局部样式权重大于或等于全局样式的权重,才会覆盖全局的样式
小程序窗口组成部分
window节点常用配置项
tabBar的六个组成部分
tabBar节点的配置项
每个tab的配置项
json
"tabBar": {
"list": [
{
"pagePath": "pages/list/list",
"text": "list"
},
{
"pagePath": "pages/day3Afternoon/day3Afternoon",
"text": "学习"
}
]
},
复制代码js
getInfo(){
wx.request({
url: 'https://www.escook.cn/api/get',
method:'GET',
data:{
name:'zs',
age:20
},
success:(res)=>{
console.log(res.data)
}
})
},
复制代码声明式导航
跳转至配置为tabBar的页面
使用navigator
<navigator url="/pages/day3Morning/day3Morning" open-type="switchTab">导航到学习</navigator>
复制代码跳转至没有被配置为tabBar的页面
open-type的属性可以省略不写
<navigator url="/pages/index/index" open-type="navigate">跳转至非TabBar页面</navigator>
复制代码编程式导航
调用wx.switchTab(Object obj)方法,可以跳转到tabBar页面
导航至非tabBar页面
后退导航
声明式导航传参
下拉刷新
wxml
<!-- 下拉刷新 -->
<view>count:{{count}}</view>
<button bindtap="addCount">点我加一</button>
复制代码js
addCount(){
this.setData({
count: this.data.count+1,
})
},
复制代码 /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
this.setData({
count:0
})
//关闭下拉刷新
wx.stopPullDownRefresh({
success: (res) => {},
})
},
复制代码上拉处理
监听上拉触底
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("触发了上拉刷新")
},
复制代码案例:请求各种颜色
js
//存放获取到的数据
data: {
colorList:[],
},
//获取各种颜色
getColors(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/color',
method:'GET',
success:({data:res})=>{
console.log(res);
this.setData({
//扩展运算符（…）作用是将一个数组转为用逗号分隔的参数序列
colorList:[...this.data.colorList,...res.data]
})
},
complete:()=>{
wx.hideLoading()
}
})
},
//触发这个函数
onReachBottom() {
console.log("触发了上拉刷新")
this.getColors();
wx.showLoading({
title: '加载中',
})
复制代码小程序生命周期函数
页面生命周期函数
<view>{{m1.toUpper(name)}}</view>
<!-- 充当过滤器 -->
<wxs module="m1">
module.exports.toUpper=function(str){
return str.toUpperCase()
}
</wxs>
复制代码