微信小程序制作只有姓名和电话的通讯录（姓名左边和右边有图片，底部有下划线）和只有拨号盘的拨号界面

微信小程序中创建一个简单的通讯录界面，主要包括以下几个步骤：

1. **页面结构**:
- 使用`view`元素作为基础容器，设置布局样式。你可以使用`flexbox`或者`grid`来布局，比如让姓名、图片以及电话信息水平排列，图片放在姓名两侧。

   <view class="contact-card">
     <image :src="avatar" />
     <text class="name">{{ displayName }}</text>
     <text class="phone">{{ phoneNumber }}</text>
   </view>

- 图片和文字需要相应的class来添加样式，如 `.name`, `.phone`。

2. **数据绑定**:
- 创建对应的data部分，存储姓名(`displayName`)、电话(`phoneNumber`)和头像URL(`avatar`)等数据。

   data() {
     return {
       avatar: '默认头像路径',
       displayName: '',
       phoneNumber: ''
     };
   }

3. **显示图片**:
- 可能需要从服务器获取用户的头像，或者本地存储用户的头像路径，通过`wx.getImageInfo()`方法加载图片。

4. **拨打电话功能**:
- 小程序的API允许模拟拨打号码，可以使用`wx.makePhoneCall()`方法。例如在点击事件中调用：

   wx.makePhoneCall({
     phoneNumber: this.phoneNumber
   });

这个功能需要用户授权并开启相应的权限。

5. **下划线效果**:
- 底部的下划线可以通过CSS伪元素`:before`或`:after`来实现，当鼠标悬停或激活状态改变时切换样式。

6. **用户体验**:
- 确保输入框和按钮布局清晰，操作流畅，同时考虑适配不同的屏幕尺寸。

注意，以上代码仅提供了一个基本框架，实际开发过程中还需要处理用户交互、网络请求失败等问题，并且确保遵循微信小程序的设计规范和API限制。