目录
一、头像上传
1、选择图片 wx.chooseImage()
其中count未上传的个数
2、上传文件 wx.uploadFile()
在上传文件时要注意：
①文件上传地址的域名要在微信开发平台进行设置
②头部要携带cookie
③filePath 属性是从wx.chooseImage()中获取的，所以这两个API常常在一起使用
④name属性是更改头像接口上传文件的字段名
⑤头部默认为 multipart/form-data 格式
⑥上传地址 url 属性值为接口地址
更改头像：
// 上传图片
wx.chooseImage({
count: 1,
success: (res) => {
console.log(res);
// 更改头像
wx.uploadFile({
header: {
'cookie': wx.getStorageSync('cookie')
},
filePath: res.tempFilePaths[0],
name: 'avatarfile',
url: 'https://showme2.myhope365.com/api/system/user/profile/update/avatar/nos',
success: (res1) => {
console.log(res1);
wx.showToast({
title: '更改成功',
})
},
complete: () => {
getUserInfo().then(res3 => {
this.setData({
userInfo: res3.data.data,
isLoading: false
})
})
}
})
},
fail: () => {
wx.showToast({
icon: "error",
title: '取消更改',
})
this.setData({
isLoading: false
})
}
})二、瀑布流+下拉刷新+触底加载
目标实现效果如下：
下面是talk.js文件
// pages/talk/talk.js
// import { post } from '../../api/api'
import { getTalkList } from '../../api/user'
let app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
// talkList: [],
leftList: [],
rightList: [],
leftHeight: 0,
rightHeight: 0,
// 判断当前页是否加载完成
finishFlag: false,
// 请求页码
pageNum: 1,
// 每页个数
pageSize: 10,
// 判断是否已经加载完了
isEnd: false,
// 触底加载的loading效果
isPageEnd: false,
isLoading: true
},
// 处理数据---瀑布流
initImg(list) {
this.data.finishFlag = false
if (list.length == 0) {
// 当前页加载完成
this.data.finishFlag = true
return
}
let first = list.shift()
wx.getImageInfo({
src: first.coverImgUrl,
success: (res) => {
if (this.data.leftHeight <= this.data.rightHeight) {
this.data.leftList.push(first)
this.data.leftHeight += res.height / res.width
} else {
this.data.rightList.push(first)
this.data.rightHeight += res.height / res.width
}
this.setData({
leftList: this.data.leftList,
rightList: this.data.rightList
})
},
complete: () => {
this.initImg(list)
}
})
},
// 请求论坛列表
getList() {
getTalkList(this.data.pageNum, this.data.pageSize).then(res => {
if (res.data.code == 0) {
// this.initImg(res.data.rows)
// 判断当前是不是最后一页
// 如果是最后一页，就执行最后一次数据处理并将能否下拉的标志取反
if (this.data.pageNum * this.data.pageSize >= res.data.total) {
this.initImg(res.data.rows)
// this.data.isEnd = true
this.setData({
isEnd: true
})
} else {
this.initImg(res.data.rows)
}
// 请求成功之后，loading消失
// this.data.isPageEnd = false
this.setData({
isPageEnd: false,
isLoading: false
})
} else {
wx.showToast({
icon: 'none',
title: '请求失败，请联系管理员',
})
}
wx.stopPullDownRefresh()
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getList()
},
// 进入聊天室
toTalkDetail(e) {
console.log(app.globalData.isLoagin);
console.log(app.globalData.userInfo);
// 点击出现loading效果
wx.showToast({
icon: 'loading',
title: '加载中',
duration: 5000,
})
app.globalData.loginPromise.then(() => {
wx.hideToast()
if (app.globalData.isLoagin) {
wx.navigateTo({
url: '../talkDetail/talkDetail?postsId=' + e.currentTarget.dataset.postsId,
})
} else {
wx.showModal({
title: '未登录，先去登录？',
success: (res) => {
console.log(res.confirm);
if (res.confirm) {
wx.switchTab({
url: '../mine/mine',
})
}
},
fail: (res) => {
console.log(res.cancel);
}
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
// 当前页的内容全部显示完成之后才能再次下拉刷新
if (this.data.finishFlag) {
this.setData({
leftList: [],
rightList: [],
leftHeight: 0,
rightHeight: 0,
pageNum: 1,
isEnd: false
})
this.getList()
} else {
return
}
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
// 当前页的内容全部显示完成之后才能再次加载
if (this.data.finishFlag) {
if (!this.data.isEnd) {
// 触底的loading效果，如果不是最后一页，一触底就显示loading
this.setData({
isPageEnd: true
})
// 页码数+1
this.data.pageNum++
this.getList()
} else {
console.log(1);
wx.showToast({
icon: 'none',
title: '已经最后一页了',
})
}
} else {
return
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})下面是talk.wxml内容，其中<talkBox>为个人的自定义组件
<!--pages/talk/talk.wxml-->
<view class="title">聊天室</view>
<view class='loading' wx:if="{
{isLoading}}">
<van-loading size="30px" vertical color="red">加载中...</van-loading>
</view>
<view wx:else class="talkBox">
<!-- 左 -->
<view class="leftBox">
<view wx:for="{
{leftList}}" wx:key="postsId">
<talkBox item="{
{item}}" bindtap="toTalkDetail" data-posts-id="{
{item.postsId}}"></talkBox>
</view>
</view>
<!-- 右 -->
<view class="rightBox">
<view wx:for="{
{rightList}}" wx:key="postsId">
<talkBox item="{
{item}}" bindtap="toTalkDetail" data-posts-id="{
{item.postsId}}"></talkBox>
</view>
</view>
</view>
<view wx:if="{
{isPageEnd}}" style="text-align: center;margin: 10px 0;">
<van-loading color="red" size="22px">加载中...</van-loading>
</view>三、分包加载
什么是分包
某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。首次访问小程序的时候会加载主包的内容，只有在访问到分包界面的时候，才会去加载分包的内容。
为什么要使用分包
小程序单包大小限制为2M，使用分包最大可以扩展到20M（构建大型APP的时候）
优化首次加载小程序的速度，可以把不需要首次加载的内容放在分包里，可以提升小程序的使用性能（对性能要求比较高的时候）
如何使用分包
目录结构
所有分包的目录结构应该都是平级的。（分包的目录结构不能嵌套）
配置
只需要在app.json中配置即可（和“window”平级）
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/cat/cat",
"pages/dog/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple"
],
"independent": true
}
],分包的限制
分包之间不能相互引用js
主包不能引用分包的js
独立分包
不依赖主包的分包
配置分包的时候加上independent的配置即可声明为独立分包
independent
分包预加载
在路由到某个界面的时候，可以需要加载某个分包的内容，以提升访问这个分包的速度。
在app.json中配置即可
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/cat/cat",
"pages/dog/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple"
],
"independent": true
}
],