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

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

简陋的界面配色。没有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 整理项目文档(掘金社区文章管理) ,根据思路提取关键代码段、功能。

  1. 多行下拉。WHTML代码段 对应的JS代码段。
  2. 和云函数进行数据交互。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.临时数据采集

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

相关推荐
知识分享小能手2 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
Q_Q19632884752 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
孟陬2 小时前
事件驱动 vs 轮询:为什么 Node.js 官方推荐 `fs.watch()` 而非 `fs.watchFile`
node.js
林希_Rachel_傻希希4 小时前
Express 入门全指南:从 0 搭建你的第一个 Node Web 服务器
前端·后端·node.js
韩立学长5 小时前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
亮子AI18 小时前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序
Q_Q51100828519 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆19 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
從南走到北19 小时前
洗车小程序系统
微信小程序·小程序
namehu21 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序