浅尝微信小程序，但指导实习生

要学就用微信原生的，去框架、最新的，并且尽可能干净代码，最大化支持中文命名编程。

简陋的界面配色。没有UI统一风格，研究型项目先打通代码功能吧。:D

先求完成，再求完美。

项目背景

某天同事说需要一个教室管理程序，理解为表单查询。考虑到用户授权关系维护

第一阶段，考虑的微信小程序的云开发。云开发由微信提供远程非关系数据库，奈何绑定的CMS总是用不习惯，界面定制，拖拽式很有点别扭。如下

项目完成了50%的代码和界面交给实习生优化，目前再次上线。采用前后端分离结构。

前端:微信小程序
后端：Express 4.0
CMS: Vue3

CMS管理后台页面目标草图

9.25-9.27任务书

前期目标和饼不明确，写了两次《任务书》。阶段任务：微信小程序真实环境模拟测试、数据采集、明确需求、改进项目。

9.29-10.5任务书

阶段任务：微信小程序改进项目。

目前进度：微信端(30%) 云服务端(10%)

任务周期：

9.28-9.30功能移植转移云函数。数据库的操作、图片上传，做好基础单元测试。测试单一云函数功能。

10.1-10.5 整理项目文档(掘金社区文章管理) ，根据思路提取关键代码段、功能。

多行下拉。WHTML代码段对应的JS代码段。
和云函数进行数据交互。JSON格式样本。

实施重现

上传注意Appid

record页面

room页面

页面文件room.wxml

js 复制代码

<!--pages/room/room.wxml-->
<form bindsubmit="提交表单"  >
  <view class="box" wx:for="{{classroom}}" wx:key="index">
        <text>{{item.name}}</text>
        <ul>
            <li  wx:for="{{item.children}}"  
                wx:for-item="value" 
                wx:key="index" 
                data-classroom="{{value.name}}" 
                bind:tap="跳转详情页"
            >
                {{value.name}}
            </li>
          
        </ul>
    </view>
</form>

room.js源代码：实习生把格式打乱了，短{ "roomId": 11, "name": "301机房" }还是放同一行整整齐齐好

js 复制代码

// pages/room/room.js
const 数据 = {
  classroom:[
    {
        "name": "科技楼",
        "children": [
            { "roomId": 11, "name": "301机房" },
            { "roomId": 12, "name": "405机房" }
        ]
    },
    {
        "name": "后山工厂",
        "children": [
            { "roomId": 21, "name": "工业机器人实训室" },
            { "roomId": 22, "name": "电机拖动实训室" },
            { "roomId": 23, "name": "金工实训区" },
            { "roomId": 24, "name": "机床实训区" }
        ]
    },
    {
        "name": "后山食堂3楼",
        "children": [
            { "roomId": 31, "name": "云网融合实训室(一)" },
            { "roomId": 32, "name": "云网融合实训室(二)" },
            { "roomId": 33, "name": "电子产品设计实训室" },
            { "roomId": 34, "name": "工业机器人实训室" },
            { "roomId": 35, "name": "物联网实训室" }
        ]
    },
    {
        "name": "1号教学楼",
        "children": [
            { "roomId": 41, "name": "601机房" },
            { "roomId": 42, "name": "608机房" },
            { "roomId": 43, "name": "612机房" },
            { "roomId": 44, "name": "620PLC实训室" }
        ]
    },
    {
        "name": "户外",
        "children": [
            { "roomId": 51, "name": "物联网野外实训基地" }
        ]
    }
]
}


const 参数 = {
  data: 数据,
  跳转详情页(e) {
    let url = `/pages/detail/detail?教室=${e.currentTarget.dataset.classroom}`
    wx.navigateTo({url})
  }
}

Page(参数)

常用知识点

1.微信小程序在线后台

这个页面比较难找 mp.weixin.qq.com/

2.设置鼠标滑轮字体缩放

文件→首选项→设置→输入zoom ，配置 Ctrl+鼠标滚动放大缩小代码

3. 个人认证小程序支付30元

4.临时数据采集

可以使用腾讯文档、飞书、问卷星等。