访问API数据与ES6在小程序中的应用
看待组件的两种观点
组件复用
代码分离-（特别重要）
- 不能在一个页面写所有的代码，代码分离具有很强的可读性、可维护性
Blink Api 介绍与测试API
url前缀以bl.7yue.pro/v1开头
使用开发者key（appkey）访问API
- 在请求头的header里面携带appkey
- 将appkey做为请求参数
状态码和错误码
生命周期函数
小程序内部自己调用
名字是固定的
page({ data: {}, onLoad: function(option){},//监听页面加载,用于获取服务器数据 onReady: function(){},//监听初次渲染完成 onShow(){},//监听页面显示 onHide: function(),//监听页面隐藏 onUnload: function(){},//监听页面卸载 onPullDownRefresh: function(){},//监听用户下拉动作 onReachBottom: function(),//上拉触底事件的处理函数 onShareAppMessage: function(){}//分享操作函数})
wx.request-4xx状态码不会执行fail
注意：服务器返回的数据都会是success，当网络中断时才会走fail
访问API获取数据
wx.request({ url: 'xxx', header: { appkey: 'xxx' }}) 同步、异步与回调函数
小程序里面的request都是异步的，它的优势是性能很高，但调试编程都比较难
ES6箭头函数与this指代
success:(res)=>{ console.log(this.data.count);}let that = this;... success: function(){ console.log(that.data.count); }
正确理解Promise
正确的使用场景：异步嵌套
ES6 const常量
配置文件一般用const定义
const config = 2;config = 3;//报错config.appkey = 1；//不报错，因为没有修改config的内存地址
ES6 Module export 与 import
在类里面定义方法的写法
import {config} from 'xxx';class HTTP{ request(param){ }}export const config = { } 或const config = {}export {config}
HTTP类的封装与ES6 startsWith与异常处理
startsWith的用法
success: (res)=>{ let code = res.statusCode.toString(); if(code.startsWith('2')){ }else { //错误处理 }}错误处理
const tips = { 1: '抱歉，出现一个错误' 1005: 'appkey无效', 3000: '期刊不存在'}class HTTP{ request(param){ ... } _show_error(error_code){ if(!error_code){ error_code = 1; } wx.showToast({ title: tips[error_code], icon: 'none', duration: 2000 }) }}