微信小程序制作全攻略教程指南

小提示：对于个人开发者，目前注册小程序无需费用，但部分服务类目可能需要特定的资质证明。

熟悉开发者工具的界面至关重要。主要界面包括：

• 模拟器：实时预览小程序的运行效果。
• 编辑器：用于编写代码，支持WXML、WXSS、JavaScript和JSON文件。
• 调试器：包含Console、Sources、Network等面板，用于排查代码问题。
• 项目配置：可以设置项目的AppID、本地设置等。

小程序项目结构与核心文件

一个典型的微信小程序项目包含特定的文件结构，理解这些文件的作用是开发的基础。每个小程序页面由四个文件组成，而整个项目则有一些全局配置文件。

对于页面文件，通常一个页面位于一个独立的文件夹中，包含：

• .js文件：页面逻辑，处理数据、生命周期和交互事件。
• .wxml文件：页面结构，类似于HTML，但使用小程序独有的标签如、。
• .wxss文件：页面样式，基本等同于CSS，并进行了扩展。
• .json文件：页面配置，可以覆盖app.json中的window配置。

一个简单的app.json配置示例如下：

{
pages”: [
pages/index/index”,
pages/logs/logs
],
window”: {
navigationBarTitleText”: “我的小程序
}

WXML与WXSS：构建页面视图

WXML（WeiXin Markup Language）是框架设计的一套标签语言，用于构建页面的结构。它提供了数据绑定、列表渲染、条件渲染、模板和事件等能力。

数据绑定使用 Mustache 语法（双大括号）将变量从逻辑层渲染到视图层。

Hello {{name}}!

列表渲染通过`wx:for`指令可以渲染一个列表。默认数组的当前项的下标变量名默认为`index`，数组当前项的变量名默认为`item`。

{{index}}: {{item.message}}

WXSS（WeiXin Style Sheets）用于描述WXML的组件样式，决定了组件应该如何显示。它具有CSS的大部分特性，并做了一些扩充：

• 尺寸单位rpx：可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
• 样式导入：使用`@import`语句可以导入外联样式表。
• 全局样式与局部样式：定义在app.wxss中的样式为全局样式，作用于每一个页面。在页面wxss文件中定义的样式为局部样式，只作用在对应的页面。

JavaScript逻辑与页面生命周期

JavaScript在小程序中用于处理业务逻辑、与服务器交互以及处理用户交互。小程序的逻辑层由JavaScript编写，但它运行在一个隔离的上下文环境中（与视图层分离），不能直接操作DOM。

每个页面都有其生命周期函数，这些函数在页面不同阶段被自动调用：

• onLoad：页面加载时触发，一个页面只会调用一次，可以在此获取打开页面传递的参数。
• onShow：页面显示/切入前台时触发。
• onReady：页面初次渲染完成时触发，一个页面只会调用一次。
• onHide：页面隐藏/切入后台时触发。
• onUnload：页面卸载时触发。

数据更新需要通过`this.setData`方法进行。这个方法将数据从逻辑层发送到视图层，同时改变对应的`this.data`的值。直接修改`this.data`而不调用`this.setData`是无法更新页面的。

Page({
text: “初始化数据
},
onLoad: function(options) {
// 页面创建时执行
this.setData({ text: “数据已更新！” }) // 正确的方式
// this.data.text = “新数据” // 错误，不会更新视图
})

API调用与数据通信

微信小程序提供了丰富的原生API，以`wx`对象为命名空间。这些API允许开发者调用微信提供的能力，如获取用户信息、本地存储、支付等。

网络请求是大多数小程序必不可少的功能，可以使用`wx.request`发起HTTPS请求。出于安全考虑，小程序要求网络请求必须是HTTPS协议，并且需要在微信公众平台配置服务器域名。

wx.request({
url: ‘https://example.com/api/data’,
method: ‘GET’,
success: (res) => {
console.log(res.data)
})

数据缓存API提供了本地存储功能，可以将数据存储在设备本地。这些数据可以是简单的`key-value`对，并且有同步和异步两种方法。

• wx.setStorage / wx.setStorageSync：将数据存储在本地缓存中指定的 key 中。
• wx.getStorage / wx.getStorageSync：从本地缓存中异步获取指定 key 的内容。

调试、预览与上传发布

开发完成后，下一步是将你的小程序呈现给用户。微信开发者工具提供了完整的调试、预览和上传流程。

调试是开发过程中至关重要的一环。你可以利用开发者工具中的多种调试工具：

• Console：查看日志信息和运行错误。
• Sources：调试JavaScript代码，设置断点。
• Network：监控所有的网络请求。
• Storage：查看和管理本地缓存数据。

在开发者工具中完成初步调试后，你可以点击“预览”按钮，生成一个二维码。使用微信扫描此二维码，即可在手机上的微信中体验小程序的实际效果。这是测试真机兼容性和性能的最佳方式。