小程序开发学习

小程序开发

1.1 小程序环境搭建

1. 进入微信公众平台，找到 appid 保存
2. 打开微信开发者工具，创建项目，填写 appid
3. 云服务自己开发项目没有必要

1.2 全局配置

app.json： pages 页面配置，window 顶部导航栏配置，tabbar 底部菜单配置。

1.3 小程序开发注意点

组件：

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:'路径'})
通过标签跳转页面：
跳转页面传参通过 拼接路径传递参数
接收页面跳转的参数： 在 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里面存储着用户信息
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

微信获取定位信息

wx.chooseLocation({
    success: function (res) {
        // 获取成功
    },
    fail: function (err) {
        // 获取失败
    },
});
1
2
3
4
5
6
7
8

微信上传图片

wx.chooseImage({
    count:9,//数量
    sizeType:['original','compressed'],// 原图或压缩图片
    sourceType:['camera','album'],// 相册选择或者拍照
    success: functon(res){
        // 成功执行
    },
    fail: function(err){
        // 失败执行
    },
    complete: function(){
        // 完成执行
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

微信发送请求

在使用 wx.request 等请求网络 api 时，需要遵循：

1. 必须是 https 请求
2. 在后台必须要设置 服务器域名 业务域名

本地测试：在开发工具中的详情，选中 不校验合法域名 这个选项

wx.request({
    url: '', // 请求地址
    data: '', // 数据
    header: {}, // 请求头
    method: '', // 请求方式
    dataType: '', // 请求数据类型
    responseType: '', // 响应类型
    success: function (res) {}, // 成功执行
    fail: function (err) {}, // 失败执行
    complete: function () {}, // 完成执行
});
1
2
3
4
5
6
7
8
9
10
11

微信交互体验 api

wx.showToast({
    title: '', //标题
    icon: '', // 图标，loading、success、none
});
1
2
3
4

微信全局变量

在app.js文件中定义globalData字段表示全局变量，其他页面通过const app = getApp()方法获取全局变量

微信本地存储

设置值：wx.setStorageSync('key', value);
获取值：wx.getStorageSync('key');
1
2

微信停止下拉刷新

wx.stopPullDownRefresh()

微信打开手机设置页面

跳转系统微信授权管理页

wx.openAppAuthorizeSetting({
    success(res) {
        console.log(res);
    },
    fail(err) {},
    complete() {},
});
1
2
3
4
5
6
7

微信获取屏幕窗口信息

const windowInfo = wx.getWindowInfo()

微信获取设备信息

const systemSetting = wx.getSystemSetting()

微信获取系统信息

wx.getSystemInfoAsync({
    success(res) {
        console.log(res);
    },
});
或者;
const res = wx.getSystemInfoSync();
console.log(res);
1
2
3
4
5
6
7
8

微信触底事件监听

onReachBottom: function(){

}
1
2
3

微信上拉刷新

onPullDownRefresh: function(){

}
1
2
3

微信右上角分享事件

onShareAppMessage: function(){

}
1
2
3

开发技巧

发送短信验证码流程

1. 获取手机号
2. 校验手机格式
3. 生成随机验证码
4. 验证码发送到手机上
5. 把验证码 + 手机号保留（30s 过期）

css 实现瀑布流

/* 方式一： column-count 方式  */
.box {
    column-count: 4; /* 显示的列数（几列显示） */
    column-gap: 10px; /* 每列之间的间隔距离 */
}
.box .item {
    /* 避免在元素内部断行并产生新列 */
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
}
1
2
3
4
5
6
7
8
9
10

微信支付流程

1. 登录，获取用户 openId
2. 去支付，生成订单（待支付，支付完成）小程序唤起支付wx.requestPayment
3. 用户扫码支付给微信，微信通知后台，后台改状态