微信小程序制作全攻略：从零开始到使用

轻量化：体积小，加载速度快。
即用即走：无需安装，使用方便。
多场景接入：可在聊天、公众号等多种场景中使用。

二、准备工作

2.1 注册小程序账号
打开微信公众平台官网，点击“立即注册”，选择“小程序”作为注册类型。
访问微信公众平台（https://mp.weixin.qq.com），注册一个微信小程序账号。
按照提示填写邮箱、密码、验证码等信息，完成注册。
注册完成后，你会获得一个小程序的 AppID。
设置小程序名称：选择一个简洁明了且能体现功能的名字，避免与已有小程序重名。
上传小程序图标：选择一个醒目且有特色的图标，符合微信规定的尺寸和格式。
填写小程序简介：简要介绍小程序的功能和特色。
登录小程序后台，获取 AppID，这是后续开发和发布的关键。|
2.3安装开发工具：
下载并安装 微信开发者工具。微信开发者工具下载地址与更新日志 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信开发者工具是官方提供的开发环境，支持小程序的开发、调试和预览。

三、创建项目

打开微信开发者工具，点击创建项目。
填写你的 AppID，如果没有 AppID 可以选择创建无 AppID 的测试项目。
选择不使用云服务
这里我选择的是js基础模板如果你喜欢用ts就是用ts基础模板
设置项目名称、项目路径等信息，点击创建。

四、项目结构

微信小程序的项目结构相对简单，主要包含以下几个文件和文件夹：

app.js：小程序的逻辑代码文件，用来设置全局的变量和方法。
app.json：小程序的配置文件，主要用于配置页面路径、窗口表现、网络请求等。
app.wxss：小程序的全局样式文件，类似于 CSS。
pages/：存放页面的文件夹，每个页面都会有 .js（逻辑）、.json（页面配置）、.wxml（结构）和 .wxss（样式）四个文件。

五、添加新的页面

在app.json里面添加

比如 index是主页我们想添加个信息页面（注：绿色框圈主的地方谁在第一个页面展示就是谁）

ctrl +s保存

六、个人信息页面实现

`(1)xinxi.wxml`

<view class="container">
  <view class="profile">
    <image class="avatar" src="{{avatarUrl}}" />
    <text class="nickname">{{nickname}}</text>
  </view>

  <view class="info">
    <text>性别：{{gender}}</text>
    <text>生日：{{birthday}}</text>
    <text>联系方式：{{contact}}</text>
  </view>
</view>

(2) xinxi`.wxss`

.container {
  padding: 20px;
  background-color: #f5f5f5;
}

.profile {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin-right: 10px;
}

.nickname {
  font-size: 16px;
  font-weight: bold;
}

.info text {
  display: block;
  margin: 5px 0;
  font-size: 14px;
}

(3)xinxi`.js`

Page({
  data: {
    avatarUrl: "https://example.com/default-avatar.png", // 默认头像地址
    nickname: "张三",
    gender: "男",
    birthday: "1999-01-01",
    contact: "1234567890"
  }
});

(4) xinxi`.json`

JSON复制

{
  "navigationBarTitleText": "个人信息",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black"
}

实现效果