小程序
- 小程序与普通网页开发的不同
- 运行环境不同
网页运行在浏览器中
小程序运行在微信环境中
- API不同
由于运行环境不同,所以小程序中无法调用DOM和BOM的API。但是,小程序可以调用微信环境提供的各种API,例如:地理定位,扫码,支付
- 开发模式不同
网页的开发模式:浏览器+代码编辑器
小程序有自己一套标准开发模式:申请开发账号+安装小程序开发工具+创建和配置小程序项目
- 开发者工具
- 开发者工具功能
- 快速创建小程序项目
- 代码的查看和编辑
- 对小程序功能进行调试
- 小程序的预览和发布
2、开发者工具快捷键
- Ctrl+1-9:在打开文件之间切换
- Ctrl+Shift+F:在文件中查找
- Ctrl+J:切换面板
- Ctrl+Shift+Alt+B:切换侧边栏可见性
- Ctrl+K+C:注释
- Ctrl+K+U取消注释
- 认识小程序
- 项目的基本组成结构
- Pages用来存放所有小程序的页面
- Util用来存放工具性质的模块(例如:格式化时间的自定义模块)
- App.js小程序项目入口
- App.json小程序项目的全局配置文件
- App.wxss小程序项目的全局样式文件
- Project.config.json项目的配置文件
- Sitemap.json用来配置小程序及其页面是否允许被微信索引
- 小程序页面页面的组成部分
.js文件(页面的脚本文件,存放页面的数据,事件处理函数等)
.json文件(当前页面的配置文件,配置窗口的外观,表现等)
.wxml(页面的模板结构文件)
.wxss(当前页面的样式表文件)
- 新建页面
在app.json中找到pages节点,然后增加一项
- WXML模板
- WXML与HTML的区别
- 标签名称的不同
- HTML(div,span,img,a)
- WXML(view,text,image,navigator)
- 属性节点的不同
- <a href=”#”>超链接</a>
- <navigator url=”pages/home/home”></navigator>
- 提供了类似于Vue中的模板语法
- 数据绑定
- 列表渲染
- 条件渲染
- 什么是WXSS
- WXSS是一套样式语言,用于描述 WXML的组件样式,类似于网页开发中的CSS
- WXSS和CSS的区别
- 新增rpx尺寸单位
- CSS中需要手动进行像素单位换算,例如rem
- WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算
- 提供了全局的样式和局部样式
- 项目根目录中的app.Wxss会作用于所有小程序页面
- 局部页面的.WXSS样式仅对当前页面生效
- WXSS仅支持部分CSS选择器
- .class和#id
- Element
- 并集选择器、后代选择器
- ::after和::before等伪类选择器
- JS逻辑交互
- 小程序中的JS文件分类
- App.JS
- 是整个小程序项目的入口文件,通过调用APP()函数来启动整个小程序
- 页面的.JS文件
- 是页面的入口文件,通过调用Page()函数来创建并运行页面
- 普通的.JS文件
- 是普通的功能模块文件用来封装公共的函数或属性供页面使用
- 小程序组件的分类
- 视图容器
- View
- 普通视图区域
- 类似HTML中的div,是一个块级元素
- 常用来实现页面布局效果
- Scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表
WXML[
<Scroll-view class=”container” scroll-x scroll-with-animation=’ture’>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
]
WXSS[
.container view{
Width:100px;
Height:100px;
Text-align:center;
Line-height:100px;
}
.container view:nth-child(1){
margin-right: 30rpx;
display: inline-block;
background-color:lightgreen;
}
.container view:nth-child(2){
margin-right: 30rpx;
display: inline-block;
background-color:brown;
}
.container view:nth-child(3){
display: inline-block;
background-color:deeppink;
}
.container {
border:1px black;
width:100px;
height: 300px;
white-space: nowrap;
}
]
-
- swiper和swiper-item
- 轮播图容器组件和轮播图item组件
属性 | 类型 | 默认值 | 说明 |
Indicator-dots | Boolean | False | 是否显示面板指示点 |
Indicator-color | Color | Rgba(0,0,0,3) | 指示点颜色 |
Indicator-active-color | Color | #000000 | 当前选中的指示点颜色 |
Autopaly | Booleasn | False | 是否自动切换 |
Interval | Number | 5000 | 自动切换时间间隔 |
Circular | boolean | false | 是否采用衔接滑动,即从最后一张后顺到第一张 |
- 基础内容
- Text
- 文本组件
- 类似于HTML中的span标签,是一个行类元素
- 通过text组件的selectable属性,实现长按选中文本内容的效果
- Rich-text
- 富文本组件
- 支持把HTML字符串渲染为WXML结构
- 表单组件
- 导航组件
- 媒体组件
- Map地图组件
- Canvas画布组件
- 开放能力
- 无障碍访问
- 其他组件
- Button
- 按钮组件
- 功能比HTML中的button按钮丰富
- 通过open-type属性可以调用微信提供的各种功能(客服,转发,获取用户权限,获取用户信息等)
- <button>普通按钮</button>
- <button type="primary">主色调按钮</button>
- <button type="warn">警告按钮</button>
- 小尺寸<button size="mini">普通按钮</button>
- 小尺寸 <button type="primary" size="mini">主色调按钮</button>
- 小尺寸<button type="warn" size="mini">警告按钮</button>
- 小尺寸镂空<button size="mini">普通按钮</button>
- 小尺寸 镂空<button type="primary" size="mini">主色调按钮</button>
- 小尺寸镂空<button type="warn" size="mini">警告按钮</button>
- Image
- 图片组件
- Image组件默认宽度约300px,高度约240px
Mode值 | 说明 |
ScaleToFill | (默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素 |
aspectfit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也即是说,图片通常只能在水平或垂直方向是完整地,另一个方向将会发生截取 |
widthfix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
heighfix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |
- Navigator
- 页面导航组件
- 类似于HTML中的a链接
- API
- API分类
- 事件监听API
- 特点:以on开头,用来监听某些事件地触发
- 举例:wx.onWindowRessize(function callback)监听窗口尺寸变化的事件
- 同步API
- 特点一:以Sync结尾的API是同步API
- 特点二:同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
- 举例:微信。setStorageSync(‘key’,’value’)向本地储存中写入内容
- 异步API
- 特点:类似于jQury中$.ajax(options)函数,需要通过success,fail,complete接收调用结果
- 举例:微信.request()发起网络数据请求,通过success回调函数接收数据
十、不同项目成员对应的权限
权限 | 运营者 | 开发者 | 数据分析者 |
开发者权限 | √ | ||
体验者权限 | √ | √ | √ |
登录 | √ | √ | √ |
数据分析 | √ | ||
微信支付 | √ | ||
推广 | √ | ||
开发管理 | √ | ||
开发设置 | √ | ||
暂停服务 | √ | ||
解除关联公众号 | √ | ||
腾讯云管理 | √ | ||
小程序插件 | √ | ||
游戏运营管理 | √ |
- 开发者权限:可使用小程序开发者工具及对小程序的功能进行代码开发
- 体验者权限:可使用体验版小程序
- 登录权限:可登录小程序管理后台,无需管理员确认
- 开发设置:设置小程序服务器域名,消息推送及扫描普通链接二维码打开小程序
- 腾讯云管理:云开发相关设置
- 数据绑定
- 数据绑定的基本原则
- 在data中定义数据
Page({
Data: {
//字符串类型的数据
Info: ‘init data’,
// 数组类型的数据
MsgList: [{msg: ‘hello’},{msg: ‘world’}]
}
})
- 在wxml中使用数据
在data中的数据绑定 到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。语法格式为:
<view>{{ 要绑定的数据名称 }}</view>
- 代码
.js[ data: {
info: 'hello mia',
imgSrc: 'http://www.itheima.com/images/logo.png',
randomNum: Math.random()/*生成0-1的随机小数*/.toFixed(2)/*保留小数点后两位*/*10
},
.wxml[ <view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>
<view>随机数:{{randomNum}}</view>
<view>随机数的一百倍:{{randomNum * 100}}</view>
<view>{{ randomNum >=5 ? '随机数字大于或等于五' : '随机数字小于五' }}</view>
- 事件绑定
- 什么是事件
类型 | 绑定方式 | 事件描述 |
Tap | bindtap或bind:tap | 手指触摸后马上离开,类似于HTML的click事件 |
Input | bindinput或bind:input | 文本框的输入事件 |
change | bindchange或bind:change | 状态改变时触发 |
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理
2、小程序常用的事件
属性 | 类型 | 说明 |
type | String | 事件类型 |
timestamp | Integer | 页面打开到触发事件所经过的毫秒数 |
target | object | 触发事件的组件的一些属性值集合 |
currentTarget | 当前组件的一些属性值集合 | |
Detail | 额外的信息 | |
Touches | array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | array | 触摸事件,当前变化的触摸点信息的数组 |
3、事件对象的属性列表
4、target和currentTarget的区别
Targe是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。举例如下:
<view class="outer-view" bindtap="outerHandler">
<button type="primary">按钮</button>
</view>
如上代码,点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。
此时,对于外层的view来说:
e.target指向的是触发事件的源头组件,因此,e.target是内部的按钮组件
e.currentTarget指向的是当前正在触发事件的那个组件,因此,e.currentTarget是当前的view组件
5、bindtap使用
.wxml[
//定义一个按钮,及事件处理函数
<button type="primary" bindtap="CountChange">+1</button>
]
.js-data[
定义一个变量并赋值
count:0
]
.js[
//按钮点击事件处理函数
CountChange(){
//事件触发时打印OK
console.log('OK'),
//事件触发时变量数值+1
this.setData({
count: this.data.count +1
})
},
]
6、传参格式
<button bindtap=”btnHandler” data-info=”{{2}}”>按钮</button>
Info为参数名称,2为参数
7、为data中的数据赋新值
Count:this.data.count + 1
十二、条件渲染
1、if语句
//如果count=1,则创建view显示男
<view wx:if="{{count===1}}">男</view>
//如果count=2,则创建view显示女
<view wx:elif="{{count===2}}">女</view>
//否则创建view显示保密
<view wx:else >保密</view>
2、使用block标签一次控制多个组件的展示与隐藏
<block wx:if=”{{true}}”>
<view></view>
<view></view>
<view></view>
</block>
注:控制条件复杂时推荐使用
- hidden=”{{condition}}”控制组件的显示与隐藏
<view hidden=”{{flag}}”>条件为true隐藏,条件为false显示</view>
注:频繁切换时使用
十三、列表渲染
- 数组定义
.js.data[
arr: ['苹果', '小米', '华为'],
userList: [
{id:1,name:'小红'},
{id:2,name:'小黄'},
{id:3,name:'小白'},
]
]
- wx:for
<view wx:for="{{arr}}">
索引是:{{index}},item是:{{item}}
</view>
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
十四、wxss
1、屏幕总宽:750rpx
2、样式导入格式:
@import "/common/common.wxss";
- 内边距属性:padding 就是内边距,就是说控制上下左右的边距,让界面感觉没有那么拥挤。
- 外边距属性:margin
- 全局样式与局部样式
- 全局样式:app.wxss
- 局部样式:具体页面.wxss
十五、全局配置
1、了解window节点常用的配置项
属性名 | 类型 | 默认值 | 说明 |
navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持black/white |
backgroundColor | HexColor | #ffffff | 窗口的背景颜色 |
backgroundTextStyle | String | dark | 下拉loading的样式,仅支持dark/light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottonDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px |
2、TabBar节点属性
属性 | 类型 | 必填 | 默认值 | 描述 |
position | String | 否 | bottom | TabBar的位置,仅支持bottom/top |
borderStyle | String | 否 | black | TabBar上边框的颜色,仅支black/white |
color | HexColor | 否 | Tap上文字的默认(未选中)颜色 | |
selectedColor | HexColor | 否 | Tap上文字的默认选中的颜色 | |
backgroundColor | HexColor | 否 | TabBar的背景色 | |
list | Array | 是 | Tab页签的列表(最少两个 ,最多五个) |
3、每个tab项的属性
属性 | 类型 | 必填 | 描述 |
pagepath | String | 是 | 页面路径,页面必须在pages中预先定义 |
text | String | 是 | Tab上显示的文件 |
iconpath | String | 否 | 未选中时的图标路径;当position为top时,不显示icon |
selectedconpath | String | 否 | 选中时的图标路径;当position为top时,不显示icon |
- 警告关闭:
Project.config.json->setting->增加”checkSiteMap”:false
十六、导航
1、声明式导航
导航到tap页面
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
导航非tap页面
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
回退
<navigator open-type="navigateBack" delta="1">后退</navigator>
- 编程式导航
跳转到tap页面
<button bindtap="gotoMessage">跳转到message页面</button>
gotoMessage(){
wx:wx.switchTab({
url: '/pages/message/message'
})
},
跳转到非tap页面
<button bindtap="gotoInfo">跳转到Info页面</button
gotoInfo(){
wx:wx.navigateTo({
url: '/pages/info/info'
})
},
后退
<button bindtap="gotoback">后退</button>
gotoback(){
wx.navigateBack({
delta: 1,
})
},
- 传参
- 参数与路径之间用?隔开
- 参数健与参数值用=相连
- 不同参数用&分隔
- 声明式传参
<navigator url="/pages/info/info?name=张三&age=20">跳转到info页面</navigator>
- 编程式传参
- loading效果
- 展示
wx.showLoading({
title: '数据加载中...',
})
- 隐藏
complete:()=>{
wx.hideLoading()
this.setData({
isloading:false
})
}
})