微信小程序--小程序系统API

小程序系统API

1.网络请求

1.1网络请求的基本使用

微信提供了专属的API借口，用于网络请求：wx.request(Object object)
几个关键的属性：

• url：请求地址（必传）
• data：请求参数
• method：请求方式
• success：成功时回调
• fail：失败时回调

小示例

 //3.post请求，并且携带参数
    wx.request({
      url: 'http://httpbin.org/post',
      method: 'POST',
      data:{
        name: 'coderwhy',
        age: 18
      },
      success: function(res){
        console.log(res);
      },
      fail: function(err){   //错误时调用的函数
        console.log(err);
        
      }
    })

1.2网络请求-工具函数封装

封装的好处：

1. 降低网络请求和wx.request的耦合度
2. 使用Promise的方法去回调

//network.js  对request的封装
module.exports =  options => {
  return new Promise((resolve, reject) => {
    wx.request({
    url: options.url,
    method: options.method || 'GET',
    data: options.data || {},
    success: resolve,
    fail: reject
  })
  })
}

//home.js 对封装的request的调用
const request = require('../../server/network')
//import request from '../../server/network'
 onLoad: function (options) {
    //首页加载完成后，发送网络请求  
    //promise最大的好处就是防止出现回调地狱
    request({
      url: 'http://httpbin.org'
    }).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  }

2.小程序中展示弹窗

展示弹窗的四种方式：showToast, showModal, showLoading, showActionSheet
1）showToast 特点：有文字有图标，显示一定时间后消失

 wx.showToast({
      // title: '你好啊',
      title: '成功',
      icon: 'success',
      duration: 5000,
      mask: true,   //蒙版
      success: function(){
        console.log('展示弹窗成功')
      },
      fail: function(){
        console.log('展示弹窗完成')
      }
    })
//可以将图标改为图片，采用image属性

2） showModal 有确定和取消按钮，有标题和文本

3） showLoading 显示加载，可以设置时间

4） showActionSheet 从底部弹出弹框

小结
   各个弹框可以设置内容和颜色，以及展示成功，和展示失败的函数，以及蒙版的使用具体详见文档
注意

• wx.showLoading 和 wx.showToast 同时只能显示一个
• wx.showLoading 应与 wx.hideLoading 配对使用

3.小程序中使用分享

两种方式：

• 点击右上角菜单按钮，之后点击转发
  在页面的js文件中添加

onShareAppMessage: function(options) {
    //有三个字段，用于自定义转发内容
    // title, path, imageUrl
    //路径非常重要，用于决定，打开分享时进入哪一个页面
    return {
      title: 'hello world',
      path: '/pages/home/home.wxml' , 
      imageUrl: '图片地址'  //默认截图
      }
  }

• 点击某个按钮，直接转发
  open-type=“share”

 <button size='mini' open-type="share">分享</button>

4.小程序登录流程解析及代码演练

登录流程图：

1. 调用wx.login获取code
2. 调用wx.request发送code到我们自己的服务器
3. 将登录状态的标识token进行存储，以便下次再用
4. 请求需要登录态标识接口时，携带token

5.小程序实现页面的跳转

页面跳转的两种方式：通过navigator组件和通过wx的API跳转

5.1 navigator组件主要就是用于界面的跳转

<navigator url="/pages/detial/detial">跳到详情页</navigator>

navigator组件有open-type属性，有几个常用取值

• navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
• redirect 关闭当前页面，跳转到应用内的某个页面，但不允许跳转到tabbar页面，并且不能返回；
• switchTab 跳转到tabBar页面，关闭其他所有非tabBar页面
• reLaunch 关闭所有页面，打开应用中某个页面
• navigateBack 自定义返回操作

<!-- 自定义返回 -->
<navigator open-type="navigateBack">返回</navigator>
<!-- delta="2"  返回两个层级 -->
<navigator open-type="navigateBack" delta="2">返回</navigator>

重点：数据传递-传递方式分析

1.首页向详情页传递数据在跳转地址后加上queryString，以键值对的方式书写，
在跳转到的detial页面的js文件中，有onLoad函数，options参数中有传递过来的信息

<navigator url="/pages/detial/detial?name=why&age=18&height=1.88">跳转到详情页</navigator>

2.详情页向首页返回数据
可以在详情页的onUnload生命周期函数中进行实现

// 1.获取首页的页面对象
    // getCurrentPages 返回当前所有活跃的页面
    const pages = getCurrentPages();
    // console.log(pages);
    const home = pages[pages.length - 2]
    //2.调用页面对象的setData
    home.setData({
      title:'呵呵呵'
    })

5.1 通过系统API进行跳转

常见跳转的API

• wx.navigateTo(Object object)
  保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
• wx.redirectTo(Object object)
  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
• wx.switchTab(Object object)
  跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
• wx.navigateBack(Object object)
  关键参数：delta返回的页面数，如果 delta 大于现有页面数，则返回到首页。
  关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

具体作用于类似的组件相同，传递参数方式也类似