一个小台灯 之 微信小程序开发日志

微信小程序开发日志

小程序只能使用https和后台服务器进行post请求和get请求，使用https的连接需要的微信小程序的后台对域名进行备份。

在备份的时候也只能通过域名，不能通过公网IP备份。

一、基础

微信小程序的一个界面主要分为四个文件

index.json 对微信小程序进行全局配置，设置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 切换页等

index.wxml 相当于HTML文件

index.js JavaScript代码，负责主要的功能

index.wxss 相当于CSS的界面美化功能

1、https/http请求

处理http、https的请求直接使用wx.request方法。

函数里面有几个必须的输入值：

url：请求的地址

method 请求的方式，post还是get

data，一个json文件，post的时候会将这个数据发送给服务器

header请求的头，里面的参数代表了数据的传输内容是json

success 成功的回调函数

fail 请求失败的回调函数

complete 请求完成的回调函数

    wx.request({
      url: 'https://127.0.0.1:8000/api/postApi/', 
      method:'POST', // 请求方式POST
      data: {
        UserID  : "1234567890",//由微信小程序和web进行自动分配
        DeviceID: "1234567890", //由微信小程序和web进行自动分配
        PassWord: "12345678", //由用户设置的账号密码
        Topic   : "test", //由用户设置的账号密码
        payload : "|a=0|", //负载 要发送的具体数据内容
      },
      header: {
        'Content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log(res.data)
      },
      fail :(err) => {
       console.log('request'+err)
      },
      complete: function( res ) { 
        console.log(res.data)
      }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

日志 22.11.21 ——代码重构

代码结构：

目前的微信小程序内，将主要的网络接口和其他的常用的通用接口移动到API的目录下，重新使用API文件对外接口进行包装，

JavaScript中导入 外部文件和方法：

import * as API from '../api/request_api.js'
API.fun()
1
2

在API文件中，需要注意添加export声明：

function fun(){
    ...
}

export {ShowToast, post_request};
1
2
3
4
5

目前的文件结构：

page目录下面包括了主要的三个界面

主界面index，用户打开后直接呈现的界面，界面内是可以直接看到各个设备的信息：