热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

三周学会小程序第七讲:提交问题

截止到上一讲可以支持数据库存储了,所以这一讲开始讲解怎么从小程序发布一个问题并存储到服务器端。下面简单罗列一下本讲的知识点。对了老规矩,文末附源码。对小

640?wx_fmt=png

截止到上一讲可以支持数据库存储了,所以这一讲开始讲解怎么从小程序发布一个问题并存储到服务器端。下面简单罗列一下本讲的知识点。对了老规矩,文末附源码。

  • 对小程序端分模块重构

  • 使用 tabbar 实现多 Tab 切换

  • switchTab 和 navigateTo

  • weui.wxss 引入

  • form 表单提交

  • css 优先级

  • API 工具的封装和校验逻辑

  • 添加 LoginInterceptor 用户校验登录状态和获取用户信息

  • 添加 api/question API 提交问题到服务器端并存储

小程序端

先用一张图描绘一下这一讲的工作

640?wx_fmt=png

如图,登录成功以后进入主页,区分为四个选项卡,首页、通知、礼品和我几个选项卡,所以对前端小程序进行了重构。把 index.js 从 question 启动到最外层,然后分别创建了 gift、notification、profile和question 文件夹用于存放相对应的选项卡的页面内容,同时记得修改 /app.json 里面的 pages 内容。app.json 里面添加如下文件,就可以自动定义页面的选项卡。

{ "tabBar": { "selectedColor": "#3c506f", "list": [ { "navigationBarTitleText": "首页", "pagePath": "pages/question/list", "text": "首页", "iconPath": "images/index-default.png", "selectedIconPath": "images/index-selected.png" }, { "navigationBarTitleText": "通知", "pagePath": "pages/notification/list", "text": "通知", "iconPath": "images/notification-default.png", "selectedIconPath": "images/notification-selected.png" }, { "navigationBarTitleText": "礼品", "pagePath": "pages/gift/list", "text": "礼品", "iconPath": "images/gift-default.png", "selectedIconPath": "images/gift-selected.png" }, { "navigationBarTitleText": "我", "pagePath": "pages/profile/index", "text": "我", "iconPath": "images/me-default.png", "selectedIconPath": "images/me-selected.png" } ] }
}

需要注意的是上面的 pagePath 对应的页面路径一定要存在, navigationBarTitleText 是跳转以后头部显示的名称。 iconPathselectedIconPath 分别是选中前后展示的图标,小编特意选择了一些对应的图片,这个图片直接在http://www.iconfont.cn

这一讲用了两种跳转的方式 switchTabnavigateTo,其中 switchTab 是跳转选项卡的时候用,并且只能用这个方法跳转,而 navigateTo是让页面导航到页面,同时这个方法会记录历史,也就是说你会发现左上角会有一个后退按钮,点击可以回退到历史浏览的页面。如果你不想有这个后退按钮可以使用 redirectTo 进行跳转,这样会覆盖掉之前的访问堆栈。

weui.wxss 是微信官方默认的样式库,没有第三方的漂亮,但是够用即可,直接下载下来放到 /lib/weui.wxss 下面,在需要使用的地方用如下语句引入即可。

@import "../../lib/weui.wxss";

接下来就是小程序端关键的一步,提交表单。这个被小程序组件优化的还是比较简单。直接在 wxml 里面添加 form标签,然后定义 bindsubmit属性指定点击提交绑定的方法即可。同时定义一个 button 绑定提交属性 form-type='submit',这样点击这个按钮的时候,就会自动调用 bindsubmit绑定的方法了,具体代码如下。里面用的 weui-cells__title便是 weui 提供的一些样式,这个直接对着 css 找就可以了。

输入标题 输入提问内容

推荐阅读
  • EasyMock实战指南
    本文介绍了如何使用EasyMock进行单元测试,特别是当测试对象的合作者依赖于外部资源或尚未实现时。通过具体的示例,展示了EasyMock在模拟对象行为方面的强大功能。 ... [详细]
  • Python数据类型6 字典
    字典Python的字典数据类型是基于hash散列算法实现的,采用键值对(key:value)的形式,根据key的值计算value的地址,具有非常快的查取和插入速度。但它是无序的,包 ... [详细]
  • YB02 防水车载GPS追踪器
    YB02防水车载GPS追踪器由Yuebiz科技有限公司设计生产,适用于车辆防盗、车队管理和实时追踪等多种场合。 ... [详细]
  • Java与JSON互转:实现JSON到Java对象及Java对象到JSON的转换
    本文详细介绍了如何在Java中实现JSON数据与Java对象之间的相互转换,包括代码示例和常见问题解决方法。 ... [详细]
  • MySQL锁机制详解
    本文深入探讨了MySQL中的锁机制,包括表级锁、行级锁以及元数据锁,通过实例详细解释了各种锁的工作原理及其应用场景。同时,文章还介绍了如何通过锁来优化数据库性能,避免常见的并发问题。 ... [详细]
  • 本文探讨了如何利用SqlDependency执行复杂的SQL查询,并确保在多线程环境下的安全性与效率。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文详细介绍了在使用Socket进行网络编程时,遇到链接器错误`undefined reference to WSAStartup@8`的解决方案,适用于多种开发环境。 ... [详细]
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • python开发mysql:单表查询&多表查询
    一单表查询,以下是表内容二多表查询,一下是表内容三总结&表创建过程单 ... [详细]
  • 如何恢复CAD中意外丢失的图纸数据
    当使用CAD进行绘图时,因突然断电或其他原因导致计算机关闭可能会造成工作数据的丢失。然而,通过利用CAD软件的自动保存功能,用户通常能够恢复至最近一次自动保存的数据状态。 ... [详细]
  • 详细指南:使用IntelliJ IDEA构建多模块Maven项目
    本文在前两篇文章的基础上,进一步指导读者如何在IntelliJ IDEA中创建和配置多模块Maven项目。通过详细的步骤说明,帮助读者掌握项目模块化管理的方法。 ... [详细]
  • 优化Input Checkbox与Label文本对齐的方法
    本文探讨了在网页设计中,如何有效解决input checkbox与label文字不对齐的问题。通过具体的代码实例和解决方案,帮助开发者实现更加美观的用户界面。 ... [详细]
  • 深入解析IGMP各版本特性及其演进
    本文详细探讨了Internet组管理协议(IGMP)的不同版本,包括IGMPv1的基础功能、IGMPv2的增强特性和IGMPv3的重要改进。特别分析了IGMPv3如何支持特定源组播(SSM)模型,并介绍了各版本之间的主要差异。 ... [详细]
  • 本文详细介绍了 Python 中的 with 语句及其背后的上下文管理器机制,从基本概念入手,通过具体示例和原理分析,帮助读者深入理解这一重要的资源管理工具。 ... [详细]
author-avatar
修魔海的传说
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有