微信小程序

1. .js(JavaScript 文件)

  • 用途
    • 前端开发中用于实现页面逻辑、交互效果和数据处理。
    • 在小程序开发中,负责页面的业务逻辑(如数据请求、事件响应)和小程序的生命周期管理。
  • 示例场景
    • 网页中按钮点击事件触发的逻辑。
    • 小程序中从服务器获取数据并渲染到页面。

2. .json(JSON 文件)

  • 用途

    • 存储和传输结构化数据(键值对形式),常用于配置文件或数据交换。
    • 在小程序中,用于配置页面路径、窗口样式、全局设置(如 app.json)或页面级配置(如 page.json)。
  • 示例内容

    json

    复制代码
    {
      "pages": [
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window": {
        "navigationBarTitleText": "小程序示例"
      }
    }

3. .wxml(WeiXin Markup Language,微信标记语言)

  • 用途

    • 微信小程序的页面结构层,类似 HTML,用于描述页面的布局和组件。
    • 通过标签(如 <view><text><image>)和模板语法(如 {``{data}}wx:ifwx:for)搭建页面结构。
  • 特点

    • 基于 XML 语法,专为小程序设计,支持数据绑定和条件渲染。
    • 与 JavaScript 逻辑层分离,通过 WXML 模板引用 JS 中的数据。
  • 示例代码

    wxml

    复制代码
    <view class="container">
      <text>当前时间:{{time}}</text>
      <button wx:if="{{canIUse}}" bindtap="handleTap">点击我</button>
    </view>

4. .wxss(WeiXin Style Sheet,微信样式表)

  • 用途

    • 微信小程序的样式层,类似 CSS,用于定义页面的样式和布局(如颜色、字体、盒模型等)。
    • 支持大部分 CSS 语法,并扩展了 rpx(响应式像素)等小程序特有的单位。
  • 特点

    • 可通过类名(class)或内联样式(style)应用样式。
    • 支持全局样式(app.wxss)和页面级样式(page.wxss),优先级遵循 CSS 规则。
  • 示例代码

    wxss

    复制代码
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx;
      background-color: #f0f0f0;
    }
    
    button {
      color: white;
      background-color: #1aad19;
      margin-top: 30rpx;
    }

总结对比

文件类型 作用领域 核心功能 类比对象
.js 逻辑层 实现交互逻辑和数据处理 JavaScript
.json 配置 / 数据层 存储配置或结构化数据 JSON 格式
.wxml 结构层 定义页面布局和组件结构 HTML
.wxss 样式层 控制页面样式和视觉表现 CSS

这些文件类型共同构成了微信小程序的开发框架,分别负责逻辑、数据、结构和样式,分工明确且协同工作。

一个变量 需要现在js内定义 js内可以定义变量,和函数实现

使用变量时需要先定义

在js下

1定义

2赋值

3动态绑定后显示

使用{{}}可以动态绑定

以下是部分简单功能代码展示

获取用户授权码

授权码只能用一次 每次授权码都是不同的

发送请求功能

这里data就是返回的整体数据

后端得开启服务才能使用此功能

相关推荐
Nan_Shu_6143 小时前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
计算机学姐3 小时前
基于微信小程序的扶贫助农系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
Q_Q5110082856 小时前
python+uniapp基于微信小程序美食点餐系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
OEC小胖胖7 小时前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
mon_star°7 小时前
基于微信小程序高仿背单词消除游戏
游戏·微信小程序·小程序
jingling5557 小时前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
ZeroNews内网穿透7 小时前
新版发布!“零讯”微信小程序版本更新
运维·服务器·网络·python·安全·微信小程序·小程序
molong9317 小时前
Android 应用配置跳转微信小程序
android·微信小程序·小程序
尘似鹤7 小时前
微信小程序学习(二)
学习·微信小程序·小程序
杏花春雨江南7 小时前
微信小程序里 uni.navigateTo 用的多了, 容易报错,
微信小程序·小程序·notepad++