小程序(轮播图,创建一个小程序项目)_微信小程序轮播开服务器-优快云博客

小程序(https://mp.weixin.qq.com/)
能够知道如何创建小程序项目
能够知道清楚小程序的基本组成结构
能够知道小程序页面由几部分组成
能够知道小程序中常见的常见的组件如何使用
能够知道小程序如何进行协同开发和发布

小程序简介

1.小程序与普通网页开发的区别

1.运行环境的不同
网页运行在浏览器环境中
小程序进行在微信环境中

2.API不同
由于运行环境的不同所有小程序无法调用DOM和BOM的API
小程序可以用微信环境提供的各种API
例如:地理定位扫码支付

3.开发模式不同
网页的开发模式:浏览器+代码编辑器
小程序的开发模式:申请小程序开发账号安装小程序开发工具创建和配置小程序项目

2.体验小程序

使用比较多的组件和接口

第一个小程序注册小程序开发账号

1.点击注册按钮

使用浏览器打开https://mp.weixin.qq.com/网址,右上角立即注册

2.选择注册账号的类型

订阅号小程序服务号企业微信

3.填写账号信息

邮箱:2601405366@qq.com

密码:ok8681152

邮箱打开点击链接

4.获取小程序的AppID

AppID(小程序ID) wxa5ccff4dc11a4552

第一个小程序安装开发中工具

1.了解微信开发者工具

微信开发者工具是官方推荐使用的小程序开发工具提供的主要给功能
快速创建小程序项目
代码的查看和编辑
对小程序功能进行调试
小程序的预览和发布

2.下载

推荐下载和安装最稳定的版本的微信开发中工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

3.安装

4.扫码登录

小程序代码的构成 - 项目结构

1.了解项目的基本组成结构

pages用来存放所有小程序的页面*
utils用来存放工具工具性质的模块
app.js小程序项目的入口文件*
app.json小程序项目的全局配置文件*
app.wxss小程序项目的全局样式文件
project.config.json项目的配置文件
sitemap.json用来配置小程序及其页面是否允许被微信索引

2.小程序页面的组成部分

小程序官方建议所有小程序的页面,都存放在pages目录中,以单独的文件夹存在

有两个子目录 index文件夹 logs文件夹

每个页面由4个基本文件组成,它们分别是
.js文件(页面的脚本文件存放页面的数据事件处理函数)
.json文件(当页面的配置文件,配置窗口的外观、表现等)
.wxml文件(页面的模板结构文件)

小程序代码的构成-JSON配置文件

1.JSON配置文件的作用

JSON是一种数据格式,在实际开发中,JSON总是配置文件的形式出现。
小程序项目中也不例外:通过不同的.json配置文件,可以对小程序项目进行不同级别的配置

小程序项目中有4种json配置文件分别是

1项目根目录中的app.json配置文件

2项目根目录中的project.config.json配置文件

3项目根目录中的sitemap.json配置文件

4每个页面文件夹中的.json配置文件

2.app.json文件

app.json是当前小程序的全局配置、包括了小程序的所有页面路径、窗口外观、底部tab等。
Demo项目里边的app.json配置内容如下:

{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",//最新版本
"sitemapLocation": "sitemap.json"
}

1 pages:用来记录当前小程序的所有页面的路径

2 window:全局定义小程序所有页面的背景色、文字颜色

3 style:全局定义小程序组件所使用的样式版本

4 sitemapLocation：用来指明sitemap.json的位置

3.project.config.json文件

project.config.json是项目配置文件, 用来记录我们对小程序开发工具所做的个性化配置

setting中保存了编译相关的配置

projectname中保存的是项目名称

appid中保存的是小程序的账号ID

4.sitemap.json文件

微信现已开发小程序内搜索效果类似于PC网页的SEO
sitemap.json文件用来配置小程序页面是否允许微信索引

当开发中允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引，
当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示搜索结果中

sitemap.json文件下rules数组就是指索引规则

注意:sitemap的索引提示是默认开启的,如需要关闭sitemap的索引提示,可在小程序项目配置文件
project.config.json的setting中配置字段checkSiteMap为false

5.页面的.json配置文件

小程序中的每一个页面,可以使用.json文件来对本页面窗口外观进行配置,页面中的配置项会覆盖
app.json的window中相同的配置项。

app.json下的window节点 "navigationBarBackgroundColor": "#00b26a"

index.json下"navigationBarBackgroundColor": "#00b26a" 可以覆盖app.json

全局与页面的配置冲突会选择页面

6.新建小程序页面

只需要在app.json -> pages 中新增页面的存放路径,
小程序开发中工具即可帮我们自动创建对应的页面文件

"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/list/list"
],

创建新的页面 list文件

7.修改项目首页

只需要调整app.json -> pages数组中页面路径的前后顺序,即可修改项目的首页。
小程序会把在第一位的页面,当作项目首页进行渲染,

"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/list/list"
],

谁第一行谁就说首页

小程序代码的构成 - WXML模板

1.什么是WXML

WXML(weixin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构
其作用类似于网页开发中的HTML

2.WXML和HTML的区别

1 标签名称不同
HTML(div,span,img,a)
WXML(view,text,image,navigator)

2 属性节点不同
<a href="#">超链接</a>
<navigator url="/pages/home"></navigator>

3 提供了类似于Vue中的模板语法
   数据绑定
   列表渲染
   条件渲染

小程序代码的构成 - WXSS样式

1.什么是WXSS

WXSS(weixin Style Sheets)是一套样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS

2.WXSS和CSS的区别

1 新增了rpx尺寸单位
CSS中需要手动进行像素单位换算例如rem
WXSS在底侧支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算

2 提供了全局的样式和局部样式
   项目根目录中的app.wxss会作用于所有小程序页面
   局部页面的.wxss样式仅对当前页面生效
3 WXSS仅支持部分CSS选择器
   .class和#id
   element
   并集选择器后代选择器
   ::after和::before等伪类选择器

小程序代码的构成 - JS逻辑交互

1.小程序中的.js文件

一个项目仅仅提供界面展示是不够的,在小程序中我们通过.js文件来处理用户的操作。
例如响应用户的点击、获取用户的位置等等。

2.小程序中的JS文字分为三大类,分别是:

1 app.js
   是整个小程序项目的入口文件,通过调用App()函数来启动整个小程序
2 页面的.js文件
   是页面的入口文件,通过调用Page()函数来创建并允许页面
3 普通的.js文件
   是普通的功能模块文件,用来封装公共的函数或属性供页面使用

小程序的宿主环境 - 宿主环境简介

1.什么是宿主环境

宿主环境指的是程序运行所必须的依赖环境。
Android系统和iOS系统是两个不同的宿主环境。安卓版的微信App是不能在iOS环境下运行的
所有Android是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的

2.小程序的宿主环境

手机环境是小程序的宿主环境

小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能
例如微信扫码微信支付微信登录地理定位 etc

3.小程序宿主环境包含的内容

1 通信模型 2运行机制 3组件 4API

小程序宿主环境 - 通信模型

3.1通信的主体

小程序中通信的主体是渲染层和逻辑层, 其中

1 WXML模板和WXSS样式工作在渲染层

2 JS脚本工作在逻辑层

3.2小程序的通信模型

小程序中的通信模型分为两部分

渲染层和逻辑层之间的通信
由微信客户端进行转发

逻辑层和第三方服务器之间的通信
由微信客户端进行转发

小程序的宿主环境 - 运行机制

5.小程序启动的过程

1 把小程序的代码包下载到本地

2 解析app.json全局配置文件

3 执行app.js小程序入口文件,调用App()创建小程序实例

4 渲染小程序首页

5 小程序启动完成

6.页面渲染的过程

1 加载解析页面的.json配置文件

2 加载页面的.wxml模板和.wxss样式

3 执行页面的.js文件,调用Page()创建页面实例

4 页面渲染完成

小程序的宿主环境 - 组件

1.小程序中组件的分类

小程序中的组件也是由宿主环境提供的,开发中可以基于组件快速搭建出漂亮的页面结构.
小程序的组件分为9大类

视图容器基础内容表单组件导航组件*

媒体组件 map地图组件 canvas画布组件开放能力无障碍访问

2.常用的视图容器类组件

view
   普通视图区域
   类似于HTML中的div 是一个块级元素
   常用来实现页面的布局效果
scroll-view
   可滚动的视图区域
   常用来实现滚动列表效果
swiper和swiper-item
   轮播图容器组件和轮播图item组件

3.view组件的基本使用

4.scroll-view的基本使用

<scroll-view class="container1" scroll-y>
<view>A</view>
<view>b</view>
<view>c</view>
</scroll-view>

.container1 {
border: 1px solid red;
width: 100px;
height: 120px;
}

5.swiper和swiper-item组件的基本使用

<swiper class="swiper-container">

<swiper-item>
<view class="item">A</view>
</swiper-item>

<swiper-item>
<view class="item">B</view>
</swiper-item>

<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>

样式：
/* pages/list/list.wxss */
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: green;
}
swiper-item:nth-child(2) .item{
background-color: red;
}
swiper-item:nth-child(3) .item{
background-color: gold;
}

6.swiper组件的常用属性

属性           类型       默认值       说明
indicator-dots       boolean       flase       是否显示面板指示点
indicator-color       color       rgba(0,0,0,.3)   指示点颜色
indicator-active-color   color       #000000       当前选中的指示点颜色
autoplay       boolean       false       是否自动切换
interval       number       5000       自动切换时间间隔
circular       boolean       false       是否采用衔接滑动

7.常用的基础内容组件

1 text
   文本组件
   类似于HTML中的span标签,是一个行内元素
2 rich-text
   富文本组件
   支持把HTML字符串渲染为WXML结构

8.text组件的基本使用

通过text组件的selectable属性,实现选择文本内容的效果

view
<text selectable>xxxxxxx<text
view

9.rich-text组件的基本使用

通过rich-text组件的nodes属性节点,把HTML字符渲染为对应的UI结构

<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

10.其他常用组件

1 button
   按钮组建
   功能比HTML中的button按钮丰富
   通过poen-type熟悉可以调用微信提供的各种功能(客服转发获取用户授权获取用户信息)
2 image
   图片组件
   image组件默认宽度约300px 高度约240px
3 naviator
   页面导航组件
   类似于HTML中的a链接

11.button按钮的基本使用
通过type属性指定按钮颜色类型
<button> 普通按钮</button>
<button type="primary"> 主色调按钮</button>
<button type="warn"> 警告按钮</button>

size=mini 小尺寸
<button type="primary" size="mini"> 主色调按钮</button>

镂空按钮
<button type="primary" size="mini" plain> 主色调按钮</button>

12.image组件在基本使用

image组件在mode属性用来指定图片在裁剪肯缩放模式
常用在mode属性值如下:

mode值       说明
modeeToFill   缩放模式不保持纵横比缩放图片使图片在宽高完全拉伸至填满image元素
aspectFit       缩放模式保持纵横比缩放图片使图片的长边能完全显示出来可以完整显示图片
aspectFill       缩放模式保持纵横比缩放图片使图片的短边能完全显示出来
       图片通常在水平或垂直方向是完整的另一个方向将会发生截取
widthFix       缩放模式宽带不变高度自动变化   保持原图宽高比不变
heightFix       缩放模式高度不变宽度自动变化保持原图宽高比不变

小程序的宿主环境 - API

1.小程序API概述

小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力
例如:获取用户信息本地存储支付功能

2.小程序API的3大分类

1事件监听API
   特点:以on开头用来监听某些事件的触发
   举例:wx.onWindowResize监听窗口尺寸变化的事件
2 同步API
   特点1 以Sync结尾的API都是同步API
   特点2 同步API的执行结果可以通过函数返回值直接获取如果执行出错会抛出异常
   举例:wx.setStorageSync('key','value)向本地存储中写入内容
3 异步API
   特点:类似于jQuery中的$.ajax(option)函数,需要通过success、fail、comlete接收调用的结果
   举例:wx.request()发起网络数据请求,通过success回调函数接收数据

协同工作和发布 - 协同工作

1.了解权限管理需求

同一个小程序项目一般会有不同岗位不同角色的员工同时参与设计与开发

此时出于管理需要,我们迫切需要对不同岗位不同角色的员工的权限进行边界的划分

2.了解项目成员的组织结构

           项目管理者
       产品   设计   开发   测试
       提需求   设计方案   代码开发   项目测试

小程序 - 模板与配置
能够使用WXML模板语法渲染页面结构
能够使用WXSS样式美化页面结构
能够使用app.json对小程序进行全局配置
能够使用page.json对小程序页面进行个性化配置
能够使用如何发起网络数据请求

WXML模板语法 - 数据绑定

1.数据绑定的基本原则

1 在data中定义数据

2 在WXML中使用数据

2.在data中定义页面的数据

在页面对应的.js文件中,把数据定义到data对象中即可:

Page({
   data:{
   字符串类型的数据
   info:'init data',
   数组类型的数据
   msgList:[{msg:'hello'},{msg:'world'}]
}
})

3.Mustache语法的格式

在data中的数据绑定到页面中渲染,使用Mustache语法将变量包起来即可

<view>{{ 要绑定的数据名称 }}</view>

4.Mustache语法的应用场景

Mustache语法的主要应用场景如下

绑定内容

绑定属性

运算

5.动态绑定内容

页面的数据如下:
Page({
data:{
info:'hello world'
}
})

页面结构如下:

6.动态绑定属性

页面的数据如下

Page({
data:{
imgSrc:'http://www.itheima.com/images/logo.png'
}
})

7.三元运算

页面的数据如下:

Page({
data:{
randomNum:Math.random() * 10 //生成10以内的随机数
}
})

页面的结构如下:

<view>{{ randomNumber >= 5 > '随机数字大于等于5' : '随机数字小于5' }}</view>

8.算数运算

页面的数据如下:
Page({
data:{
randomNum:Math.random().toFixed(2) 随机生成一个带两位小数的随机数如0.34
}
})

<view>生成100以内的随机数:{{ randomNumber * 100 }}</view>

WXML模板语法 - 事件绑定

1.什么是事件

事件是渲染层到逻辑层的通讯方式。
通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理

页面产生的行为 ->微信客户端 ->JS
渲染层逻辑层

2.小程序中常用的事件

类型       绑定方式       事件描述
tap       bindtap或bind:tap   手指触摸后马上离开类似于HTML中的click事件
input       bindinput或bind:input   文本框的输入事件
change       bindchange或bind:change   状态改变时触发

3.事件对象的属性列表

当事件回调触发的时候会受到一个事件对象event 它的详细属性如下表

属性       类型       说明
type       String       事件类型
timeStamp   integer       页面打开到触发事件所经过的毫秒数
target       Object       触发事件的组件的一些属性值集合**
currentTarget   Object       当前组件的一些属性值集合
detail       Object       额外的信息**
touches       Array       触摸事件,当前停留在屏幕中的触摸点信息的数组
changeTouches   Array       触摸事件,当前变化的触摸点信息的数组

4.target和currentTarget的区别

target是触发该事件的源头组件而currentTarget则是当前事件所绑定的组件

点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发view和tap事件处理函数
此时,对于外层的view来说
e.target指向的是触发事件的源头组件,因此,e.target是内部的按钮组件
e.currentTarget指向的是当前正在触发事件的那个组件,因此,e.currentTarget是当前的view组件

5.bindtap的语法格式

在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为

1 通过bindtap 可以为组件绑定tap触摸事件

2 在页面的.js文件中定义对于的事件处理函数事件参数通过形参event(一般简写成e)来接收

Page({
btnTapHandler(e){ //按钮的tap事件处理函数
console.log(e) //事件参数对象e
}
})

6. 在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法,可以给页面data中的数据重新赋值

Page({
data:{
count:0
},
CountChange(){
this.setData({
count:this.data.count +1
})
}
})

7. 事件传参

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。

因为小程序会把bindtap的属性值,统一当作事件名称来处理,
相对于要调用一个名称为btnHandle(123)的事件处理函数

最终:
info会被解析为参数的名字
数组2会被解析为参数的值

在事件处理函数中,通过event.target.dataset.参数名即可获取到具体参数的值

btnHandler(event){
//dataset是一个对象包含了所有通过 data-*传递过来的参数项
console.log(event.target.dataset)
//通过dataset可以访问到具体参数的值
console.log(event.target.dataset.info)
}

8. bindinput的语法格式

在小程序中,通过input事件来响应文本框的输入事件,语法格式如下：

1 通过bindinput,可以为文本框绑定输入事件：

2 在页面的.js文件中定义事件处理函数

inputHandler(e){
//e.detail.value是变化过后,文本框最新的值
console.log(e.detail.value)
}

9. 文本框和data之间数据同步

实现步骤

1 定义数据
2 渲染结构
3 美化样式
4 绑定input事件处理函数

定义数据

Page({
data:{
msg:'你好'
}
})

渲染结构
<input value="{{msg}}" bindinput="iptHandler"></input>

美化样式

input{
border: 1px solid #eee
padding:5px;
margin:5px;
border-radius:3px;
}

iptHandler(e){
this.setData({
//通过e.detail.value获取到文本框最新的值
msg:e.detail.value
})
}

WXML 模板语法 - 条件渲染

1.wx:if

在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块

也可以用wx:elif和wx:else来添加else判断

2.结合<block>使用wx:if

如果要一次性控制多个组件的展示与隐藏,可以使用一个<block></block>标签将多个组件包装起来
并在<block>标签上使用wx:if控制属性

注意: <block>并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染

3.hidden

在小程序中,直接使用hidden="{{condition}}"也能控制元素的显示与隐藏

<view hidden="{{ condition }}"> 条件为true 隐藏条件为false 显示 </view>

4.wx:if与hidden的对比

1 运行方式不同

wx:if以动态创建和移除元素的方式
hidden以切换样式的方式(display:none/block;)控制元素的显示与隐藏

2.使用建议
频繁切换时建议使用hidden
控制条件复杂时建议使用wx:if搭配wx:elif wx:else进行展示与隐藏的切换

WXML 模板语法 - 列表渲染

1.wx:for

通过wx:for可以根据指定的数组循环渲染重复的组件结构

<view wx:for="{{array}}">
索引是：{{index}} 当前项是：{{item}}
</view>

默认情况下当前循环项的索引用index表示当前循环项用item

2.手动指定索引和当前项的变量名*

使用wx:for-index可以指定当前循环项的索引的变量名
使用wx:for-item可以指定当前项的变量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
索引是:{{idx}} 当前项是:{{itemName}}
</view>

3.wx:key的使用

类似于Vue列表渲染中的:key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值
从而提高渲染的效率

Page({
data:{
userList:[
   {id:1 name:xxx}
   {id:2 name:xxx}
   {id:3 name:xxx}
   ]
}
})

WXSS模板样式

1.什么是WXSS

WXSS是一套样式语言,用于美化WXML的组件样式,，类似于网页开发中的CSS

2.WXSS和CSS的关系

WXSS具有CSS大部分特性,同时,WXSS还对CSS进行了扩充以及修改,适应小程序的开发
与CSS相比,WXSS扩展的特性有:
rpx尺寸单位
@import样式导入

WXSS模板样式 - rpx

1.什么是rpx尺寸单位

rpx是小程序独有的,用来解决屏适配的尺寸单位

2.rpx的实现原理
rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配
rpx把所有设备的屏幕在宽度上等分为750份(即当前屏幕的总宽度为759rpx)

在较小的设备上,1rpx所代表的宽度较小
在较大的设备上,1rpx所代表的宽度较大

小程序在不同设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配

3.rpx与px之间的单位换算*

在苹果6上,屏幕宽度为375px 共有750物理像素等分为750rpx

750rpx=375px=750物理像素
1rpx = 0.5px = 1物理像素

官方建议:开发微信小程序时,设计师可以用苹果6作为视觉稿的标准
开发举例:在苹果6上如果要绘制宽100px 高20px的盒子换算成rpx单位宽高分别为200rpx和40rpx

WXSS 模板样式 - 样式导入

1. 什么是样式导入

使用WXSS提供的@import语法可以导入外联的样式表

2. @import的语法格式

@import后跟需要导入的外联样式表的相对路径,用；表示结束

@import "文件名";

WXSS 模板样式 - 全局样式和局部样式

1.全局样式

定义在app.wxss中的样式为全局样式,作用于每一个页面

2.局部样式

在页面的.wxss文件中定义的样式为局部样式

注意:
1 当前局部样式和全局样式冲突时,根据就近原则局部样式会覆盖全局样式

2 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式

全局配置

1.全局配置文件及常用的配置项

小程序根目录的app.json文件是小程序的全局配置文件。
1 pages
记录当前小程序所有页面的存放路径
2 window
全局设置小程序窗口的外观
3 tabBar
设置小程序底部的tabBar效果
4 style
是否启用新版的组件样式

全局配置 - window

1.小程序窗口的组成部分

导航栏

背景区

主体内容

2.了解window节点常用的配置项

属性名               类型       默认值   说明
navigationBarTitleText       String     字符串   导航栏标题文字内容
navigationBarBackgroundColor   HexColor   #000000   导航栏背景色
navigationBarTextStyle       String       white   导航栏标题颜色仅支持black/white
backgroundColor           HexColor   #fffff   窗口的背景色
backgroundCTextStyle       String       dark   下拉loading的样式仅支持dark/light
enablePullDownRefresh       Boolean       false   是否全局开启下拉刷新
onReachBottomDistance       Number       50   页面上拉触底事件触发时距页面底部距离单位为px

3.设置导航栏的标题

设置步骤:app.json->window->navigationBarTitleText

需求:把导航栏上的标题内容修改

4.设置导航栏的背景色

设置步骤:app.json->window->navigationBarBackgroundColor

需求:把导航栏标题的背景色从默认修改成#2b4b6b

5.设置导航栏的标题颜色

设置步骤:app.json->winodow->navigationBarTextStyle

需求:把导航条上的标题从默认的black修改为white

注意:
navigationBarTextStyle的可选值仅支持black/white

6.全局开启下拉刷新功能

概念:下拉刷新是移动端的专有名词
指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为

设置步骤:app.json->winodow->把enablePullDownRefresh的值设置为true

注意:
在app.json中启用下拉刷新功能,会作用于每个小程序页面

7.设置下拉刷新时窗口的背景色

当全局开启下拉刷新功能之后,默认的窗口背景为白色如果自定义下拉刷新窗口背景色
设置步骤:app.json->winodow->为background指定16进制的颜色值#efefef

8.设置下拉刷新时loading的样式

当全局开启下拉刷新新功能之后,默认窗口的loading样式为白色
如果要更改loading样式的效果,设置步骤为app.json->winodow->为backgroundCTextStyle指定dark值

注意:
backgroundCTextStyle的可选值只有light和dark

9.设置上拉触底的距离

概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为

设置步骤为app.json->winodow->为onReachBottomDistance设置新的数值

注意: 默认距离为50px 如果没有特殊需求,建议使用默认值即可

全局配置 - tabBar

1.什么是tabBar

tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。

底部tabBar
顶部tabBar

注意:
tabBar中只能配置最少2个最多5个tab页面签
当渲染顶部tabBar时,不显示icon,只显示文本

2.tabBar的6个组成部分

1 backgroundColor:tabBar的背景色

2 selectedlconPath:选中时的图片路径

3 borderStyle:tabBar上边框的颜色

4 iconPath:未选中的图片路径

5 seletedColor:tab上的文字选中时的颜色

6 color:tab上的文字默认(未选中)颜色

3.tabBar节点的配置项

属性       类型       必填   默认值       描述
position   String       否   bottom       tabBar的位置,仅支持bottom/top
borderStyle   String       否   black       tabBar上边框颜色,仅支持black/white
color       HexColor   否           tab上文字的默认颜色
selectedColor   HexColor   否           tab上的文字选中时的颜色
backgroundColor   HexColor   否           tabBar的背景色
list       Array       是           tab页签的列表最少2个、最多5个tab

4.每个tab项的配置选项

属性           类型       必填       描述
pagePath       String       是       页面路径,页面必须在pages中预先定义
text           String       是       tab上显示文字
iconPath       String       否       未选中时的图标路径;当position为top时,不显示icon
selectedlconPath   String       否       选中时的图标路径;当position为top时,不显示icon

"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
}，
{
"pagePath": "pages/logs/logs",
"text": "其他"
}
]
}

案例配置tabBar

"pages":[
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],

"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "图标",
"selectedIconPath": "图标"
}]
},

页面配置

1.页面配置文件的作用

小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观、页面效果等进行配置。

2.页面配置和全局配置的关系

小程序中，app.json中的window节点,可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现,此时,"页面级别的.json配置文件"就可以实现这种需求

注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为原则

3.页面配置中常用的配置项

属性名               类型       默认值   说明
navigationBarBackgroundColor   HexColor   #000000   导航栏背景色
navigationBarTextStyle       String       white   导航栏标题颜色仅支持black/white
navigationBarTitleText       String     字符串   导航栏标题文字内容
backgroundColor           HexColor   #fffff   窗口的背景色
backgroundCTextStyle       String       dark   下拉loading的样式仅支持dark/light
enablePullDownRefresh       Boolean       false   是否全局开启下拉刷新
onReachBottomDistance       Number       50   页面上拉触底事件触发时距页面底部距离单位为px

网络数据请求

1.小程序中网络数据请求的限制

出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下
两个限制:
1 只能请求HTTPS类型的接口

2 必须将接口的域名添加到信任列表中

2.配置request合法域名

需求描述:假设在自己的微信小程序中,希望请求https://www.escook.cn/域名下的接口

配置步骤:登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

注意事项:
1 域名只支持https协议
2 域名不能使用IP地址或localhost
3 域名必须经过ICP备案
4 服务器域名一个月内最多可申请5此修改

3.发起GET请求

调用微信小程序提供的wx.request()方法,可以发起GET数据请求

wx.request({
url: 'https://applet-base-api-t.itheima.net',
method:'GET',
data:{
name:'zd',
age:20
},
success:(res)=>{
console.log(res.data);
}
})

4.发起POST请求