程序开发学习"/>
小程序开发学习
小程序开发
文章目录
- 小程序开发
- 1.1 小程序环境搭建
- 1.2 全局配置
- 1.3 小程序开发注意点
- 微信获取用户信息,微信的系统接口:
- 微信获取定位信息
- 微信上传图片
- 微信发送请求
- 微信交互体验 api
- 微信全局变量
- 微信本地存储
- 微信停止下拉刷新
- 微信打开手机设置页面
- 微信获取屏幕窗口信息
- 微信获取设备信息
- 微信获取系统信息
- 微信触底事件监听
- 微信上拉刷新
- 微信右上角分享事件
- 开发技巧
- 发送短信验证码流程
- css 实现瀑布流
- 微信支付流程
1.1 小程序环境搭建
- 进入微信公众平台,找到 appid 保存
- 打开微信开发者工具,创建项目,填写 appid
- 云服务自己开发项目没有必要
1.2 全局配置
app.json
: pages 页面配置,window 顶部导航栏配置,tabbar 底部菜单配置。
1.3 小程序开发注意点
组件:<view></view> <text></text> <image></image>
flex 布局在小程序中药使用 flex-start、flex-end。
像素值: rpx 单位 (2rpx = 1px) 750rpx 常见布局
事件绑定: bind事件名="事件名称"
e.g bindtap="tapHandle"
传递参数: data-参数名="参数值"
e.g data-nid= "12"
获取参数: 在事件对象中通过 e.currentTarget.dataset.参数名
跳转非 tabbar 页面,push 页面: wx.navigateTo({url:'路径'})
跳转非 tabbar 页面,replace 页面: wx.redirectTo({url:'路径'})
跳转非 tabbar 页面,关闭所有之前页面: wx.reLaunch({url:'路径'})
跳转 tabbar 页面: wx.switchTab({url:'路径'})
退回上个页面: wx.navigateBack({url:'路径'})
通过标签跳转页面:<navigator url="路径"></navigator>
跳转页面传参通过 拼接路径传递参数
接收页面跳转的参数: 在 onLoad(options){}
中通过参数 options 获取参数。
getCurrentPages()
获取当前页面栈
数据绑定:
在模板中使用和 vue 一样:{{变量}}
,在绑定属性时也是class="{{属性值}}"
获取 data 中的数据 this.data.变量名
修改 data 中的响应式数据 this.setData({})
for 列表渲染:
wx:for="{{循环的数据}}"
默认内置的变量是 index、item,如果是对象,index 是 key,item 是属性值;
wx:for="{{循环的数据}}" wx:for-index="idx" wx:for-item="x"
给 index 和 item 起别名。
if 条件渲染:
wx:if="{{条件判断}}"
APP 的生命周期:
onLaunch 生命周期回调——监听小程序初始化。
onShow 生命周期回调——监听小程序启动或切前台。
onHide 生命周期回调——监听小程序切后台。
onError 错误监听函数。
onPageNotFound 页面不存在监听函数。
onThemeChange 监听系统主题变化。
小程序页面声明周期:
onLoad 生命周期函数–监听页面加载,接收外部传递到组件的参数。
onReady 生命周期函数–监听页面初次渲染完成。
onShow 生命周期函数–监听页面显示。
onHide 生命周期函数–监听页面隐藏。
onUnload 生命周期函数–监听页面卸载。
组件生命周期:
created 在组件实例刚刚被创建时执行。
attached 在组件实例进入页面节点树时执行。
ready 在组件在视图层布局完成后执行。
moved 在组件实例被移动到节点树另一个位置时执行。
detached 在组件实例被从页面节点树移除时执行。
error 每当组件方法抛出错误时执行。
初始化阶段: 组件 lifetimes.attached => 页面 onLoad => 组件 pageLifetimes.show => 页面 onShow => 页面 onReady
页面跳转显示: 组件 pageLifetimes.show => 页面 onShow
页面跳转消失: 组件 pageLifetimes => 页面 onHide
销毁阶段: 组件 lifetimes.detached => 页面 onUnload
微信获取用户信息,微信的系统接口:
// 不授权,跳转页面去打开配置手动授权
wx.opensettings({})
wx.getUserInfo({success: function (res) {// 获取成功},fail: function (err) {// 获取失败},
});
// 最新推荐写法(用户授权来获取):
<button open-type="getUserInfo" bindgetuserinfo="getUser">获取用户信息</button>
getUser:function(e){// 这个e里面存储着用户信息
};
微信获取定位信息
wx.chooseLocation({success: function (res) {// 获取成功},fail: function (err) {// 获取失败},
});
微信上传图片
wx.chooseImage({count:9,//数量sizeType:['original','compressed'],// 原图或压缩图片sourceType:['camera','album'],// 相册选择或者拍照success: functon(res){// 成功执行},fail: function(err){// 失败执行},complete: function(){// 完成执行}
})
微信发送请求
在使用 wx.request 等请求网络 api 时,需要遵循:
- 必须是 https 请求
- 在后台必须要设置 服务器域名 业务域名
本地测试:在开发工具中的详情,选中 不校验合法域名
这个选项
wx.request({url: '', // 请求地址data: '', // 数据header: {}, // 请求头method: '', // 请求方式dataType: '', // 请求数据类型responseType: '', // 响应类型success: function (res) {}, // 成功执行fail: function (err) {}, // 失败执行complete: function () {}, // 完成执行
});
微信交互体验 api
wx.showToast({title: '', //标题icon: '', // 图标,loading、success、none
});
微信全局变量
在app.js
文件中定义globalData
字段表示全局变量,其他页面通过const app = getApp()
方法获取全局变量
微信本地存储
设置值:wx.setStorageSync('key', value);
获取值:wx.getStorageSync('key');
微信停止下拉刷新
wx.stopPullDownRefresh()
微信打开手机设置页面
跳转系统微信授权管理页
wx.openAppAuthorizeSetting({success(res) {console.log(res);},fail(err) {},complete() {},
});
微信获取屏幕窗口信息
const windowInfo = wx.getWindowInfo()
微信获取设备信息
const systemSetting = wx.getSystemSetting()
微信获取系统信息
wx.getSystemInfoAsync({success(res) {console.log(res);},
});
或者;
const res = wx.getSystemInfoSync();
console.log(res);
微信触底事件监听
onReachBottom: function(){}
微信上拉刷新
onPullDownRefresh: function(){}
微信右上角分享事件
onShareAppMessage: function(){}
开发技巧
发送短信验证码流程
- 获取手机号
- 校验手机格式
- 生成随机验证码
- 验证码发送到手机上
- 把验证码 + 手机号保留(30s 过期)
css 实现瀑布流
/* 方式一: column-count 方式 */
.box {column-count: 4; /* 显示的列数(几列显示) */column-gap: 10px; /* 每列之间的间隔距离 */
}
.box .item {/* 避免在元素内部断行并产生新列 */break-inside: avoid-column;-webkit-column-break-inside: avoid;
}
微信支付流程
- 登录,获取用户 openId
- 去支付,生成订单(待支付,支付完成)小程序唤起支付
wx.requestPayment
- 用户扫码支付给微信,微信通知后台,后台改状态
更多推荐
小程序开发学习
发布评论