微信小程序 + Python Django知识:
2022-2-26
- 将信息保存至本地
wx.setStorageSync('userinfo', info);像本地的storage中赋值
wx.getStorageSync('userinfo');向本地storage中拿值
可以保存用户的登录状态,即登录一次就好了下次进入小程序不用登录
app.js文件 globalData中的变量是全局变量可以在任意页面引用。
引用方法:
var phone = getApp()
然后给这个全局变量赋值的方法:
app.globalData.phone = …
- 获取用户信息
wx.getUserInfo不能用了
现在用wx.getUserProfile(res){
desc:"用途"
...
}
2022.2.25
- 页面调用栈 (跳转页面用的)
var pages = getCurrentPages(); //getCurrentPages函数获取是按照app.json里的顺序来的
prevPage = pages[pages.length-2];
- 跳转回上一个页面
wx.navigateBack({})
小程序页面生命周期
onLoad(一次)
onShow(只要展示这个页面,就会自动加载)
onReady(一次)
onHide(每次页面隐藏就会自动加载)
onUnload(卸载页面,小程序关闭时)
注:全局app.js里的onLauch()是最打开小程序就会执行的
-
if-else语句
<view wx:if = "{{code}}">text</view> <view wx:elif = "{{code}}">text</view> <view wx:else = "{{code}}">text</view>
2022.2.26
1. 页面传值
1.1 父页面向子页面传值
父页面 :
/pages/xx/xx/
子页面:
onLoad:function(option){
}
1.2子父页面
var pages = getCurrentPages();//获取堆栈信息
var prePage = pages[pages.length-2];将上一个页面的对象page赋值给prePage
//prePage.setData({topicTxt:topicInfo.title});//将值传过去
prePage.setTopicData(topicInfo);//prePage就代表上一个页面的this,调用函数传值
注意:在前端里通过data-xx可以给事件传值
即把前端的点击的值传过去
2. 腾讯云对象存储
- 第一阶段:文件存储
- 文件服务器,将文件存储在某个服务器(目录结构的划分)。
- 第二阶段:出现对象存储
- 文件存储,将文件存储在某个服务器(目录结构的划分)。
- 对象存储,优化文件存储和操作(但不支持目录结构划分)。
- 第三阶段:公有云平台(阿里/腾讯/七牛/亚马逊)
- 文件存储
- 对象存储
- 以上两种我来做,你只需要掏钱
2.1 快速使用
- 注册腾讯云对象存储COS
- 获取sdk源码
- 跟着官方文档来就好了
2022.2.27
1.前端闭包
由于wx.request是异步的,所以要进行闭包。
var dataList = ["a","b","c"]
for(var i in dataList){
(function(data){
wx.request({
url:'xxx'
success:function(res){
console.log(data);
}
})
})(dataList[i])
}
1.2 ListApiViwe 与 ApiView的区别
ListApiViwe 内含get请求
下拉刷新全局与局部配置
app.json enablePullDownRefresh:false
xxx.json enablePullDownRefresh:true
停止下拉刷新动作
wx.stopPullDownRefresh();
2022-3-1
1.轮播图
<swiper autoplay interval="1000" circular indicator-dots indicator-active-color="#0094ff">
<swiper-item>
<image src="https://pic.imgdb.cn/item/6106365d5132923bf85126bd.jpg" />
</swiper-item>
<swiper-item>
<image src="https://pic.imgdb.cn/item/6106367c5132923bf851cc43.jpg" />
</swiper-item>
<swiper-item>
<image src="https://pic.imgdb.cn/item/610636995132923bf8525e03.jpg" />
</swiper-item>
</swiper>
2.js路径
- js不能直接定义一个路径了就直接引用,必须要models.exports
const rootUrl = 'http://127.0.0.1:8000/api';
module.exports = {
MsgCode: rootUrl + "/msg/",
Login: rootUrl + "/login/",
Credential: rootUrl + "/oss/credential/",
News: rootUrl + "/news/",
NewsDetail: rootUrl + "/news/", // 后面加ID
Comment:rootUrl + '/comment/',
CommentFavor: rootUrl + '/comment/favor/',
Follow: rootUrl + '/follow/',
}
3.倒序返回前十条数据
models.News.objects.all().order_by('id)[0:10]
4.滑到底部处理
- onReachBottom
2022-3-2
1.Python models数据库
-
处理二级评论
- 获得二级评论
group_by_second_depth = news_comment_queryset.filter(depth=2, reply__in=first_depth_dict.keys())
- 获得所有的二级评论之后,要进行分组处理,以及聚合,即.values(条件).annotate(条件)
group_by_second_depth = news_comment_queryset.filter(depth=2, reply__in=first_depth_dict.keys()).values( 'reply_id').annotate(max_id=Max('id'))
2022-3-4
1.border
- border-width
- border-style
- none 定义无边框。
- hidden与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
- dotted定义点状边框。在大多数浏览器中呈现为实线。
- dashed定义虚线。在大多数浏览器中呈现为实线。
- solid定义实线。
- double定义双线。双线的宽度等于 border-width 的值。
- groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
- ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
- inset定义 3D inset 边框。其效果取决于 border-color 的值。
- outset定义 3D outset 边框。其效果取决于 border-color 的值。
- inherit规定应该从父元素继承边框样式。
- none 定义无边框。
- border-color
底部实线
.demo-view {
border-bottom: 2rpx solid red;
}
线框
.demo-view {
width: 100rpx;
height: 50rpx;
border: 2rpx solid black;
}
圆角线框
.demo-view {
width: 100rpx;
height: 50rpx;
border: 2rpx solid black;
border-radius: 25rpx;
}
2022-3-7
python-Django
-
全局变量
- global
2022-3-17
微信小程序通过点击事件向页面传值
- 在点击事件处加上data-(名称) = “待传的值”
局部修改列表的值
用于多个输入框显示与隐藏
var _show = that.data.show;
_show[index-1].show = !_show[index-1].show
_show[index-1].note = that.data.note
that.setData({
show:_show
})
//这里注意setData,最好用that。用this可能前端不会实时渲染,
2022-3-22
补充没记录的
拍照相关
- camera组件拍照
<camera device-position="back" flash="off"style="width: 100%; height: 300px;"></camera>
- 获取拍照的信息
wx.createCameraContext()
- 转化为base64格式
- 直接调用getPicFromcenavm
function getPicFromcenavm(ctx){
return new Promise(function(resolve,reject){
ctx.takePhoto({
quality:'low',
success:(res)=>{
//resolve(res.tempImagePath)
getBase64(res.tempImagePath).then(function(res2){
resolve(res2.data);
});
}
})
})
function getBase64(tempImagePath){
return new Promise(function (resolve,reject){
wx.getFileSystemManager().readFile({
filePath:tempImagePath,
encoding:'base64',
success:function(data){
resolve(data);
}
})
})
}
}
/**
*
*/
module.exports = {
getPicFromcenavm:getPicFromcenavm
}
- 转化示例
var comm = require('../../utils/Base64.js')//这是上面那个函数的路径
getBase64: function () {
var that = this;
const ctx = wx.createCameraContext();
comm.getPicFromcenavm(ctx).then(res => {
console.log(res)
that.setData({
ImageOld:res
})
})
},
-
小程序显示base64格式图片
<image src="data:image/png;base64,{{ImageOld}}"></image>
这只是本人学习的一个记录,没有较人性化的阐述,望海涵