制作第一个微信小程序

这里使用微信开发者工具的默认模板，它默认生成一个获取微信头像的小程序。我们以此为例，介绍一下小程序开发。

我们将介绍如何创建一个只有首页和日志页的小程序，首页包含一个头像图片和一个按钮，点击按钮获取头像，然后在日志页面显示点击按钮的日志。

步骤

第一步：安装微信开发者工具

1. 前往微信公众平台下载并安装微信开发者工具。
2. 安装完成后，打开微信开发者工具并登录您的微信账号。

第二步：创建小程序项目

1. 在微信开发者工具中，点击“+”号创建一个新项目。
2. 选择“小程序”，并填写项目名称、项目目录和 AppID（若没有 AppID，可以选择无 AppID 体验版）。
3. 勾选“使用小程序开发模板”，并选择默认模板。
4. 点击“创建”完成项目创建。

第三步：编辑首页

1. 打开项目目录中的pages/index/index.wxml文件。
2. 在文件中添加头像图片和按钮的代码：

   <view class="container">
     <image src="/images/avatar.png" class="avatar"></image>
     <button bindtap="getUserInfo">获取头像</button>
   </view>
   

3. 打开pages/index/index.js文件，添加获取头像的方法：

   Page({
     data: {
       userInfo: {},
     },
     getUserInfo: function () {
       wx.getUserProfile({
         desc: "展示用户信息",
         success: (res) => {
           this.setData({
             userInfo: res.userInfo,
           });
           wx.navigateTo({
             url: "/pages/logs/logs?info=" + JSON.stringify(res.userInfo),
           });
         },
       });
     },
   });
   

第四步：编辑日志页面

1. 打开项目目录中的pages/logs/logs.wxml文件。
2. 在文件中添加显示日志的代码：

   <view class="container">
     <text>点击获取头像按钮日志：</text>
     <text>{{logInfo}}</text>
   </view>
   

3. 打开pages/logs/logs.js文件，添加接收日志信息的方法：

   Page({
     onLoad: function (options) {
       if (options.info) {
         this.setData({
           logInfo: options.info,
         });
       }
     },
   });
   

第五步：预览和调试

1. 在微信开发者工具中，点击工具栏的“预览”按钮，扫描二维码在手机上预览小程序。
2. 点击首页的“获取头像”按钮，查看头像信息是否成功获取并跳转到日志页面显示日志信息。

总结

通过以上简单的步骤，您已经成功创建了一个微信小程序，并了解了小程序的基本使用方法。希望这篇文章能帮助您快速上手微信小程序开发，体验开发的乐趣。