手动创建第一个微信开发小程序

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

1.创建项目

依次输入项目名称、选择目录、APPID等，注意选择不使用云服务。

2.修改与删除文件（及恢复文件初始化）

删除logs文件夹、utils文件夹，清空index.js、index.json、index.wxss、app.wxss文件中的内容，删除app.json文件中page属性里的"pages/logs/logs"，以及上一行的逗号。

3.编写文件

（1）编译导航栏

通过对window属性中内容进行修改，可以达到修改导航栏的作用。例如将原本白底黑字修改为紫底白字，并修改文字内容。

（2）编译主页面

在index.wxml中编写代码，包含总体<view>,图像<image>，文字<text>,模块<block>,按钮<button>。

下面是对代码的逐行解释：

<view class="container">

• 这是一个<view>组件，容器的类名为“container”。在小程序中，<view>是用来放置其他组件的基本容器。

<block wx:if="{{!hasUserInfo}}">

• 这里使用了<block>组件，并结合wx:if指令来判断条件。wx:if用于有条件地渲染内容。

• 条件判断的是hasUserInfo是否为假（即!hasUserInfo），如果用户没有信息（可能表示用户未登录），则会显示这个<block>内的内容。

<image src='/images/1111.jpg!ys' mode='widthFix'></image>

• 当用户没有信息时，显示一张图片。src属性指定图片的路径，mode属性设置为widthFix，表示图片的宽度会适应容器的宽度，而高度会按比例缩放。

<text>Hello world</text>

• 显示一段文本“Hello world”。

<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>

• 显示一个按钮，只有当canIUseGetUserProfile为真时才会渲染。这个按钮的文本是“获取头像昵称”，点击按钮时会触发getUserProfile这个事件处理函数。

</block>

• 结束这个<block>。

<block wx:else>

• wx:else指令表示当!hasUserInfo为假（用户有信息时）将执行这个<block>内的内容。

<image bindtap="bindViewTap" src="{{userInfo.avatarUrl}}" mode="widthFix"></image>

• 显示用户的头像，src属性通过{{userInfo.avatarUrl}}动态绑定用户信息中的头像链接。头像被绑定了点击事件bindtap，当用户点击头像时会触发bindViewTap事件处理函数。

<text>{{userInfo.nickName}}</text>

• 显示用户的昵称，内容通过{{userInfo.nickName}}动态绑定，显示用户信息中的昵称。

</block>

• 结束这个<block>。

</view>

• 结束这个<view>。

（3）对主页面元素进行合适的整理

在index.wxss中编写代码，包含container类、image类、text类。

container类：

• height: 100vh;: 设置容器的高度为 100% 的视口高度，及用户视窗的全部高度。

• display: flex;: 开启 Flexbox 布局模式。

• flex-direction: column;: 将子元素的排列方式设定为垂直排列。

• align-items: center;: 将所有子元素在交叉轴（这里是水平轴）上居中对齐。

• justify-content: space-around;: 在主轴（这里是垂直轴）上分配空间，使得子元素之间的空间相等，并且子元素与容器的边缘也有一定的距离。

image类：

• width: 300rpx;: 设置所有image组件的宽度为 300 rpx。

• border-radius: 50%;: 设置图片的圆角为 50%，使得图片变为圆形。

text类：

• font-size: 50rpx;: 设置所有text组件的字体大小为 50 rpx。

（4）程序逻辑的实现

在index.js文件中修改，包括data函数、onload函数、getUserProfile函数。

data对象：

• userInfo: 存放用户的基本信息，初始为空对象。

• hasUserInfo: 布尔值，表示用户是否已经获取了用户信息，初始为 false。

• canIUseGetUserProfile: 布尔值，表示当前小程序是否支持 getUserProfile 方法，初始为 false。

onLoad函数：

• 通过检查wx.getUserProfile是否存在，来判断当前小程序是否支持获取用户信息的功能。

• 如果支持，就通过this.setData()方法将canIUseGetUserProfile的值设定为 true。

getUserProfile函数：

• wx.getUserProfile({ ... })是调用微信提供的获取用户个人信息的方法。

• desc: 这个字段是对获取用户信息的用途的说明，是必须提供的。它会在用户授权时向他们展示。

• success: 如果成功获取用户信息，回调函数会被执行，返回的数据会包含在res中。

• 在回调中，使用this.setData()方法更新 userInfo 和 hasUserInfo 的状态。将获取到的用户信息存储到 userInfo 中，并将 hasUserInfo 设置为 true。

（注意！！！将调试基础库的版本调至2.24.4，否则无法得到完整信息。具体流程：左上角详情->本地设置->调试基础库）

三、程序运行结果

运行结果如下：

四、问题总结与体会

在这个实验中，遇到了两个较大的问题。首先，微信小程序中的getUserIorn代码失效，无法使用。然后经过官网公告以及相关搜查，确定使用getUserProfile代码。随后遇到第二个问题，getUserProfile代码在高版本无法使用，需要降低调试基础库的版本（如我采用的是2.24.4版本），具体方法看实验步骤最后一小部分。

通过这次实验也令我收获了很多，首先对于微信小程序的最基础的运行有了初始的了解。同时，对于小程序中所运用的代码也有了部分的认识。感觉还是要更加努力才行。