大家好，又见面了，我是你们的朋友全栈君。

1.api

1.概述

小程序开发框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等

2.api分类

监听api

约定以on开头的API用了来监听某个事件是否触发

同步api

约定，以Sync结尾的API都是同步API，直接接取函数返回的的结果既可，不需要等待

异步api

大多数API都是异步API，如wx.request,wx.login等，异步api方法主体是object结构，都有success/faill/complete

几乎所有的异步api都支持promise（前提是基础库版本在 2.10.2）

部分接口如downloadFile，request，uploadFile，connectSocket，createCamera（小游戏）本身就有返回值，它们的promiseifu需要开发者自行封装

云开发api

wx.cloud.database()

wx.clound.callFunction()

3.网络api

语法

wx.request()

注：项目上线之前要将项目中用到的业务域名在微信公众后台注册备案（生效事件5分钟左右）

在本地开发测试期间为了开发方便可以不配置域名信息，只需要将微信开发者工具中的不校验选项设置即可

微信小程序中不存在跨域问题 跨域一般发生位置：浏览器 防止CSRF跨站点请求伪造

微信小程序使用语法糖

小程序中使用async awiat语法糖一定要设置如下配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ys5oAAf8-1640876023445)(C:\Users\xwl\AppData\Roaming\Typora\typora-user-images\image-20211230113718400.png)]

封装promise版本网络请求方法

新建utils/config.js文件

// 定义域名或地址
let URL = "https://route.showapi.com"
export default URL

新建utils/http.js文件

import URL from './config.js'
/* 定义promise版本的网络请求方法 options: { url data:{} method header } */
export default (options)=> { 
   
    //封装地址
    let url = URL + options.url
    return new Promise((resolve,reject)=>{ 
   
		wx.request({ 
   
            url,
            data:options.data || { 
   },
            header:options.header || { 
   
                "content-type": "application/json"
            },
            success:res=>{ 
   resolve(res)},
            fail:err=>{ 
   reject(err)}
        })
    })
}

使用网络请求方法

//引入网络请求模块
import http from '../../utils/http.js'
//使用promise版本请求
http({ 
   
    url: '....'
}).then(res=>{ 
   
   this.setData({ 
   
       ...
   })
       
  // 存储到本地缓存一份
       wx.setStroageSync('list',...)
})

4.缓存api

小程序中的本地缓存原理基本同pc端中localstorage，将数据存储在本地缓存中指定的key中，除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用，当个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB

缓存api功能分类：存储（set） 获取（get）根据key删除一个（remove） 清除所有（clear） 获取缓存详情（info）

应用场景:存储用户的账号信息 存储业务数据 存储收藏数据 记录用户的访问日志（时间） 购物车数据等

//缓存数据列表，减少每次网络请求开销
 onLoad: function (options) { 
   
    //判断缓存中是否有分类数据
    let list = wx.getStorageSync('list')
    if(list === '') { 
   
      //没有数据重新请求获取数据
      this.getList()
    }else { 
   
      // 有数据直接使用
      console.log('走缓存了');
      this.setData({ 
   list})
    }

  },

5.界面api

常用界面API：交互类、导航类等

// 显示导航栏加载动画
wx.showNavigationBarLoadingg()
//动态设置标题内容
wx.setNavigationBarTitle({ 
   
    title: classfiy
})
//动态设置标题颜色（背景色，前景色）
wx.setNavigatiinBarColor({ 
   
    fontColor: "#ffffff",
    backgroundColor: "#ff0000",
    animation: { 
   
        duration: 1500,
        timingFunc:'easeIn'
    }
})

挂载加载提示方法

新建utils/tip.js文件

//定义数据加载更新提示的方法
const load = (title)=>{ 
   
	//提示数据加载中
    wx.showLoading({ 
   
        title
    })
    //显示导航栏加载动画
    wx.showNavigationBarLoading()
}
//定义关闭加载更新提示的方法
const hideLoad=()=>{ 
   
    wx.hideNavigationBarLoading()
    wx.hideLoading()
}
//导出
module.exports={ 
   
    load,
    hideLoad
}

2.开发能力-授权

1.概述

1.微信小程序中部分api函数使用需要经过用户授权同意才能调用，如获取用户信息，保存图片到相册等，把这些接口按使用范围分成多个scope，用户选择对应scope来进行授权，当授权给一个scoepe之后，其对应的所有接口都可以直接使用

2.此类接口调用时

若用户未接受或拒绝过此权限，会弹窗询问用户，用户点击统一后方可调用接口

若用户已授权，可以直接掉用接口

若用户已拒绝授权，则不会出现弹窗，而是直接进入接口fail回调，请开发者兼容用户拒绝授权的场景

2.检测授权状态

wx.getSetting()

3.主动发起授权请求

开发者可以使用wx.authorize在调用授权API之前，提前向用户发起授权请求

wx.authorize()

4.再次唤起授权设置界面

为了避免用户通过wx.authorize方法发起主动授权后遭到用户再次拒绝问题，可以用以下两种方式打开设置界面

1.用户可以在小程序设置界面中控制对该小程序的授权状态

2.使用wx.openSetting()再次唤起授权设置界面

wx.openSetting() 
//此方法不能直接调用，需要引导 用户主动触发，如通过点击事件或者消息对话框
//直接使用会报错

代码操作

以主动获取用户手机的录音功能为例，可以在项目的入口处（app.js—>app()方法）检测权限进而引导用户授权，只要用户授权，就可以在项目中的任何页面去使用录音功能

//检测需要的权限是否授权
    wx.getSetting({ 
   
        
        //使用录音接口
        //wx.startRecord()
        
      success:res=>{ 
   
        //获取授权情况列表(默认只展示向用户青丘国的权限 有四个除外)
        if(!res.authSetting["scope.record"]) { 
   
          //引导用户授权
          wx.authorize({ 
   
            scope:'socpe.record',
            success:res=>{ 
   
              console.log('用户同意了');
            },
            fail:err=>{ 
   
              console.log('用户拒绝了');
              //再次唤起权限设置页面
              // 通过弹窗海报流程图是以用户授权
              //通过api函数可以直接唤起权限设置列表
              // (开发者不能直接使用，需要引导用户触发此函数)
              wx.showModal({ 
   
                title:'权限不足',
                content:'是否授权',
                concelText:'再想想',
                cancelColor:'red',
                confirmColor:'green',
                confirmText:'ok',
                success:res=>{ 
   
                  if(res.confirm) { 
   
                   wx.openSetting({ 
   
                     success:res=>{ 
   
                       console.log(11,res);
                     },
                     fail:err=>{ 
   
                       console.log(22,err);
                     }
                   })
                  }else { 
   
                    console.log('用户态度很坚决');
                  }
                }
              })
            }
          })
        }else { 
   
          //已经授权 使用即可
          console.log('已经授权使用即可');
        }
      }
    })

3.开放能力-获取用户信息

1.通过API获取用户信息

注意获取用户信息的api方法已经更新，之前方案是通过button组件引导用户首先授权再次使用

wx.getUserinfo()获取用户的信息（头像、昵称等），目前更换为wx.getUserProfile() api方法，每次请求都会弹出授权窗口，用户同意后返回userInfo，该接口用于替换wx.getUserInfo

注意：该接口每次触发不会弹窗：不管上次用户是拒绝还是统一，为了后期开发方便可以再用户同意后讲获取到的用户信息存入本地缓存供后期业务使用

user.wxml页面

<view>
  <block wx:if="{ 
    {buffer}}">
    <image src="{ 
    {userInfo.avataUrl}}"></image>
    <text>{
  
  {userInfo.nickName}}</text>
  </block>
  <button wx:else bindtap="getUerInfo">获取您的信息</button>
</view>

user.js

  data: { 
   
    buffer: false,
    userInfo: { 
   } // 用户的信息
  },
  getUserInfo() { 
   
    wx.getUserProfile({ 
   
      desc: '完善会员信息',
      success: res => { 
   
        //赋值展示用户的信息
        this.setData({ 
   
          userInfo: res.userInfo,
          buffer: true
        })
        //讲获取到的用户信息存储到本地缓存中
        wx.setStorageSync('userInfo', res.userInfo)
      },
      fail: err => { 
    console.log(22, err); }
    })
  },

onLoad: function (options) { 
   
    //获取缓存中的用户信息
    let userInfo = wx.getStorageSync('userInfo') || ''
    if (userInfo == '') { 
   
      wx.showToast({ 
   
        title: '请先授权',
        icon: 'error',
        image: '../../images/icon/ssFull.png',
        mask: true
      })
    } else { 
   
      //直接示意数据展示即可
      this.setData({ 
    usesInfo, buffer: true })
    }
  },

4.开放能力-获取用户手机号

(1)需要用户主动触发才能发起获取手机号接口，该功能不由APi来调用。需要button组件的点击来触发

（2）调用wx.login登录获取code登良路令牌，后端服务器使用code获取的sessionKey来解密加密的手机号

（3）目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体），可以使用测试号注册微信小程序测试号地址

注册微信小程序测试号地址：https://developers.weixin.qq.com/sandbox

1.获取加密手机号

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

2.微信登录

wx.login()
通过微信登录获取用户的临时登录令牌code码，code有效期是5分钟，接着讲code码发送给自己的服务端，服务端获取用户在微信上的session_key(加解密用户私密数据的钥匙)和用户的openid（用户唯一标识符），进而自己的服务端可以通过session_key来解密用户的私密数据，如手机号、微信运动步数等

3.后端解密开放数据

小程序可以通过各种前端接口获取微信提供的开放数据，但是开发者服务端获取这些开发数据时，需要对开发数据进行解密

​ 前端获取到的手机号是加密的需要后端解密，解密完毕直接返回给前端即可

getPhone(e) { 
   
    //解构获取返回的加密数据 和加密向量
    let { 
   encrypteData,iv} = e.detail
    //获取用户登录微信服务器的令牌code(有效期5分钟)
    wx.login({ 
   
     success:res=>{ 
   
       console.log(res);
       //将加密数据发送给服务端进行解密
       wx.request({ 
   
         url:'http://cesho.com',
         data:{ 
   
           encrypteData,
           iv,
           code:res.code
         },success:res=>{ 
   
           //成功返回
           console.log(res);
         }
       })
     }
    })
  },

注：若第一次测试弹窗提示需要这侧发送短信之类的提示 直接点击工具栏中的预览，在真机上按照提示验证完毕后再次在开发正工具中模拟测试即可

5.WeUI框架

1.组件库概述

一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一

地址：https://wechat-miniprogram.github.io/weui/docs/

2.安装配置

首先在app.json文件中添加如下配置
"userExtendeLib": { 
   
    "weui":true
}

3.注册组件

像使用自定义组件一样，注册要使用的组件即可
1.全局注册
app.json
	"usinComponents": { 
   
        "mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar"
    }
2.局部注册
page.json
	"uingComponents": { 
   
        "mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar"
    }

<mp-navigation-bar background="red" back="{ 
    {false}}" >
  <!---绘制左侧区域-->
  <view slot='left'>
    <text>首页|</text>
    <text bindtap="back">返回</text>
  </view>
  <!--绘制中间区域-->
  <view slot="center">
    <icon type="search" color="white"></icon>
    <text>订单查询</text>
  </view>
</mp-navigation-bar>
<mp-searchbar></mp-searchbar>

6.云开发

1.概述

开发者可以使用运发开快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力

云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的API进行核心业务开发，即可实现快速上线和迭代，同时这一能力同开发者已经使用的云服务相互兼容，并不互斥，提供了包括数据库、云函数、存储等基础能力

开发者可以将业务数据直接存储在云数据库中、将图片资源存储在云存储中，也可以设置运行在云端的云函数来操作数据库、云存储等资源，在云函数 端操作云开发资源相对小程序端具有更高的权限，比如在小程序每次查询数据限制为20条，而在云函数端可以每次查询100条

2.基础能力概述

1.数据库

云开发提供了一个JSON数据库，数据中的每条记录都是一个JSON格式的对象，一个数据库可以有多个集合（相当于关系型数据中的表），集合可看作一个JSON数组，数组中的每个对象就是一条记录，记录的格式就是JOSN对象

2.云存储

云开发提供了一块存储空间，提供了上传文件到云端、带权限管理的云端下载能力，开发者可以在小程序端和云函数端通过API使用云存储功能

在小程序端可以分别调用wx.clound.uploadFile和wx.cloud.downloadFile完成上传和下载云文件操作

3.云函数

云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写、一键上传部署即可运行后端代码

小程序内提供了了专门用于云函数调用的API。开发者可以在云函数内使用wx.server-sdk提供的getwxContext方法获取到每次调用的上下文(appid\openid等)，无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态（openid）

3.新建云开发模板

新建项目选择一个空目录，填入AppID（使用云开发能力必须填写AppID），勾选创建“云开发QuickStart项目”

点击创建即可得到一个展示云开发基础能力的示例小程序，该小程序与普通QuickStart小程序有以下不同

无游客模式，也不可以使用测试号

project.config.json中增加了字段cloundbaseRoot用于指定存放云函数&云托管的目录

cloundbaseRoot指定的目录有特殊的图标

云开发能力从基础库2.2.3开始支持

从基础库2.4.1开始，小程序插件中可以使用云开发，插件中使用云开发时，使用的是插件方的云资源而非宿主的云资源，子啊使用方式与在小程序中使用无异

4.开通云开发、创建环境

在工具栏左侧，点击云开发按钮即可打开云控制台、根据提示开通云开发，创建云环境。默认配额下可以创建两个环境，各个环境相互隔离，每个环境都包含独立的数据库实例、存储空间、云函数配置等资源。每个环境都有唯一的环境ID表示，初始环境的环境自动成为默认环境

5.初始化云环境

app.js
onLunch:function() { 
   
    if(!wx.clound) { 
   
        console.log('请使用2.2.3或以上的基础库以使用云能力')
    }else { 
   
        //云环境初始化
        wx.clound.init({ 
   
            env: '...', //填写环境id,可在云控制台查看
            traceUser:true //时候记录用户访问记录到控制台可见
        })
    }
}

6.数据库操作

1.数据库初始化
获取操作数据库的引用
const db = wx.clound.database()
console.log(db)
2.添加数据
首先创建集合
addData() { 
   
    //callback风格
    db.coleciton('demo').add({ 
   
        data: { 
   
            name: '张三',
            age: 18
        },
        success:res=>{ 
   console.log(res)},
        fail:err=>{ 
   console.log(err)}
    })
    
   // promise
	db.collection('demo').add({ 
   
        data: { 
   
            name:'zhansan',
            age:20
        }
    }).then(res=>{ 
   console.log(re)})
}

3.查询数据
//获取所有数据 小程序端每次只能返回20条记录 云函数端可以返回100条
addData() { 
   
    db.collection('demo').get().then(res=>{ 
   console.log(res)})
}
//根据id
idData() { 
   
    db.collection('demo').doc('54ad1eea61cdc34101c2249a2c2d8cf1').get().then(res=>{ 
   console.lof(res)})
}
//根据where
whereData() { 
   
	db.collection('demo').where({ 
   
        name:'zhangsan'
    }).get().then(res=>{ 
   console.log(res)})
    
    db.collection('demo').where({ 
   
        id:'54ad1eea61cdc34101c2249a2c2d8cf1'
    }).get().then(res=>{ 
   console.log(res)})
}

7.云存储

//下载图片资源
download() { 
   
    wx.clound.downloadFile({ 
   
        fildID: '........',  //文件ID
        success: res=>{ 
   
            //返回临时文件路径
            console.log(res.tempFilePath)
            //保存到相册
            wx.saveImageToPhotosAlbm({ 
   
                filePath:res.tempFilePath,
                success:res=>{ 
   
                    console.log('保存成功')
                }
            })
        },
        fai:err=>console.log(err)
    })
},
    
 // 上传文件 第三方存储空间 七牛云 阿里oss
    upload() { 
   
        // 1.获取本地资源（获取本地图片资源）
        wx.chooseImage({ 
   
            count: 1,
            sizeType: ['originall','compressed'],
            sourceType: ['album','camera'],
            success:res=>{ 
   
                //tempFilePath可以做欸img标签的src属性显示图片
                const tempFilePaths = res.tempFilePaths[0]
                console.log(tempFilePaths)
                //生成新的图片名称（为了避免用户资源冲突 图片丢失覆盖）
                let suffix = tempFilePaths.split('.').pop()
                let newImg = new Date().getTime()+'.'+suffix
                //console.log(newImg)
                //将本地资源上传至云端（云存储）
                wx.cloud.uploadFile({ 
   
                    clloudPath: '..../'+newImg, //上传至云端的路径 
                    filePath:tempFilePaths, // 小程序临时文件路径
                    success:res=>{ 
   
                        //返回文件ID存储到数据库中
                        console.log(res.fileID)
                    },
                    fail:console.error
                })
            }
        })
    }

8.云函数

1.在项目中指定云函数根目录，然后需要在project.config.json中指定云函数根目录
"cloundfunctionRoot": "cloundFunctions/"

2.右键云函数根目录指定云服务环境，指定后会自动同步当前环境下的所有云函数

3.新建云函数，在云函数根目录上右键选择新建node.js云函数即可，第一次回自动上传，后期如果修改此函数需要手动上传

4.编辑云函数内容
注：每次修改完本地的云函数后一定上传同步到云端
//云函数入口文件 可以方便在云函数中操作数据库 云存储 云函数
const cloud = require('wx-server-sdk')
//云函数端环境初始化 wx.cloud.init() 以下是操作dev环境中的资源
cloud.init({ 
   env:'...'})

//云函数入口函数 commonjs语法规范导出函数
exports.main = async(event,context)=>{ 
   
    //event：调用此函数传递的参数，还有云服务端自定义注入的appid和openid
    //context：描述的此函数运行的上下文环境
    // return 1+1
    //操作数据库 云存储 云函数
    return event
}

5.在小程序端使用云函数
wx.clound.callFunction()
//使用云函数
getYun() { 
   
    wx.cloud.callFunction({ 
   
        name:'zzzz',
        data:{ 
   
            name:'zhangsan',
            age:20
        }
    }).then(res=>{ 
   console.log(res)})
}