【微信小程序知识记录】

微信小程序 + 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

1. 页面调用栈 (跳转页面用的)

var pages = getCurrentPages();	//getCurrentPages函数获取是按照app.json里的顺序来的
prevPage = pages[pages.length-2];

1. 跳转回上一个页面

wx.navigateBack({})

小程序页面生命周期
onLoad（一次）
onShow（只要展示这个页面，就会自动加载）
onReady（一次）
onHide（每次页面隐藏就会自动加载）
onUnload(卸载页面，小程序关闭时)

注：全局app.js里的onLauch（）是最打开小程序就会执行的

2. 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规定应该从父元素继承边框样式。
• 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>
  

这只是本人学习的一个记录，没有较人性化的阐述，望海涵