1. 页面生命周期函数：
onLoad(options: Object)：监听页面加载。options是页面参数，可以通过options.xxx来获取传递的参数值。
Page({
onLoad: function(options) {
console.log('页面加载，参数为', options);
},
});
onShow()：监听页面显示。当页面被展示在前台时触发。
Page({
onShow: function() {
console.log('页面显示');
},
});
onReady()：监听页面初次渲染完成。当页面初次渲染完成时触发。
Page({
onReady: function() {
console.log('页面初次渲染完成');
},
});
onHide()：监听页面隐藏。当页面被隐藏到后台时触发。
Page({
onHide: function() {
console.log('页面隐藏');
},
});
onUnload()：监听页面卸载。当页面被销毁时触发。
Page({
onUnload: function() {
console.log('页面卸载');
},
});
- 网络请求：
wx.request(options: Object)：发起网络请求。options是一个对象，用于配置请求的参数，包括url（请求地址）、method（请求方法，默认为GET）、data（请求参数）、header（请求头部）、success（请求成功的回调函数）、fail（请求失败的回调函数）等。
wx.request({
url: 'https://api.example.com/data',
method: 'GET',
data: {
key: 'value'
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log('请求成功', res.data);
},
fail: function(error) {
console.log('请求失败', error);
}
});
wx.downloadFile(options: Object)：下载文件。options是一个对象，用于配置下载的参数，包括url（文件地址）、success（下载成功的回调函数）、fail（下载失败的回调函数）等。
wx.downloadFile({
url: 'https://example.com/image.jpg',
success: function(res) {
console.log('下载成功', res.tempFilePath);
},
fail: function(error) {
console.log('下载失败', error);
}
});
wx.uploadFile(options: Object)：上传文件。options是一个对象，用于配置上传的参数，包括url（上传地址）、filePath（要上传的文件路径）、name（上传文件对应的 key）、formData（上传的额外数据，如表单数据）、success（上传成功的回调函数）、fail（上传失败的回调函数）等。
wx.uploadFile({
url: 'https://api.example.com/upload',
filePath: 'path/to/file',
name
: 'file',
formData: {
key: 'value'
},
success: function(res) {
console.log('上传成功', res.data);
},
fail: function(error) {
console.log('上传失败', error);
}
});
- 界面交互：
wx.showToast(options: Object)：显示消息提示框。options是一个对象，用于配置消息提示框的参数，包括title（提示的内容）、icon（图标，默认为none）、duration（显示时长，单位为毫秒，默认为1500）等。
wx.showToast({
title: '操作成功',
icon: 'success',
duration: 2000
});
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 1500
});
wx.showToast({
title: '出错了',
icon: 'error',
duration: 2000
});
wx.showToast({
title: '警告',
icon: 'warn',
duration: 2000
});
wx.showModal(options: Object)：显示模态对话框。options是一个对象，用于配置模态对话框的参数，包括title（对话框标题）、content（对话框内容）、confirmText（确认按钮的文字，默认为确定）、cancelText（取消按钮的文字，默认为取消）等。
wx.showModal({
title: '提示',
content: '确定要删除吗？',
success: function(res) {
if (res.confirm) {
console.log('用户点击了确定');
} else if (res.cancel) {
console.log('用户点击了取消');
}
}
});
wx.showLoading(options: Object)：显示加载提示框。options是一个对象，用于配置加载提示框的参数，包括title（提示的内容，默认为加载中...）、mask（是否显示透明蒙层，默认为false）等。
wx.showLoading({
title: '加载中...',
mask: true
});
- 数据存储：
wx.setStorageSync(key: String, data: any)：同步方式将数据存储到本地缓存。key是存储的键名，data是要存储的数据。
wx.setStorageSync('key', 'value');
wx.getStorageSync(key: String)：同步方式从本地缓存中获取数据。key是要获取的数据的键名。
var data = wx.getStorageSync('key');
console.log(data);
调用二维码案例
startScan(){
// 调用微信扫描二维码的API
wx.scanCode({
// 扫描成功的回调函数
success: function(res) {
// 获取扫描得到的二维码信息
var qrcodeData = res.result;
// 打印二维码信息到控制台
console.log('扫描结果:', qrcodeData);
// 发起网络请求，将二维码信息上传到服务器
wx.request({
url: 'https://your-server.com/upload',
method: 'POST',
data: {
qrcodeData: qrcodeData
},
success: function(res) {
// 上传成功的回调函数
console.log('上传成功:', res.data);
},
fail: function(res) {
// 上传失败的回调函数
console.log('上传失败:', res.errMsg);
}
});
// 将二维码信息显示在页面上
this.setData({
scanContent: qrcodeData
});
},
// 扫描失败的回调函数
fail: function(res) {
// 显示扫描失败的提示
wx.showToast({
title: '扫描失败',
icon: 'none'
});
}
});
// wx.showToast({
// title: '保存成功!',
// duration: 2000
// })
},
登录页面小案例
// pages/demo6/index.js
Page({
/**
* 页面的初始数据
*/
data: {
credential: '', // 凭证
password: '', // 密码
whitelist: [{ credential: 'tao123', password: 'tao666' }, { credential: 'tao666', password: 'tao123' }]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
// 凭证输入事件处理函数
handleCredentialInput(event) {
console.log(event.detail.value);
this.setData({
credential: event.detail.value
});
},
// 密码输入事件处理函数
handlePasswordInput(event) {
this.setData({
password: event.detail.value
});
},
// 登录按钮点击事件处理函数
handleLogin() {
const credential = this.data.credential;
console.log(credential);
const password = this.data.password;
const whitelist = this.data.whitelist;
//判断账户和密码不能为空!
if(credential==""){
wx.showToast({
title: '账户不能为空',
icon: 'error',
duration: 2000
});
return;
}else if(password==""){
wx.showToast({
title: '密码不能为空',
icon: 'error',
duration: 2000
});
return;
}
// 密码加密
// const encryptedPassword = encryptPassword(password);
// 在这里发送请求至服务器进行验证
// 可以使用 wx.request 方法发送请求
// 假设请求返回的数据中有一个 success 字段表示验证是否成功
var success = false;
const index = whitelist.findIndex((item) => item.credential === credential);
console.log("credential:"+credential);
console.log("index:"+index);
if (index !== -1) {
if(password === whitelist[index].password){
console.log(whitelist[index].password);
success = true;
}else{
success = false;
}
}
if (success) {
// 登录成功，跳转到内部页面
// wx.navigateTo({
// url: '/pages/internalPage/internalPage'
// });
wx.showToast({
title: '登录成功!',
icon: 'success'
});
} else {
// 登录失败，提示用户凭证或密码无效
wx.showToast({
title: '凭证或密码无效',
icon: 'none'
});
}
}
})
<!-- login.wxml -->
<view class="weui-cells weui-cells_form">
<view class="weui-cell">
<view class="weui-cell__hd">
<view class="weui-label">凭证</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" bindinput="handleCredentialInput" placeholder="请输入工号或邮箱" />
</view>
</view>
<view class="weui-cell">
<view class="weui-cell__hd">
<view class="weui-label">密码</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" bindinput="handlePasswordInput" placeholder="请输入密码" type="password" />
</view>
</view>
</view>
<button class="weui-btn weui-btn_primary" bindtap="handleLogin">登录</button>
此处使用的是WeUI的css样式
路径：https://github.com/Tencent/weui-wxss/blob/master/dist/style/weui.wxss
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
