微信小程序：从基础到进阶的全面指南 (详细版)

---

前言

随着移动互联网的发展，用户对于移动应用的需求日益增长。为了满足用户快速、便捷地使用服务的需求，微信小程序应运而生。它是一种无需下载安装即可使用的应用程序，用户只需扫描二维码或搜索名称就能直接启动。微信小程序不仅降低了用户的使用门槛，也为企业提供了一种新的营销和服务渠道。

---

一、基础概念与结构

1. 目录结构

微信小程序的开发基于WXML（WeChat XML）、WXSS（WeChat Style Sheets）和JavaScript三种技术。其基本结构包含以下几个部分：

• app.js：这是小程序的逻辑层文件，负责初始化和配置整个应用。

// app.js
App({
   
  onLaunch: function() {
   
    console.log('小程序启动');
  }
});

• app.json：用于定义页面路径、窗口表现、设置网络超时时间等全局配置。

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

• app.wxss：全局样式表，为所有页面提供默认样式。

/* app.wxss */
page {
   
  background-color: #F0F0F0;
  height: 100%;
}

• 页面文件夹：每个页面由.js（逻辑），.json（配置），.wxss（样式），.wxml（结构）四个文件组成。

<!-- pages/index/index.wxml -->
<view class="container">
  <text>这是一个首页</text>
</view>

// pages/index/index.js
Page({
   
  data: {
   
    message: 'Hello World!'
  },
  onLoad: function () {
   
    console.log('页面加载');
  }
});

2. 操作

• 新建页面：在新建文件夹下面新建page，输入一个文件名字(随意起名字)，名字后面不用加后缀名。
  • 该页面路径自动在app.json文件中把新建的路径添加上去， 所有小程序的页面想要被使用，需要在app.json文件配置后才能使用。
• 小技巧：直接在app.json pages配置项， 手动添加一个路径，自动路径下文件会新建出来。
• 删除页面：一个文件夹删除，需要手动删除app.json配置记录，同时要记得删除上一行后边的逗号。
• 页面需知
  • 小程序同一个目录下面 index.xwss 自动找同名的index.wxml文件。
  • 小程序里面没有 ul 、li、 div 标签。
  • view 相当于html中的div、在小程序中叫组件，把组件当做标签使用。
  • input没有边框线。
  • form默认为行内元素。
  • navigator url="./index/index" 页面转跳，需要点击后才能转跳，相当于是html 里面的 a。

3. 位置

• navigationBar：导航条信息 (在app.json里面)
  • "navigationBarBackgroundColor"："#fff" 只能为十六进制
  • "navigationBarTitleText": "WeChat" 显示的文字
  • "navigationBarTextStyle":"black" white || black
• tabBar
  • color：选项卡字体默认颜色
  • selectedColor：被选中的字体颜色
  • text：每项的文字
  • iconPath：没有点击的时候的图标
  • selectedIconPath：点击后当前的图标路径
  • pagePath：页面路径，必须在app.json Pages属性下面：已经写好的

二、核心组件

1. 视图容器

视图容器组件用于构建页面布局的基本元素。例如，<view>标签用于创建一个块级容器，可以包含其他组件或文本内容。

<!-- WXML 示例 -->
<view class="container">
  <text>这是一个简单的文本示例。</text>
</view>

2. 基础内容

基础内容组件包括文本、图标和图片等视觉元素。下面是一个使用<image>标签加载图片的例子。

<!-- WXML 示例 -->
<view class="example">
  <image src="/path/to/image.png" mode="aspectFit"></image>
</view>

3. 表单组件

表单组件提供输入框、按钮等功能性控件。这里展示了一个简单的登录表单。

<!-- WXML 示例 -->
<form bindsubmit="formSubmit">
  <