微信小程序4-小程序的api-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序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)
      }
    })

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

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)
    })
  }

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

3).页面路由`wx.switchTab`

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

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

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

4).页面路由`wx.redirectTo`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

//wxml代码
<view bindtap='btnClick1'> 开启按钮 </view>
<view bindtap='btnClick2'> 取消按钮 </view>

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

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

10).下拉颜色和状态

wx.setBackgroundTextStyle：动态设置下拉背景字体、loading 图的样式
微信小程序4-小程序的api
wx.setBackgroundColor：动态设置窗口的背景色

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

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

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

2.网络

1).接口请求 `wx.request`

(1).配置合法域名

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

(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).登录微信商户平台，然后点击接入微信支付进行支付申请

个人是没有办法进行开发支付功能的，需要营业执照等
微信小程序4-小程序的api

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

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

依然在支付商务平台

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

3).发起支付

(1).支付流程

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

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

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

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

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',
    }
  }
  })

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

2).分享朋友圈`onShareTimeline`

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

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

    }
  }
})

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

3).收藏`onAddToFavorites`

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

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

微信小程序4-小程序的api
文章来源地址https://www.toymoban.com/news/detail-498089.html

到了这里，关于微信小程序4-小程序的api的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

1.小程序的api

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

2).页面路由`wx.navigateTo`

3).页面路由`wx.switchTab`

4).页面路由`wx.redirectTo`

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

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

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

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

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

10).下拉颜色和状态

2.网络

1).接口请求 `wx.request`

(1).配置合法域名

(2).请求示例

2).文件下载`wx.downloadFile`

3).文件上传`wx.uploadFile`

3.支付

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

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

3).发起支付

(1).支付流程

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

3.转发分享

1).转发`onShareAppMessage`

2).分享朋友圈`onShareTimeline`

3).收藏`onAddToFavorites`

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

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

1.小程序的api

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

2).页面路由wx.navigateTo

3).页面路由wx.switchTab

4).页面路由wx.redirectTo

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

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

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

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

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

10).下拉颜色和状态

2.网络

1).接口请求 wx.request

(1).配置合法域名

(2).请求示例

2).文件下载wx.downloadFile

3).文件上传wx.uploadFile

3.支付

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

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

3).发起支付

(1).支付流程

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

3.转发分享

1).转发onShareAppMessage

2).分享朋友圈onShareTimeline

3).收藏onAddToFavorites

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

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

2).页面路由`wx.navigateTo`

3).页面路由`wx.switchTab`

4).页面路由`wx.redirectTo`

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

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

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

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

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

1).接口请求 `wx.request`

2).文件下载`wx.downloadFile`

3).文件上传`wx.uploadFile`

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

1).转发`onShareAppMessage`

2).分享朋友圈`onShareTimeline`

3).收藏`onAddToFavorites`