09-一些零碎知识

globalData

使用微信小程序工具创建应用的时候，App.js默认会创建一个变量，叫globalData

globalData就是让我们存放整个应用的公共数据，例如我在App.js中存放了一个手机号，那其他页面如何获取或者改变这个电话呢？代码如下

App.js

App({
  globalData: {
    phone:"88888888"
  }
})

home.js

// 在整个页面获取App这个对象
var app = getApp()
Page({
    onLoad: function (options) {
        // 页面加载时打印一次，然后修改一下
        console.log(app.globalData.phone);
        app.globalData.phone = "99999999"
    },

    onShow: function () {
        // 每次页面刷新时就会打印一次
        console.log(app.globalData.phone);
    }
})

setStorageSync

该函数可以将数据保存在本地

存值

wx.setStorageSync("phone": phone)

取值

var phone = wx.getStorageSync("phone")

wx.removeStorageSync('phone')移除数据

open-type

微信小程序button组件open-type属性

open-type调用的是小程序已有的功能，如下图所示：

子父页面传值

父传子-父页面

/pages/xx/xxx?id=1

父传子-子页面

onLoad:function(option){
	
}

子传父-子页面

// 先获取所有页面，然后从当前页面定位到上一页，获取对象，直接调用setData
var pages = getCurrentPages();
var prevPage = pages[pages.length-2];
// prevPage.setData({ topicText:topicInfo.title });

获取用户头像，微信昵称等信息

wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })

以前的getUserInfo现在只能获得匿名或者空信息。该函数不能在页面生命周期函数中调用，即不能自主触发，一定要用户点了确认授权才行。

另外页面端需要这样使用，这是因为，有的机型可能不能很好触发授权弹窗，最好配合open-type使用

<button class="start-practice" open-type="getUserProfile" catchtap="bindGetUserInfo">
</button>

bindGetUserInfo(res){
  wx.getUserProfile({
    desc:'正在获取',//不写不弹提示框
    success:function(res){
      app.globalData.userInfo=res.userInfo //存储用户信息
      wx.showToast({
          icon: 'none',
          title: '授权成功',
          duration: 1000
       })
    },
    fail:function(err){
      console.log("获取失败: ",err)
    }
  })
},

进度条组件

<progress percent="{{percent2}}" activeColor="#DC143C" ></progress>

修改data中的局部数据

修改某一个进度条的显示长度

<view>-----案例------</view>
<view>点击按钮完成，将图片1的进度条更新为80%</view>
<view wx:for="{{imageList}}">
  <view>{{item.title}}</view>
  <progress percent="{{item.percent}}"  ></progress>
</view>

<button bindtap="changePercent" >点击</button>

data: {
    percent1:20,
    percent2:50,
    imageList:[
      {id:1,title:"图片1",percent:20},
      { id: 1, title: "图片2", percent: 30 },
      { id: 1, title: "图片3", percent: 60 },
    ]
  },
  changePercent:function(){
    // 方式1：错误
    /*
    this.setData({
      imageList[0].person: 80
    });
    */
    
    // 方式2：可以，由于需要全部修改，所以性能差。
    /*
    var dataList = this.data.imageList;
    dataList[0].percent = 80;
    this.setData({
      imageList: dataList
    });
    */
    
    // 方式3：推荐
    var num = 2;
    this.setData({
      ["imageList[0].percent"]:80,
      ["imageList[" + num + "].percent"]: 90,
      ["imageList[1].title"]:"突突突突突"
    })

前端闭包

先来个案例演示

在这个案例中，小程序连续反了三个请求，后端响应请求，小程序在请求回响之后打印当前序号

var dataList = ["alex", "changxin", "cck"]
for (var i in dataList) {
  wx.request({
    url: 'http://127.0.0.1:8000/api/test',
    success: function (res) {
      console.log(i); // 打印当前序列号
    }
  })
}

def test(request):
    import time
    from django.shortcuts import HttpResponse
    time.sleep(5)
    return HttpResponse('ok~')

微信开发工具控制台的打印

打印了三个2，即最后一个序号，这是因为小程序是异步请求，三个请求一下子就发出去了，i变成了2，然后后端的响应才来，才调用回调函数，所以打印出来的全是2。

这在处理文件上传的话肯定是不行的，我们需要对文件上传成功的做处理，如果不处理这个麻烦的点，那回调函数始终处理的都是最后一个文件。

前端闭包和python中的闭包原理一样，内部函数引用外部函数变量，会在内存中单独生成一个变量，与外部函数的所有数据隔绝开来

var dataList = ["alex", "changxin", "cck"]
for (var i in dataList) {
  (function(data){
    wx.request({
      url: 'http://127.0.0.1:8000/api/test',
      success: function (res) {
        console.log(data);
      }
    })
  })(dataList[i])
}