微信小程序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).下拉颜色和状态 【微信小程序|微信小程序4-小程序的api】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 = https://www.it610.com/article/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',
}
}
})
文章图片
文章图片
推荐阅读
- 微信小程序|答题活动小程序v3.0
- 小程序|微信小程序 事件的绑定和传参
- 原生小程序|原生小程序 之事件绑定（数据绑定） 与 事件传参 下拉刷新、触底事件等
- 微信小程序|【微信小程序】一文带你了解数据绑定、事件绑定以及事件传参、数据同步
- springboot|ssm基于微信小程序的警局服务管理系统--(ssm+uinapp+Mysql)
- 微信小程序|微信小程序05 事件绑定与事件传参
- 编程语言|程序员最讨厌的11句话 | 每日趣闻
- matlab|信息完全技术之Enigma密码机【MATLAB程序及软件APP实现】
- MysqL|MysqL读写分离原理