微信小程序4-小程序的api

微信小程序1-小程序基础,开发工具安装使用
微信小程序2-WXSS,WXS
微信小程序3-小程序生命周期和组件

1.小程序的api

    1).获取系统信息wx.getSystemInfo

wx.getSystemInfo({
      success (res) {
        console.log(res.model)
        console.log(res.pixelRatio)
        console.log(res.windowWidth)
        console.log(res.windowHeight)
        console.log(res.language)
        console.log(res.version)
        console.log(res.platform)
      }
    })

    2).页面路由wx.navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面,例如:从data页面跳转到dataInfo页面
wx.navigateTo无法跳转到tabBar页面（就是无法跳转底部标题栏的页面）

//data页面的ts代码
  onclick() {

    wx.navigateTo({
      url: '/pages/dataInfo/dataInfo?name=yw&age=18',//附带两个参数过去
      events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        someEvent: function (data:any) {
          console.log('data页面someEvent',data)
        },
        someEvent1: function (data:any) {
          console.log('data页面someEvent',data)
        }
      },
      success: function (res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('callback', { data: 'data页面返回' })
      }
    })
  }

//dataInfo页面的ts代码
  onLoad:function(option) {
    console.log(option.name)
    console.log(option.age)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('someEvent', {data: 'dataInfo页面返回'});
    eventChannel.emit('someEvent1', {data: 'dataInfo页面返回1'});
    // 监听callbackt事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('callback', function(data) {
      console.log('dataInfo页面',data)
    })
  }

    3).页面路由wx.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

onclick() {
    wx.switchTab({
      url: "/pages/my/my"
    })
  }

    4).页面路由wx.redirectTo

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

 onclick() {
    wx.redirectTo({
      url: "/pages/dataInfo/dataInfo"
    })
  }

    5).显示当前页面的转发按钮wx.showShareMenu

  wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })

    6).显示消息提示框wx.showToast

 wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })
  

    7).显示 loading 提示框wx.showLoading

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)

    8).显示模态对话框wx.showModal

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

    9).在当前页面显示导航条加载动画wx.showNavigationBarLoading

//wxml代码
 开启按钮 
 取消按钮 

//ts代码
btnClick1(){
    wx.showNavigationBarLoading()
  },
  btnClick2() {
    wx.hideNavigationBarLoading()
  }

    10).下拉颜色和状态

wx.setBackgroundTextStyle：动态设置下拉背景字体、loading 图的样式

wx.setBackgroundColor：动态设置窗口的背景色

onLoad() {
    wx.setBackgroundTextStyle({
      textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark
    })
    wx.setBackgroundColor({
      backgroundColorTop: '#ff0000', // 顶部窗口的背景色
      backgroundColorBottom: '#ffff00', // 底部窗口的背景色
    })
  }

2.网络

    1).接口请求 wx.request

        (1).配置合法域名

小程序请求的接口需要https和域名，并且需要在微信小程序管理后台中加入指定域名
微信小程序官网i

        (2).请求示例

wx.request({
 url: '', 
 data: {
   x: '',
   y: ''
 },
 header: {
   'content-type': 'application/json' // 默认值
 },
 success (res) {
   console.log(res.data)
 }
})

    2).文件下载wx.downloadFile

下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB
同样也要配置下载合法域名

wx.downloadFile({
  url: '', 
  success (res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
      wx.playVoice({
        filePath: res.tempFilePath
      })
    }
  }
})

    3).文件上传wx.uploadFile

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data
同样也要配置下载合法域名

  wx.uploadFile({
      url: '', 
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })

3.支付

如果需要接入微信支付功能，需要在微信商户平台
微信商户平台

    1).登录微信商户平台，然后点击接入微信支付进行支付申请

个人是没有办法进行开发支付功能的，需要营业执照等



申请成功后，可以看到关联了商户号

    2).设置api密钥(商户密钥)，该密钥在做微信支付功能的时候是必须的

依然在支付商务平台

    3).发起支付

        (1).支付流程

1.wx.login获取用户临时登录凭证code，发送到后端服务器换取openId
2.打开小程序下单,小程序会将购买的商品Id，商品数量，以及用户的openId传送到服务器
3.服务器在接收到商品Id、商品数量、openId后，生成订单数据，调用支付统一下单api，获取预付单信息(prepay_id)
4.小程序端在获取对应的参数后，调用wx.requestPayment()发起微信支付，唤醒支付工作台，进行支付
5.确认支付之后执行鉴权调起支付
6.在微信后台进行鉴权，微信后台直接返回给前端支付的结果，前端收到返回数据后对支付结果进行展示
7.微信后台在给前端返回支付的结果后，也会向服务器返回一个支付结果

        (2).发起支付wx.requestPayment需要的参数

wx.requestPayment({
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success (res) { },
  fail (res) { }
})

3.转发分享

    1).转发onShareAppMessage

监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容
注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

Page({
  onShareAppMessage() {
    return {
      title: '自定义转发标题',
      path: '/page/data/data?id=123',
    }
  }
  })

    2).分享朋友圈onShareTimeline

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容
注意：只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮

Page({
/**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    // 用户点击右上角分享给好友,要先在分享好友这里设置menus的两个参数,才可以分享朋友圈
    wx.showShareMenu({
      menus: ['shareAppMessage', 'shareTimeline'] //shareAppMessage必须得有
    })
  },
   //用户点击右上角分享朋友圈
  onShareTimeline() {
    return {
      title: '自定义分享标题',
      query: "id=110101&name=heyzqt",
      imageUrl: ""

    }
  }
})

    3).收藏onAddToFavorites

监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容

Page({
onAddToFavorites(res) {
    // webview 页面返回 webViewUrl
    //console.log('webViewUrl: ', res.webViewUrl)
    return {
      title: '自定义收藏标题',
      imageUrl: '',
      query: 'name=xxx&age=xxx',
    }
  }
})