微信小程序编写

采用的开发环境：前端微信官方的开发者工具，后端Django4.0+python。

租用了一个腾讯云的windows服务器，云服务器通过windows自带的mstsc远程连接，Django程序需要部署到上面的IIS。

1.页面跳转（算是最基础的功能）

微信页面间的跳转有三种方式：

wx.navigateTo({ url: '../user/login/login', }) 跳转后可以在页面上点返回，回退到上一页面。

wx.redirectTo({ url: '../user/login/login', }) 不能回退。比如用户注册这种页面适合。

wx.switchTab({ url: '../user/login/login', }) 返回到页面下方导航栏对应的页面。

2. 列表（展示数据）

简单的页面可以一条条写展示数据，但对于大量的数据，优雅的方法是使用列表。

场景：前端发送post请求获取数据，后台返回json数据。前端将json数据转换为json对象，然后以列表的方式展示。

例子：

.js文件：（发送post请求，后端返回数据为json，接收到res.data里面，接收到的数据为[{"youhuiquan": 100}, {"youhuiquan": 200}, {"youhuiquan": 300}, {"youhuiquan": 400}]）

    wx.request( {

      url: 'http://127.0.0.1:8000/wxapi/xxxxxxx/',

      method:"POST",

      data: {         // 传递的参数

        userphone: ***********

    },

      success: ( res )=> {

        console.log(res.data);

        var arrJson = JSON.parse(res.data)

        that.setData({

          list: arrJson, 

        });}

    })

其中var arrJson = JSON.parse(res.data)是将json数据转换为json对象，然后存到list里面。

list要在data里面初始化 list : [].

 .wxml文件（功能是将list展示出来）：

    

            

                金额

                {{item.youhuiquan}}

            

     

效果图为

小tips：1. post请求时，填写的url必须是/结尾，否则会报错。

2. 微信 小程序code的通过wx.login({})获取到的code是一次性的，并且它的有效期为3分钟到24小时。可以根据code进一步去请求用户的openID。

3. 请求用户openID需要你这个小程序的秘钥，这个秘钥需要去微信公众平台-小程序，登录进去获取。

4. JSON.stingify()可以将JSON对象或者数组转换成json格式字符串。JSON.parse()将json格式的字符串，转换成JSON对象或者数组。

3. Django 的时间函数。

import datetime
datetime.datetime.now()

转换格式：

datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")

可以任意删节，如

datetime.datetime.now().strftime("%Y-%m-%d %H:%M")

4. 微信小程序js文件顺序执行。

小程序开发中经常遇到后一个操作依赖前一个操作异步执行结果的情形。虽然JavaScript是单线程语言，但是主线程中的耗时操作通常都被放入任务队列中异步执行，避免阻塞主线程。

如下实现顺序执行：

let SequentialExec=class SequentialExec {
  constructor(func_list) {
      //顺序执行函数列表
      this.func_list = func_list;
      // 计数器
      this.count = 0;
      // 函数执行标志
      this.running = false;
      //函数执行结果
      this.res = null;
      //定时器序号
      this.timer=null;
  }
  /**
   * 启动定时器轮询
   */
  wait(){
    if(!this.timer){
    // 启动定时器轮询next方法
      this.timer=setInterval(this.next,5,this)
    }
  }
  /**
   * 切换运行函数
   * @param {顺序保持类对象} sequence 
   */
  next(sequence) {
       //执行完毕，关闭定时器
      if (sequence.count == sequence.func_list.length) {
        clearInterval(sequence.timer);
        return;
    }
      if (sequence.running == false) {
          try {
              sequence.running = true;
              //运行下一个函数
              sequence.func_list[sequence.count](sequence);
              sequence.count += 1;
              // 异步执行等待操作
              sequence.wait();
          } catch (error) {
              clearInterval(sequence.timer);
              throw error;
          }
      }
  }
}


let f1 = function (sequence) {
  console.log("f1开始执行");
  setTimeout(function () {
    console.log("f1执行完成");
    sequence.running = false;
    sequence.res=1;
  }, 10)
}
let f2 = function (sequence) {
  console.log("f1执行结果",sequence.res)
  console.log("f2开始执行");
  setTimeout(function () {
    console.log("f2执行完成");
    sequence.running=false;
    sequence.res=2;
  }, 30)
}
let f3 = function (sequence) {
  console.log("f2执行结果",sequence.res)
  console.log("f3开始执行");
  setTimeout(function () {
    console.log("f3执行完成");
    sequence.running=false;
  }, 1)
}
let test = function () {
 let sequence=new SequentialExec([f1,f2,f3]);
 sequence.next(sequence);
}

test(); //执行test函数，进行测试。

参考材料：微信小程序JavaScript函数中的异步操作顺序执行_安布奇的博客-CSDN博客_小程序函数执行顺序