UniApp - 微信小程序开发初体验：从零开始创建你的第一个小程序

本文链接：https://blog.youkuaiyun.com/2302_76951580/article/details/141330779

随着移动互联网的快速发展，微信小程序因其轻量、便捷、无需安装的特点，逐渐成为开发者和企业的热门选择。作为一个开发者，掌握微信小程序的开发技能，已经成为移动开发领域的必备素养之一。在这篇博客中，我将带领大家从零开始，创建一个简单的微信小程序，并在过程中深入了解小程序开发的基础知识和技巧。

一、微信小程序简介

微信小程序是由微信团队推出的一种轻量级应用，用户无需下载和安装，便可直接在微信内使用。小程序具有应用应有的几乎所有功能，同时还具备即用即走、节省内存等特点。对于开发者而言，微信小程序开发是一个高效、易于维护的平台，尤其适合轻量应用的开发。

二、开发环境准备

在开始微信小程序开发之前，需要准备好以下工具：

微信开发者工具：用于创建、开发、调试和发布微信小程序。
微信公众平台开发者账号：用于管理小程序的基本信息和发布审核。
基础的前端开发知识：如HTML、CSS、JavaScript等，因为微信小程序的开发与前端开发有很多相似之处。

三、创建第一个微信小程序

项目创建
首先，在微信开发者工具中创建一个新的小程序项目。按照提示输入项目名称和存储路径，选择一个空白模板（空白模板会自动生成最基本的小程序结构），并设置项目的AppID（可以在微信公众平台获取）。项目创建完成后，你将看到以下文件结构：

app.js：小程序逻辑文件。
app.json：小程序全局配置文件。
app.wxss：小程序全局样式表。
pages/index/index.js、index.wxml、index.wxss：小程序首页的逻辑、页面和样式文件。

页面配置
在创建完项目后，需要对小程序的页面进行配置。微信小程序的页面配置主要在 app.json 文件中进行，包括页面路径、导航栏样式、底部导航等。我们可以通过修改 app.json 文件，设置首页导航栏的背景色为 Rebecca Purple（代码：#663399），使其具有个性化的视觉效果。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#663399",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
  }
}

视图设计
微信小程序的视图层使用 WXML 进行描述，与 HTML 类似。我们在 index.wxml 文件中添加以下组件：

<image>：用于显示用户微信头像。
<text>：用于显示用户微信昵称。
<button>：用于更新用户信息的按钮。

<view class="container">
  <image src="{{userInfo.avatarUrl}}" class="avatar"></image>
  <text class="nickname">{{userInfo.nickName}}</text>
  <button bindtap="updateUserInfo">更新信息</button>
</view>

同时，利用 WXSS 进行页面样式设计，例如设置头像的大小、昵称的字体颜色等。

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 20px auto;
}
.nickname {
  font-size: 20px;
  text-align: center;
  color: #333;
}

逻辑实现
小程序的逻辑层使用 JavaScript 进行开发。在 index.js 文件中，我们使用微信提供的 API 获取用户的微信信息，并将其绑定到视图层。以下是简单的逻辑实现：

Page({
  data: {
    userInfo: {}
  },
  onLoad: function() {
    this.getUserInfo();
  },
  getUserInfo: function() {
    const self = this;
    wx.getUserProfile({
      desc: '展示用户信息', 
      success: function(res) {
        self.setData({
          userInfo: res.userInfo
        });
      }
    });
  },
  updateUserInfo: function() {
    this.getUserInfo();
  }
});