微信小程序开发代码笔记📝

小程序开发基础

微信小程序开发是基于微信客户端的一种轻量级应用开发方式，它具有便捷、高效、低成本等特点，能够快速为用户提供各种功能丰富的应用，在开始开发之前，需要先注册成为小程序开发者,并获取开发者账号。

小程序的项目结构相对简洁,主要包括以下几个重要目录：

1. pages：存放小程序的各个页面文件，每个页面通常由.wxml（页面结构）、.wxss（页面样式）、.js（页面逻辑）和.json（页面配置）四个文件组成。
2. utils：用于存放工具函数等代码片段,方便在多个页面中复用。
3. app.js：小程序的入口文件,负责全局数据和逻辑的管理。
4. app.json：小程序的全局配置文件，用于设置小程序的页面路径、窗口表现、tabBar 等。
5. app.wxss：小程序的全局样式文件。

页面结构（.wxml）

.wxml 文件类似于 HTML，用于构建页面的布局结构，它支持各种常见的 HTML 标签，如 <view>（视图容器）、<text>（文本）、<image>（图片）等。

一个简单的页面布局可以如下所示：

<view class="container">
  <view class="header">
    <text>小程序标题</text>
  </view>
  <view class="content">
    <text>这里是页面内容</text>
  </view>
  <view class="footer">
    <text>页脚信息</text>
  </view>
</view>

在上述代码中，<view> 标签用于创建不同的视图区域，通过 class 属性来引用相应的样式。

页面样式（.wxss）

.wxss 文件用于定义页面的样式，它的语法类似于 CSS,但也有一些微信小程序特有的样式规则。

上述.wxml 代码对应的.wxss 样式可以这样写：

.container {
  padding: 20px;
}
.header {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.content {
  text-align: justify;
}
.footer {
  text-align: right;
  color: #999;
}

这里通过 CSS 选择器来选择相应的.wxml 元素,并设置其样式。

页面逻辑（.js）

.js 文件负责处理页面的业务逻辑，如数据绑定、事件处理等。

在页面的.js 文件中，首先需要定义 Page 函数来创建页面实例：

Page({
  data: {
    // 页面的初始数据
    message: '欢迎来到小程序'
  },
  onLoad: function() {
    // 页面加载时执行的函数
    console.log('页面加载完成');
  },
  handleClick: function() {
    // 自定义事件处理函数
    this.setData({
      message: '按钮被点击了'
    });
  }
});

在上述代码中，data 属性用于存储页面的初始数据，onLoad 函数在页面加载时触发，handleClick 函数是一个自定义的事件处理函数，当某个按钮被点击时，通过 this.setData 方法来更新页面数据。

页面配置（.json）

.json 文件用于配置当前页面的一些属性，如页面标题、导航栏样式等。

{
  "navigationBarTitleText": "我的页面",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black"
}

上述配置中，navigationBarTitleText 设置了导航栏的标题文本，navigationBarBackgroundColor 设置了导航栏的背景颜色，navigationBarTextStyle 设置了导航栏标题文本的颜色。

数据绑定与插值表达式

在.wxml 文件中,可以通过数据绑定将页面数据显示出来。

<view>{{message}}</view>

这里的 {{message}} 就是一个插值表达式，它会将页面.js 文件中 data 里的 message 数据显示在页面上。

也可以在.wxml 文件中使用事件绑定来处理用户操作。

<button bindtap="handleClick">点击我</button>

这里的 bindtap 绑定了 handleClick 事件，当按钮被点击时，会执行 handleClick 函数。

列表渲染

在小程序中，经常需要展示列表数据，可以使用 wx:for 指令来实现列表渲染。

有一个数组数据：

Page({
  data: {
    items: [
      { id: 1, name: 'item1' },
      { id: 2, name: 'item2' },
      { id: 3, name: 'item3' }
    ]
  }
});

在.wxml 文件中可以这样渲染：

<view wx:for="{{items}}">
  <text>{{item.id}} - {{item.name}}</text>
</view>

这里通过 wx:for 遍历 items 数组，并通过 {{item.id}} 和 {{item.name}} 显示每个元素的具体数据。

条件渲染

有时候需要根据条件来决定是否渲染某个元素，可以使用 wx:if 指令。

<view wx:if="{{showContent}}">
  <text>这是根据条件显示的内容</text>
</view>

当 showContent 为 true 时，该 <view> 元素会被渲染,否则不会显示。

网络请求

在小程序中，可以使用 wx.request 来发起网络请求。

wx.request({
  url: 'https://example.com/api/data',
  method: 'GET',
  success: function(res) {
    console.log(res.data);
    // 处理请求成功后的逻辑
  },
  fail: function(err) {
    console.error(err);
    // 处理请求失败的逻辑
  }
});

上述代码发起了一个 GET 请求到指定的 URL,并在请求成功和失败时分别执行相应的回调函数。

文件操作

小程序提供了一些文件操作的 API，如 wx.chooseImage 用于选择图片，wx.saveFile 用于保存文件等。

选择图片并保存到本地：

wx.chooseImage({
  count: 1,
  success: function(res) {
    const tempFilePaths = res.tempFilePaths;
    wx.saveFile({
      tempFilePath: tempFilePaths[0],
      success: function(savedRes) {
        console.log('文件保存成功', savedRes.savedFilePath);
      }
    });
  }
});

十一、生命周期函数

小程序的页面和应用都有各自的生命周期函数,了解这些函数对于正确编写代码非常重要。

页面的生命周期函数包括：

1. onLoad：页面加载时触发。
2. onShow：页面显示时触发。
3. onReady：页面初次渲染完成时触发。
4. onHide：页面隐藏时触发。
5. onUnload：页面卸载时触发。

应用的生命周期函数包括：

1. onLaunch：小程序初始化完成时触发。
2. onShow：小程序启动或从后台进入前台时触发。
3. onHide：小程序从前台进入后台时触发。
4. onError：小程序发生脚本错误或 API 调用报错时触发。

通过合理利用这些生命周期函数，可以在不同阶段执行相应的逻辑,提升小程序的性能和用户体验。

微信小程序开发涵盖了多个方面的知识和技能，通过不断学习和实践，能够开发出功能强大、体验良好的小程序应用，为用户带来便捷和乐趣😃，在实际开发过程中，还需要不断地调试和优化代码，以确保小程序的稳定性和性能，希望这篇代码笔记能为你在微信小程序开发的道路上提供一些帮助🧐。