文章目录
前言
随着移动互联网的发展，用户对于移动应用的需求日益增长。为了满足用户快速、便捷地使用服务的需求，微信小程序应运而生。它是一种无需下载安装即可使用的应用程序，用户只需扫描二维码或搜索名称就能直接启动。微信小程序不仅降低了用户的使用门槛，也为企业提供了一种新的营销和服务渠道。
一、基础概念与结构
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!'
},
onl oad: 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">
<