微信小程序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代码
<view bindtap='btnClick1'> 开启按钮 </view>
<view bindtap='btnClick2'> 取消按钮 </view>//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',}}
})