【黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)】 https://www.bilibili.com/video/BV1834y1676P/?p=26&share_source=copy_web&vd_source=03c1dc52eeb3747825ecad0412c18ab1
WXSS 模板样式
1. 什么是 WXSS
WXSS (WeiXin Style Sheets)是一套样式语言,用于美化 WXML 的组件样式,类似于网页开发中的 CSS。
2. WXSS 和 CSS 的关系
WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。
与 CSS 相比,WXSS 扩展的特性有:
- rpx 尺寸单位
- @import 样式导入
rpx
1. 什么是 rpx 尺寸单位
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
2. rpx 的实现原理
rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕,
在宽度上等分为 750 份(即:当前屏幕的总宽度为 750rpx)。
- 在较小的设备上,1rpx 所代表的宽度较小
- 在较大的设备上,1rpx 所代表的宽度较大
小程序在不同设备上运行的时候,会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。
3. rpx 与 px 之间的单位换算(以iphone6为例)
在 iPhone6 上,屏幕宽度为375px,共有 750 个物理像素,等分为 750rpx。则:
750rpx = 375px = 750 物理像素
1rpx = 0.5px = 1物理像素
就是 宽度px = 750rpx,然后换算。
官方建议:开发微信小程序时,设计师可以用 iPhone6 作为视觉稿的标准。
开发举例:在 iPhone6 上如果要绘制宽100px,高20px的盒子,换算成rpx单位,宽高分别为 200rpx 和 40rpx
样式导入
1. 什么是样式导入
使用 WXSS 提供的 @import 语法,可以导入外联的样式表。
2. @import 的语法格式
@import 后跟需要导入的外联样式表的相对路径,用 ; 表示语句结束。
注意这个路径是从根目录开始的
/*wxss*/
@import "/路径";
全局样式和局部样式
1. 全局样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面
2. 局部样式
在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。
注意:
① 当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
② 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式
全局配置
1. 全局配置文件及常用的配置项
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:
① pages
- 记录当前小程序所有页面的存放路径
② window - 全局设置小程序窗口的外观
③ tabBar - 设置小程序底部的 tabBar 效果
④ style - 是否启用新版的组件样式
2.window
小程序窗口的组成部分
navigationBar 导航栏区域
background 背景区域 默认不可见,下拉才显示
body 页面的主题区域 用来显示wxml的布局
了解 window 节点常用的配置项
- navigationBarTitleText 导航栏标题文字内容
- navigationBarBackgroundColor 导航栏背景颜色
- navigationBarTextStyle 导航栏标题颜色,仅支持 black / white
- backgroundColor #ffffff 窗口的背景色
- backgroundTextStyle 下拉loading的样式,仅支持 dark / light
- enablePullDownRefresh false 是否全局开启下拉刷新
- onReachBottomDistance 50 页面上拉触底事件触发时距页面底部距离,单位为px
//app.json
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
设置导航栏的标题
设置步骤:app.json -> window -> navigationBarTitleText
设置导航栏的背景色
app.json -> window -> navigationBarBackgroundColor
设置导航栏的标题颜色
设置步骤:app.json -> window -> navigationBarTextStyle
全局开启下拉刷新功能
概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
设置步骤:app.json -> window -> 把 enablePullDownRefresh 的值设置为 true
设置下拉刷新时窗口的背景色
当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为:app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。
设置下拉刷新时 loading 的样式
当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果,设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值。
设置上拉触底的距离
概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。设置步骤: app.json -> window -> 为 onReachBottomDistance 设置新的数值
注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可
举个例子,网上购物,有那种滚动条,滚动条快到底的时候就会自动加载,这个距离就是上拉触底的距离
//app.json
"window":{
"enablePullDownRefresh": true,
"backgroundTextStyle":"dark",
"backgroundColor": "#efefef",
"navigationBarBackgroundColor": "#bce672",
"navigationBarTitleText": "时光",
"navigationBarTextStyle":"white",
"onReachBottomDistance":50
},
tabBar
1. 什么是 tabBar
tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:
- 底部 tabBar
- 顶部 tabBar
注意:
- tabBar中只能配置最少 2 个、最多 5 个 tab 页签
- 当渲染顶部 tabBar 时,不显示 icon,只显示文本
2. tabBar 的 6 个组成部分
① backgroundColor:tabBar 的背景色
② selectedIconPath:选中时的图片路径
③ borderStyle:tabBar 上边框的颜色
④ iconPath:未选中时的图片路径
⑤ selectedColor:tab 上的文字选中时的颜色
⑥ color:tab 上文字的默认(未选中)颜色
3. tabBar 节点的配置项
必填:
- list 是tab页签的列表
Array类型 里面最少2个、最多5个 tab
非必填
- position tabBar 的位置
仅支持 bottom/top 默认bottom - borderStyle tabBar上边框的颜色
仅支持 black/white - color
tab上文字的默认(未选中)颜色 - selectedColor
tab 上的文字选中时的颜色 - backgroundColor
tabBar 的背景色
4. 每个 tab 项的配置选项
必填:
- pagePath
页面路径,页面必须在 pages 中预先定义 - text
是 tab 上显示的文字
非必填:
- iconPath 未选中时的图标路径;
当 postion 为 top 时,不显示 icon - selectedIconPath 选中时的图标路径;
当 postion 为 top 时,不显示 icon
//注意路径不能以斜杠开头
//app.json
"tabBar": {
"list":[
{"pagePath":"pages/index/index",
"text": "首页"},
{"pagePath": "pages/list/list",
"text": "list"
}
]
},
- 案例:配置 tabBar
获得图片资源
https://pan.baidu.com/s/1crZTQdIZ7OSDkZIpIWkhYw&pwd=1234
这个是黑马的课程资源。图片在 day2-->资料.rar-->images
通过 app.json 文件的 pages 节点,快速新建 tab 页面
配置 tabBar 选项
① 打开 app.json 配置文件,和 pages、window 平级,新增 tabBar 节点
② tabBar 节点中,新增 list 数组,这个数组中存放的,是每个 tab 项的配置对象
③ 在 list 数组中,新增每一个 tab 项的配置对象。对象中包含的属性如下:
- pagePath 指定当前 tab 对应的页面路径【必填】
- text 指定当前 tab 上按钮的文字【必填】
- iconPath 指定当前 tab 未选中时候的图片路径【可选】
- selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】
//app.json
"pages":[
"pages/home/home",
"pages/message/message",
"pages/contact/contact",
"pages/list/list",
"pages/index/index",
"pages/logs/logs"
],
"tabBar": {
"list":[
{"pagePath":"pages/home/home",
"text": "首页",
"iconPath": "images/tabs/home.png",
"selectedIconPath": "images/tabs/home-active.png"
},
{"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "images/tabs/message.png",
"selectedIconPath": "images/tabs/message-active.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "images/tabs/contact.png",
"selectedIconPath": "images/tabs/contact-active.png"
}
]
},
注意,tab的这几个页面必须放到头部渲染,不然不显示TabBar
页面配置
1. 页面配置文件的作用
小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置。
2. 页面配置和全局配置的关系
小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的 .json 配置文件”就可以实现这种需求。
注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。
3. 页面配置中常用的配置项
和全局配置的一样
网络数据请求
1. 小程序中网络数据请求的限制
出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下
两个限制:
① 只能请求 HTTPS 类型的接口
② 必须将接口的域名添加到信任列表中
需要先在你的域名服务器的根目录下 放置小程序的认证文件,然后才能配置
微信开发者工具-> 详情 ->项目配置 ->request 合法域名
2. 配置 request 合法域名
需求描述:假设在自己的微信小程序中,希望请求 https://www.escook.cn/ 域名下的接口
配置步骤:登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名
注意事项:
① 域名只支持 https 协议
② 域名不能使用 IP 地址或 localhost
③ 域名必须经过 ICP 备案
④ 服务器域名一个月内最多可申请 5 次修改
3. 发起 GET 请求
调用微信小程序提供的 wx.request() 方法,可以发起 GET 数据请求
4. 发起 POST 请求
调用微信小程序提供的 wx.request() 方法,可以发起 POST 数据请求
//wxml
<button bindtap="getInfo">发起get请求</button>
<button bindtap="postInfo">发起post请求</button>
//js
getInfo(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/get',
method:"GET",
data:{
name:"时光",
age:21
},
success:(res)=> {
console.log(res.data)
}
})
},
postInfo(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/post',
method:"POST",
data:{
name:"时光",
age:21
},
success:(res)=> {
console.log(res)
}
})
},
5. 在页面刚加载时请求数据
在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的 onl oad 事件中调用获取数据的函数
/**js
* 生命周期函数--监听页面加载
*/
onl oad(options) {
this.函数名
},
6. 跳过 request 合法域名校验
如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https协议的接口。
此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时
开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项,
跳过 request 合法域名的校验。
注意:跳过 request 合法域名校验的选项,仅限在开发与调试阶段使用!部署和上线就不能用了
微信开发者工具 - 详情 - 本地设置 - 不校验合法域名、web-view,TLS版本以及Https证书
7. 关于跨域和 Ajax 的说明
跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起 Ajax 请求”,而是叫做“发起网络数据请求”。
案例-生活本地的首页布局
要是不使用接口的话可以直接在js的对象数组里放数据,然后调用
//wxml
<swiper indicator-dots="true" autoplay="true" circular="true"
class="HomeSwiper">
<swiper-item wx:for="{{swiperList}}" wx:for-key="id">
<image src="{{item.image}}" mode="scaleToFill"/>
</swiper-item>
</swiper>
<view class="Homecategories">
<view class="HomeCitem" wx:for="{{categoriesList}}" wx:for-key="id">
<image src="{{item.icon}}" mode=""/>
<text>{{item.name}}</text>
</view>
</view>
<view class="HomeImgBox">
<image src="/images/link-01.png" mode="widthFix"/>
<image src="/images/link-02.png" mode="widthFix"/>
</view>
//wxss
.HomeSwiper{
height: 350rpx;
}
.HomeSwiper image{
width: 100%;
}
.Homecategories{
display: flex;
flex-wrap: wrap;
border-left: 1px solid #efefef;
border-top: 1px solid #efefef;
}
.HomeCitem{
width: 33.3%;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
box-sizing: border-box;
}
.HomeCitem image{
width: 60rpx;
height: 60rpx;
}
.HomeCitem text{
font-size: 24rpx;
margin-top: 10rpx;
}
.HomeImgBox{
padding: 20rpx 10rpx;
display: flex;
justify-content: space-around;
}
.HomeImgBox image{
width: 45%;
}
//js
data: {
swiperList:[],
categoriesList:[],
},
// 获取轮播图
getSwiperList(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/slides',
method:"GET",
success:(res)=>{
this.setData({
swiperList: res.data
})
}
})
},
// 获取九宫格
getCategories(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/categories',
method:"GET",
success:(res)=>{
this.setData({
categoriesList: res.data
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onl oad(options) {
this.getSwiperList()
this.getCategories()
},
标签:tab,样式,微信,app,json,tabBar,WXSS,模板,页面
From: https://www.cnblogs.com/tiangong/p/17442306.html