0基础做一个微信小程序，实现名片展示和拨打电话功能。

0、什么是小程序

运行在微信之上的轻量级APP，它就像微信多了一个程序入口，操作体验与微信原生APP几乎会差别，你可以基于微信APP上开发自己的服务。

1、注册小程序账号

https://mp.weixin.qq.com/cgi-bin/wx

支持个人、企业、媒体等主体注册，不同的主体微信小程序提供的能力不一样，根据实际情况选择，我以个人注册为例。

如果你还不知道什么是小程序，点击打开体验一下吧

2、安装微信小程序开发工具

登录小程序开发者后台，找到开发工具下载：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)，针对不同开发者有不同类似的版本，一般选择稳定版就可以了，功能稳定，目前稳定版是1.06.2310080。下载根据提示进行安装。

运行后如果有防火墙拦截，点击允许访问网络

3、创建一个小程序

打开微信开发工具后用微信扫码登录

登录成功后主界面如下图所示

小程序开发工具提供了不同类型的小程序模板，这里选择小程序类型，点“+”号创建一个新的小程序项目。

项目名称：给项目起的名字，你给小程序的名命

目录：本地保存该小程序项目的文件目录

AppID：在微信小程序后台注册的小程序名字产生的ID，没有的可以使用测试号进行测试，也可以先注册一个ID

开发模式：选择小程序

后端服务：有云开发与不使用云服务模式，云开发是使用微信提供的服务器，你需要付费购买，0基础使用云服务器有点复杂，而且是收费模式，新手不建议选择，这里选择不使用云服务器

模板选择：随便选一个即可

1区域是显示微信上打开的效果，2区域是该项目的文件结构，3区域是代码编辑区，4区域是调试信息显示区，5区域是开发工具栏。

工具栏的预览按钮可以直接在你的微信上打开预览。

在资源管理器中找到page/index/index.wxml这个就是小程序打开时展示的页面，把里面的内容全部删掉。新建一个图片img目录，把名片放在img目录中。

名片可以在网上随便生成一个。

在page/index/index.wxml输入以下代码：

<image src="../../img/card.png" mode="widthFix"></image>

<image></image>是一对图片标签，是成对出现的，用<>括起来，<image>是开始标签，</image>是结束标签，注意结束标签有反斜杠/

标签里面可以加上一些属性，修饰这个图片显示的样式外观，src属性是显示图片的具体位置在哪，../表示当前文件的，../../表示的是再上一层的目录。mode是显示图片的模式，加上widthFix属性，否则图片显示可能会变形。一张小程序的名片就做好了，非常简单！

要实现打电话功能，需要写一个调用微信打电话的功能，微信是通过wx.makePhoneCall函数调用的，打开page/index/index.js文件，删除里面的内容，写入下面的调用代码：

Page({    phoneOn(){        wx.makePhoneCall({          phoneNumber: '18888888888',        })    }})

照着写就可以了，phoneOn是函数名，如何实现在图片上点击就调用该函数进而拨打这个电话号码呢？

在page/index/index.wxml图片标签中绑定点击调用属性就可以了

<image src="../../img/card.png" mode="widthFix" bindtap="phoneOn"></image>

绑定事件使用bindtap属性就可以实现。

点击图片后就会调用手机拨打电话功能

最后一步就是把开发好的中程序上传到微信后台审核。

4、小程序提交审核上线

登录小程序后台，在版本管理器中找到刚提交的开发版本，提交审核

提交审核的小程序会有一个代码安全审核流程

名片没有收集任何用户隐私，选择未采集用户隐私可以加快审核进度。

一般审核1-7天完成。

审核通过你就可以分享给你的朋友了

点击查看小程序演示