微信小程序基础入门
生命周期
js
// pages/function.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
/**
* 朋友圈分享
*/
onShareTimeline() {
}
})page声明
js部分
js
// index.js
// 获取应用实例
const app = getApp()
let _this;
Page({
data: {
active:0,
tabList:[]
},
onLoad(e) { // 生命周期函数
_this = this;
_this.getGoodsList()
},
goDetail: function (e) {
let id = e.currentTarget.dataset.id
wx.navigateTo({
url: '/pages/detail/detail?id=' + id
})
},
getGoodsList: function () {
wx.showLoading({
title: '加载中'
})
wx.$request({
url: '/goods/getListByPage',
method: 'POST',
data: {
categoryId:_this.data.curCategoryId,
currentPage:_this.data.currentPage,
pageSize:_this.data.pageSize,
}
}).then(res => {
if (_this.data.isAccumulation){ //是否累加
_this.setData({
goodsList: _this.data.goodsList.concat(res.data.rows), //累加list
})
}else{
_this.setData({ //覆盖数据
goodsList: res.data.rows
})
}
// 判断数据是否请求完毕
if (res.data.total <= _this.data.goodsList.length){
_this.setData({
isEnd: true
})
}
_this.splitGoodsList()
// 隐藏加载框
wx.hideLoading({})
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
_this.setData({
isAccumulation: false, //累加数据
currentPage: 1,
isEnd : false
});
this.getGoodsList();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
if (_this.data.isEnd){
return
}
_this.setData({
isAccumulation: true, //累加数据
currentPage: _this.data.currentPage+1
});
this.getGoodsList();
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
return {
title: '麦子鞋城，各种篮球鞋，跑步鞋，运动鞋，AJ，耐克，阿迪，NB，椰子鞋，一手货源，质量保证'
}
},
onShareTimeline: function (res) {
return {
title: '麦子鞋城，各种篮球鞋，跑步鞋，运动鞋，AJ，耐克，阿迪，NB，椰子鞋，一手货源，质量保证'
}
}
})wxml
html
<view class="main">
<view wx:for-item="item" bindtap="goDetail" data-id="{{item.id}}" wx:key="*this" wx:for="{{tabList}}">
{{item.categoryName}}
</view>
</view>引入json文件数据
创建/mock/data.js 开头加上 export default
js
export default [
{
"name":"123"
}
]在pages页面引入
js
import data from "../../mock/data";图片相关
显示本地图片
html
<image src="/img/1.png"></image>加载本地图片成base64
加载多个本地图片，等待图片加载完毕之后才执行后面的动作
vue
async loadLocalImages() {
const images = [
'/img/1.png',
'/img/2.png'
];
try {
let str = ""
const promises = images.map((path) => this.loadAndConvertImage(path));
const results = await Promise.all(promises);
results.forEach(item => {
str = sss.replace(item.key,item.value)
})
this.setData({
str: str
});
} catch (error) {
console.error('加载图片失败:', error);
}
},
async loadAndConvertImage(filePath) {
const fs = wx.getFileSystemManager();
return new Promise((resolve, reject) => {
fs.readFile({
filePath: filePath,
encoding: 'base64', // 使用 base64 编码
success: (res) => {
const base64Data = res.data;
let s = `<img src="data:image/png;base64,${base64Data}" />`
resolve({key:filePath,value:s});
},
fail: (err) => {
reject(err);
}
});
});
},选取相册图片转base64
html
imgToBase64(filePath) {
return new Promise((resolve, reject) => {
let baseFormat = 'data:image/png;base64,'
let base64 = wx.getFileSystemManager().readFileSync(filePath, 'base64')
resolve(baseFormat + base64)
})
}
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: async (res)=> {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
let base64Image = await that.imgToBase64(tempFilePaths[0])
console.log(base64Image)
}
})