首页 > 编程语言 >微信小程序 WXSS模板样式,全局和页面配置,网络请求

微信小程序 WXSS模板样式,全局和页面配置,网络请求

时间:2023-05-30 12:33:29浏览次数:63  
标签:tab 样式 微信 app json tabBar WXSS 模板 页面

【黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含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

相关文章

  • 模板模式:一种体现多态的设计模式
    0x01:模板模式模板模式(Template),又叫模板方法模式(TemplateMethod),在一个抽象类公开定义了执行它的方法的模板。它的子类可以按需重写方法实现,但调用将以抽象类中定义的方式进行。模板方法模式:定义一个操作中的算法的骨架,而将一些步骤延迟到子类中,使得子类可以不改变一个算法的结构,......
  • 2023-05-30 前端h5页面如何实现调起微信支付功能(该回答来自chatgpt,实际效果未测试)
    前端H5页面调起微信支付功能需要结合微信JS-SDK和后端接口实现。以下是基本步骤和示例代码:1.获取微信公众号的appid和secret在微信公众平台上创建一个公众号,获取其对应的appid和secret。2.引入微信JS-SDK将微信JS-SDK的链接放入HTML文件的头部,例如:<scriptsrc="https://res.......
  • Wpf基础入门——模板和样式(Template&Style)
    本篇文章学习于:刘铁猛老师《深入浅出WPF》什么是模板?在WPF中,通过引入模板(Template)微软将数据和算法的“内容”与“形式”解耦了。WPF中的Template分为两大类:ControlTemplate是算法内容的表现形式,一个控件怎样组织其内部结构才能让它更符合业务逻辑、让用户操作起来更舒服就......
  • linux全景指南摘录-摘录至微信公众号《linux技术迷》
    Linux性能优化的全景指南Linux性能优化性能优化性能指标高并发和响应快对应着性能优化的两个核心指标:吞吐 应用负载角度:直接影响了产品终端的用户体验系统资源角度:资源使用率、饱和度等性能问题的本质就是系统资源已经到达瓶颈,但请求的处理还不够快,无法支......
  • 微信公众号开发---基础消息能力开发
    微信公众号接收普通消息1.配置开发服务器微信公众平台->开发->开发者工具->公众平台测试账号appid:是微信公众号的唯一标识,通过和appsecret进行验证。URL:开发服务器的路径,接收微信服务器发送的数据。Token:自设定的token,和开发服务器中进行验证的token保持一致。微信公众号用户,......
  • super()在 Django 模板视图中使用
    Django模板视图用于呈现HTML模板并将数据传递给它们以供显示。super()您可以在Django模板视图中使用,轻松地从父模板视图继承属性和方法,并根据需要自定义或扩展它们。Django模板视图的一种常见用法super()是在get_context_data方法中,该方法用于将数据传递给模板以进行渲染。......
  • 微信小程序使用ec-canvas在真机上预览图表模糊的解决办法
    在初始化echarts的方法中添加devicePixelRatio:dpr,代码如下:const[ec,setEc]=useState<any>({//初始化图表onInit:(canvas,width,height,dpr)=>{chart=echarts.init(canvas,null,{width,height,devicePixelRatio:dpr,})......
  • 关于模板方法设计:抽象类
       ......
  • 微信小程序 - WXML 模板语法
    【黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)】https://www.bilibili.com/video/BV1834y1676P/?p=19&share_source=copy_web&vd_source=03c1dc52eeb3747825ecad0412c18ab1真的讲的很细致WXML模板语法数据绑定1.......
  • 我是如何搭建ChatGPT并嵌入到微信公众号的?
    前言体验方式:薇辛搜索龚众号【程序员Jason】,关注并点击发消息,点菜单ChatGPT然后翻到最下面点【阅读原文】就可以了。ChatGPT对某些国家是不提供服务的,所以一般是用不了,除非是使用梯子。那我是如何让用户无需注册也可以直接使用的呢,听我一一道来。注册使用OpenAi的ChatGPT......