知识概述

微信小程序开发涉及多个方面的知识，以下是详细说明：

一、开发前的准备

1. 账号注册与开发环境搭建
   • 首先，需要在微信公众平台注册一个小程序账号。这个账号用于管理小程序的基本信息、发布版本等操作。
   • 安装微信开发者工具，它是开发微信小程序的专用工具。可以从微信官方网站下载适合自己操作系统的版本。该工具提供了代码编辑、调试、预览等功能，方便开发者进行小程序开发。
2. 熟悉开发文档
   • 微信官方提供了详细的小程序开发文档。这些文档涵盖了小程序开发的各个方面，包括框架、组件、API等内容。在开发前，需要仔细阅读并熟悉这些文档，以便更好地利用微信小程序提供的各种功能。

二、小程序框架知识

1. 架构概述
   • 微信小程序采用了MVVM（Model - View - ViewModel）架构。Model层负责数据存储，View层是用户界面，ViewModel层用于数据绑定和事件处理。这种架构使得数据和视图分离，方便开发者进行维护和更新。
   • 小程序的页面由wxml（类似HTML，用于构建页面结构）、wxss（类似CSS，用于样式设计）和js（用于逻辑处理）文件组成。
2. 页面路由与生命周期
   • 小程序的页面路由管理着页面之间的跳转。它有多种跳转方式，如navigateTo（保留当前页面，跳转到应用内的某个页面）、redirectTo（关闭当前页面，跳转到应用内的某个页面）等。
   • 每个小程序页面都有自己的生命周期函数，例如onLoad（页面加载时触发）、onShow（页面显示时触发）、onHide（页面隐藏时触发）等。这些生命周期函数可以用于初始化数据、请求网络数据、更新页面状态等操作。

三、小程序组件知识

1. 常用组件介绍
   • 视图容器组件
     • view：类似于HTML中的div，是一个块级容器，用于布局和包裹其他组件。例如，可以用它来划分页面的不同区域。
     • scroll - view：提供滚动功能，当内容超出容器范围时，可以通过滚动来查看全部内容。常用于长列表或者内容较多的区域。
   • 基础内容组件
     • text：用于显示文本内容，支持长按选中等基本的文本操作。可以通过样式设置文本的颜色、大小等属性。
     • image：用于展示图片。可以设置图片的路径、模式（如缩放模式、裁剪模式）等属性。
2. 组件属性与事件
   • 每个组件都有自己的属性，这些属性用于控制组件的外观和行为。例如，image组件的src属性用于指定图片的来源路径，width和height属性用于设置图片的尺寸。
   • 组件还可以触发事件，如bindtap事件（当用户点击组件时触发）。开发者可以在js文件中定义事件处理函数，来响应这些事件。例如，当用户点击一个按钮（button组件）时，可以触发一个函数来执行登录、提交表单等操作。

四、小程序API知识

1. 网络请求API
   • 小程序通过wx.request API来发送网络请求。开发者可以使用这个API向服务器获取数据或者提交数据。例如，可以请求一个接口来获取商品列表信息，或者提交用户的订单信息。在请求时，需要设置请求的URL、请求方法（如GET、POST）、请求头和请求数据等参数。
2. 用户信息API
   • 小程序可以获取用户的基本信息，如wx.getUserInfo API。不过，由于隐私保护等原因，获取用户信息的方式有所变化。现在需要用户主动授权后，才能获取更详细的信息。这些信息可以用于个性化服务、用户登录等场景。
3. 本地存储API
   • wx.setStorageSync和wx.getStorageSync等API用于本地存储。可以将一些小型的数据，如用户的设置偏好、登录凭证等存储在本地，方便下次使用。这种本地存储方式类似于浏览器的localStorage，但在小程序中有自己的存储规则和限制。

五、小程序的调试与发布

1. 调试方法
   • 在微信开发者工具中，可以使用调试器来检查代码中的错误。调试器提供了控制台（可以查看日志信息）、元素检查（查看页面结构和样式）、网络检查（查看网络请求情况）等功能。
   • 还可以在真机上进行调试，通过扫描开发者工具提供的二维码，将小程序安装到手机上进行测试，这样可以更好地发现一些在模拟器中无法发现的问题，如手机性能相关的问题。
2. 发布流程
   • 当小程序开发完成并经过测试后，需要在微信公众平台提交审核。审核人员会根据微信小程序的相关规则，如内容合规性、功能完整性等进行审核。
   • 审核通过后，就可以将小程序发布到微信小程序商店，供用户搜索和使用。发布后，还可以根据用户反馈和业务需求对小程序进行更新和维护。

语法解析

微信小程序是一套用于构建微信小程序的框架，它包含了一系列的语法和规则，用于描述小程序的结构、样式、行为和配置。以下是对微信小程序语法的详细解析：

一、WXML（WeiXin Markup Language）

WXML是微信小程序的标记语言，类似于HTML，用于描述小程序的结构。它包含标签、属性和事件等元素。

1. 数据绑定：

   • 使用双花括号{{}}进行数据与模板的绑定。例如，<view>{{message}}</view>，其中message是页面数据中的一个变量。
   • 组件属性也可以使用数据绑定。例如，<view id="item-{{id}}"></view>，其中id是页面数据中的一个变量。

2. 条件渲染：

   • 使用wx:if、wx:elif和wx:else进行条件渲染。当表达式的值为真时，渲染对应的代码块。例如，<view wx:if="{{condition}}">条件为真时显示的内容</view>。
   • 也可以使用hidden属性进行条件渲染，但它是通过控制元素的显示与隐藏来实现的，而不是真正地移除或添加元素。例如，<view hidden="{{condition}}">条件为真时隐藏的内容</view>。

3. 列表渲染：

   • 使用wx:for进行列表渲染，通过遍历数组来重复渲染组件。例如，<view wx:for="{{array}}" wx:key="id">{{item.message}}</view>，其中array是页面数据中的一个数组，item是数组中的当前元素，id是元素的唯一标识符。

4. 事件绑定：

   • 使用bind关键字进行事件绑定。例如，<button bindtap="tapHandler">点击我</button>，其中tapHandler是事件处理函数的名称。

二、WXSS（WeiXin Style Sheet）

WXSS是微信小程序的样式表语言，类似于CSS，用于描述小程序的样式。

1. 尺寸单位：

   • WXSS引入了响应式长度单位rpx，可以根据屏幕宽度进行自适应。例如，在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，即1rpx=0.5px=1物理像素。

2. 样式导入：

   • WXSS支持样式导入功能，可以使用@import语句导入外部样式表。例如，@import "common.wxss";。

3. 选择器：

   • WXSS支持多种选择器，如元素选择器、类选择器、ID选择器等。但需要注意的是，小程序不支持通配符*选择器。

三、JavaScript

JavaScript在微信小程序中用于描述小程序的交互逻辑，包括数据处理、事件响应等。

1. 页面构造器Page：

   • 使用Page函数来注册一个页面，并指定页面的初始数据、生命周期回调、事件处理函数等。例如：

Page({data: {message: 'Hello, Mini Program!'},onLoad: function() {// 页面加载时触发},changeMessage: function() {// 修改消息内容this.setData({message: 'New Message'});}
});

2. 全局数据：

   • 在App函数中定义的全局数据可以在各个页面中通过getApp()函数获取到。例如，appData = getApp(); console.log(appData.globalData);。

3. 事件处理：

   • 在WXML中绑定的事件会在对应的JavaScript文件中找到相应的事件处理函数进行处理。例如，<button bindtap="tapHandler">点击我</button>对应的事件处理函数为tapHandler。

四、JSON

JSON在微信小程序中用于描述小程序的配置信息，包括页面路径、窗口样式等。

1. 页面配置：
   • 在app.json文件中配置小程序的页面路径、窗口样式等信息。例如：

{"pages": ["pages/index/index","pages/about/about"],"window": {"navigationBarTitleText": "My Mini Program"}
}

2. 组件配置：
   • 在页面的*.json文件中可以配置该页面的组件信息、样式等。例如，在index.json文件中配置页面的样式信息。

综上所述，微信小程序语法包括WXML、WXSS、JavaScript和JSON四个部分，它们共同构成了微信小程序的结构、样式、交互和配置等方面的内容。

WXML 标签

WXML（WeiXin Markup Language）是微信小程序的标记语言，它类似于HTML，但有一些专为微信小程序设计的特性和标签。WXML主要用于描述微信小程序的页面结构。

以下是一些常见的WXML标签及其用途：

1. 视图容器标签

   • <view>：一个通用的容器标签，类似于HTML中的<div>。
   • <scroll-view>：可滚动的视图容器。
   • <swiper>：滑块视图容器，用于实现轮播图效果。
   • <swiper-item>：仅在<swiper>组件中有效，表示滑块视图容器中的每一项。

2. 基础内容标签

   • <text>：文本标签，用于显示文本内容。
   • <rich-text>：富文本标签，用于显示富文本内容。
   • <icon>：图标标签，用于显示图标，通常配合type属性使用。

3. 表单相关标签

   • <input>：输入框标签，用于接收用户输入。
   • <textarea>：多行输入框标签。
   • <button>：按钮标签，用于触发事件。
   • <checkbox>：多选框标签。
   • <radio>：单选框标签。
   • <picker>：选择器标签，用于从预定义的数据集中选择一项。
   • <slider>：滑动选择器标签，用于选择一个范围内的值。
   • <switch>：开关选择器标签，用于表示两种状态之间的切换。

4. 导航标签

   • <navigator>：页面导航标签，用于跳转到其他页面。

5. 媒体标签

   • <image>：图片标签，用于显示图片。
   • <video>：视频标签，用于播放视频。
   • <audio>：音频标签，用于播放音频（但在微信小程序中不常用，通常使用<video>组件播放音频）。

6. 其他标签

   • <canvas>：画布标签，用于绘制图形。
   • <map>：地图标签，用于显示地图。
   • <web-view>：用于显示网页内容的标签（但需要注意，小程序中的<web-view>组件需要在app.json中配置域名白名单）。

WXML标签可以嵌套使用，以构建复杂的页面结构。同时，WXML支持数据绑定和事件处理，这使得开发者可以轻松地实现动态页面和交互功能。

在使用WXML时，开发者需要注意以下几点：

• 标签名是大小写不敏感的，但推荐使用小写。
• 标签的属性名是大小写敏感的，必须使用小写。
• 某些标签具有特定的属性和事件，开发者需要参考微信小程序官方文档来了解这些属性和事件的具体用法。

核心JS语法

微信小程序的核心JavaScript部分主要涉及页面的逻辑处理、数据绑定、事件处理以及与微信小程序的API进行交互。在微信小程序中，每个页面通常都有一个对应的.js文件，该文件包含了页面的逻辑代码。

以下是一些微信小程序核心JavaScript的关键点：

1. 页面配置与生命周期

每个页面的.js文件中，通常会有一个Page函数的调用，用于定义页面的初始数据、生命周期函数、事件处理函数等。

Page({data: {// 页面的初始数据},onLoad: function(options) {// 生命周期函数--监听页面加载// options参数包含了打开当前页面路径中的参数},// 其他生命周期函数，如onReady、onShow、onHide、onUnload等// 事件处理函数// 其他自定义函数
});

2. 数据绑定

页面的数据通过data对象进行定义，然后在WXML模板中使用双大括号{{ }}进行数据绑定。当数据发生变化时，页面会自动更新。

// 在Page的data对象中定义数据
data: {message: 'Hello, World!'
}

<!-- 在WXML模板中使用数据绑定 -->
<text>{{message}}</text>

3. 事件处理

在WXML模板中，可以为组件绑定事件处理函数。当事件发生时，对应的事件处理函数会在页面的JavaScript文件中被调用。

<!-- 在WXML模板中绑定点击事件 -->
<button bindtap="handleTap">Click Me</button>

// 在Page中定义事件处理函数
handleTap: function() {// 处理点击事件的逻辑wx.showToast({title: 'Button Clicked!',icon: 'success'});
}

4. 微信小程序API调用

微信小程序的JavaScript代码可以调用微信提供的API，以实现各种功能，如网络请求、本地存储、用户授权等。

wx.request({url: 'https://example.com/api', // 请求的接口地址data: {// 请求的参数},success: function(res) {// 请求成功的回调函数console.log(res.data);},fail: function(err) {// 请求失败的回调函数console.error(err);}
});

5. 模块化

微信小程序支持使用ES6模块语法进行模块化开发。可以将常用的功能封装成模块，然后在需要的地方引入。

// utils.js - 定义一个模块
function add(a, b) {return a + b;
}module.exports = {add: add
};

// 在其他文件中引入模块
const utils = require('../../utils/utils.js');Page({// ...someFunction: function() {const result = utils.add(1, 2);console.log(result); // 输出3}// ...
});

6. 全局状态管理

对于复杂的应用，可能需要使用全局状态管理来管理应用的状态。微信小程序没有内置的状态管理工具，但可以使用第三方库（如Redux、MobX等）或自己实现一个简单的全局状态管理方案。

注意事项

• 避免在页面的onLoad或onReady等生命周期函数中执行耗时操作，以免影响页面加载性能。
• 合理使用微信小程序的API，注意API的调用频率和限制。
• 保持良好的代码风格和结构，有助于提高代码的可读性和可维护性。

核心Api

微信小程序的API非常丰富，涵盖了网络请求、界面交互、用户信息、媒体操作、地理位置、文件操作、数据缓存、WebSocket通信等多个方面。以下是一些常用的微信小程序API，以表格形式展示：

API类别	API名称	描述
网络请求	wx.request	发起网络请求
	wx.uploadFile	上传文件
	wx.downloadFile	下载文件
界面交互	wx.showToast	显示消息提示框
	wx.showModal	显示模态对话框
	wx.showLoading	显示加载框
	wx.hideLoading	隐藏加载框
	wx.showActionSheet	显示操作菜单
	wx.setNavigationBarTitle	设置导航栏标题
	wx.setNavigationBarColor	设置导航栏颜色
用户信息	wx.login	登录
	wx.checkSession	检查登录态是否过期
	wx.getUserInfo	获取用户信息
媒体操作	wx.chooseImage	从相册或相机中选择图片
	wx.previewImage	预览图片，支持多张图片预览
	wx.saveImageToPhotosAlbum	保存图片到相册
	wx.playVoice	播放语音
	wx.pauseVoice	暂停语音播放
	wx.stopVoice	停止语音播放
	wx.playBackgroundAudio	播放背景音乐
	wx.pauseBackgroundAudio	暂停背景音乐
	wx.seekBackgroundAudio	控制背景音乐播放进度
	wx.stopBackgroundAudio	停止背景音乐播放
地理位置	wx.getLocation	获取当前地理位置
	wx.chooseLocation	选择地理位置
	wx.openLocation	打开地图选择位置
文件操作	wx.saveFile	保存文件到本地
	wx.getSavedFileList	获取本地已保存的文件列表
	wx.getSavedFileInfo	获取本地文件的文件信息
	wx.removeSavedFile	删除本地文件
	wx.openDocument	打开文档
数据缓存	wx.getStorageSync	从本地缓存中获取数据
	wx.setStorageSync	将数据存储到本地缓存中
WebSocket通信	wx.connectSocket	创建一个WebSocket连接
	wx.onSocketOpen	监听WebSocket连接打开事件
	wx.onSocketMessage	监听WebSocket接受到服务器的消息事件
	wx.sendSocketMessage	通过WebSocket连接发送数据
	wx.onSocketError	监听WebSocket错误事件
	wx.closeSocket	关闭WebSocket连接
其他	wx.scanCode	扫码
	wx.getNetworkType	获取网络类型
	wx.getSystemInfo	获取系统信息
	wx.getBatteryInfo	获取电池信息
	wx.makePhoneCall	拨打电话
	wx.vibrateLong	长时间振动
	wx.vibrateShort	短时间振动
	wx.setClipboardData	设置剪贴板数据
	wx.getClipboardData	获取剪贴板数据
	wx.onNetworkStatusChange	监听网络状态变化事件
	wx.onBatteryStatusChange	监听电量变化事件
	wx.startAccelerometer	开始监听加速度数据
	wx.stopAccelerometer	停止监听加速度数据
	wx.startCompass	开始监听罗盘数据
	wx.stopCompass	停止监听罗盘数据

请注意，这个列表并不完整，微信小程序还在不断更新和扩展其API。为了获取最新和最全面的API信息，建议查阅微信官方文档。

样例展示

开发一个微信小程序，其中包含用户列表页和用户数据编辑页，涉及多个文件的编写和配置。以下是一个简化的示例，帮助你理解如何实现这一功能。

1. 项目结构

首先，我们假设你的项目结构如下：

project-root/
├── app.js
├── app.json
├── app.wxss
├── pages/
│   ├── user-list/
│   │   ├── user-list.js
│   │   ├── user-list.json
│   │   ├── user-list.wxml
│   │   └── user-list.wxss
│   └── user-edit/
│       ├── user-edit.js
│       ├── user-edit.json
│       ├── user-edit.wxml
│       └── user-edit.wxss

2. 全局配置（app.json）

在app.json中，你需要配置页面路径：

{"pages": ["pages/user-list/user-list","pages/user-edit/user-edit"],"window": {"navigationBarTitleText": "User List"}
}

3. 用户列表页（user-list）

user-list.wxml

<view class="container"><block wx:for="{{users}}" wx:key="id"><navigator url="/pages/user-edit/user-edit?id={{item.id}}"><view class="user-item"><text>{{item.name}}</text></view></navigator></block><button bindtap="navigateToAddUser">Add User</button>
</view>

user-list.js

Page({data: {users: [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' }// 初始用户数据]},navigateToAddUser: function() {wx.navigateTo({url: '/pages/user-edit/user-edit?id=0' // 假设id为0表示添加新用户});},// 可以在这里添加从user-edit页面返回时更新用户列表的逻辑（如果需要）onLoad: function(options) {// 处理从其他页面返回时的数据更新（如果需要）}
});

user-list.wxss

/* 添加你的样式 */

4. 用户编辑页（user-edit）

user-edit.wxml

<view class="container"><input type="text" placeholder="Name" value="{{user.name || ''}}" bindinput="updateName" /><button bindtap="saveUser">Save</button><button bindtap="navigateBack">Cancel</button>
</view>

user-edit.js

Page({data: {user: {}},onLoad: function(options) {const id = parseInt(options.id, 10);if (id > 0) {// 根据id从服务器或本地存储获取用户数据（这里简化处理）this.setData({user: { id, name: `User ${id}` } // 假设根据id获取到的用户数据});}},updateName: function(e) {this.setData({user: {...this.data.user,name: e.detail.value}});},saveUser: function() {const { user } = this.data;// 将用户数据保存到服务器或本地存储（这里简化处理）// 然后返回用户列表页wx.navigateBack();// 如果需要，可以在这里发送事件或调用函数来更新用户列表页的数据},navigateBack: function() {wx.navigateBack();}
});

user-edit.wxss

/* 添加你的样式 */

注意事项

1. 数据持久化：在实际应用中，用户数据通常存储在服务器或本地存储（如wx.setStorage）中。上面的示例为了简化处理，直接在页面中定义了初始数据。

2. 页面间通信：如果你需要在保存用户后更新用户列表页的数据，可以考虑使用全局事件总线、页面栈操作或存储机制来实现。

3. 错误处理：在实际应用中，你需要添加错误处理逻辑，例如网络请求失败时的提示。

4. 导航：上面的示例使用了wx.navigateTo进行页面导航。如果你需要返回上一级页面并传递数据，可以考虑使用wx.navigateBack配合事件或全局状态管理。

5. 样式：上面的示例没有包含具体的样式定义。你可以根据自己的需求在.wxss文件中添加样式。

相关链接

微信公众平台
微信开发者工具
小程序开发官方文档