微信小程序 day2

1.  app.json配置文件

1.1 pages

pages 里面写入页面路径后，程序会在 pages 目录下自动生成相应的页面，第一个为首页

1.2  windows

navigationBarTextStyle：配置导航栏文字颜色，只支持 black/white。
navigationBarTitleText：配置导航栏文字内容。
backgroundColor：配置窗口颜色。
backgroundTextStyle：下拉背景字体，仅支持 dark/light。
enablePullDownRefresh：是否开启下拉刷新。

1.3 usingComponents

全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明

1.4 tabBar

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

标签最多五个最少两个，当渲染顶部 tabBar 时，不显示 icon ，只显示文本

tabBar组成部分：

backgroundColor ： tabBar 的背景色

selectedIconPath ：选中时的图片路径

borderStyle ： tabBar 上边框的颜色

iconPath ：未选中时的图片路径

selectedColor ： tab 上的文字选中时的颜色

color ： tab 上文字的默认（未选中）颜色

tabBar配置项

属性	类型	必填	描述
pagePath	String	是	页面路径，需要在pages中预先定义
text	String	是	tab上显示文字
iconPath	String	否	未选中时图标路径
selectedIconPath	String	否	选中时的图表路径

2.网络请求

只能请求 HTTPS 类型的接口，必须将接口的域名添加到信任列表中。

2.1发起请求

在很多情况下，我们需要 在页面刚加载的时候 ，自动请求一些初始化的数据。此时需要在页面的

onLoad 事件中调用获取数据的函数

// 发起网络请求
onTapGet () {
wx.request({
// 请求地址，必须是以https://开头
// 必须是配置在request合法域名
url: 'https://www.csdn.cn/api/get',
// 请求方式 GET或者POST
method: 'GET/POST',
// 请求参数
data: {
name: 'zs',
age: 22
},
// 请求成功的回调
success: (res) => {
console.log(res)
}
})

2.2 API Promise 化

API Promise 化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API ，升级改造为基于 Promise 的异步 API ，从而提高代码的可读性、维护性，避免回调地狱的问题。

在小程序中，实现 API Promise 化主要依赖于 miniprogram - api - promise 这个第三方的 npm 包。

1.安装架构
npm i --save miniprogram-api-promise

2.导入并执行（app.js）
import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)

这样我们就可以使用 async/await 简化  Promise  语法

// bindtap事件 - getInfo
async getInfo(){
  const res = await wx.p.request({
    url:'',
    method:'',
    success:(res)=>{
        
    },
    console.log(res);  // 返回一个promise对象
  })  
}

3. 页面导航

3.1 声明式导航

3.1.1 导航到tabBar页面

在使用组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性

url：跳转地址，必须以/开头

open-type：跳转方式，必须是 switchTab

<navigator url="/pages/index/index" open-type="switchTab">跳转首页
</navigator>

3.1.2 导航到非tabBar页面

需要指定 url 属性和 open-type 属性

url：跳转地址，必须以/开头

open-type：跳转方式，必须是 navigate （可以省略）

<navigator url="/pages/info/info" open-type="navigate">跳转到info页面
</navigator>

3.1.3 后退导航

如果要回退到上一级或者多级页面，需要指定 open-type 和 delta

open-type：跳转方式，必须是 navigateBack ，表示后退导航

delta：数字，表示要回退几层，默认为1

3.2 编程式导航

3.2.1 导航到tabBar页面

调用 wx.switchBar(object, object) 方法，第一个参数是要跳转页面，第二个参数是属性

属性	类型	必须	说明
url	string	是	跳转路径，不能跟参数
success	function	否	成功回调函数
fail	function	否	失败回调函数
complete	function	否	结束时无论是否成功都会返回的回调函数

代码演示

gotoIndex () {
    wx.switchTab({
        // 代表要跳转的路径
        url: '/pages/index/index',
    })
},

3.2.2 导航到非tabBar页面

调用 wx.navigateTo(object, object) 方法

代码演示

gotoIndex () {
    wx.navigateTo({
        // 代表要跳转的路径
        url: '/pages/index/index',
    })
},

3.2.3 后退导航

调用 wx.navigateBack(object, object) 方法

代码演示

goBack () {
    // 如果不传递参数就是返回上一页
    // 如果要传递参数则是传递 delta 数字型， 代表返回的层级。
    wx.navigateBack()
},

3.3 导航传参

3.3.1 声明式导航传参

通过URL传参，通过 ？ 分隔路径与参数，通过 = 连接键与值，通过 & 分隔不同参数

代码演示

<navigtor url="pages/index/index?num1=111&num2=222"></navigtor>

3.3.2 编程式导航传参

通过 wx.navigateTo/SwitchTo()方法中的url传参

代码演示

gotoInfo () {
    wx.navigateTo({
        url: '/pages/info/info?num1=111&num2=222',
    })
},

3.3.3 在onLoad中接受参数

无论是声明式还是编程式导航都可以通过onLoad生命周期直接获取参数

代码演示

onLoad: function (options) {
    通过声明式导航和编程式导航 都可以
    // 在onLoad声明周期函数中获取传递的参数
    console.log(options);
    // 将导航传递的参数转存在data中的query里
    this.setData({
    query: options
    })
},