微信小程序

最新推荐文章于 2024-10-14 20:46:56 发布

原创最新推荐文章于 2024-10-14 20:46:56 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了微信小程序的基础知识，包括app.json文件的配置方法及其作用，同时展示了WXML中HTML、CSS和JS的使用实例，以及如何通过JS实现表单提交功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚接触微信小程序，现在处于初学者状态，下面就给大家列举一些我在写程序是感觉重要的一些内容！

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，

小程序配置 app.json

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

 "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }

WXML 模板

网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

这个是我做的评教系统登录页面

下面是我在做小程序时用到的js代码

 formSubmit:function(e){
    console.log(e.detail.value);
    wx.request({
      url: 'https://www.lishuming.top/pj/index.php/student/api/login', //仅为示例，并非真实的接口地址
      data: {
       username:e.detail.value.no,//获取学号
       password:e.detail.value.pwd,//获取密码
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)//控制台输出获取到的数据
        wx.setStorage({
          key: "student",
          data:res.data
        });
        wx.redirectTo({
          url: '../teachers/teachers',//当点击登录时页面跳转路径
        })
      }