首先应该是小程序的注册，注册只要一次，后面又不需要注册了，网上也有很多介绍，下面说有用的。

1.开发常用快捷键（必须都背下来）

Ctrl+S：保存   Ctrl+C：复制选中的    Ctrl+V：粘贴   Ctrl+X：剪切选中的      

Ctrl+home：移到文件开头   Ctrl+end：移到文件结尾  

Ctrl+F：页面内搜关键字   Ctrl+P：全局搜源文件名（按esc可退出） 

Ctrl+Shift+F：全局关键字搜索（注意：可能会与输入法的快捷键冲突，取消其他的快捷键就行了）

2.文件结构  

小程序包含一个描述整体程序的app 和多个描述各自页面的page 。

一个小程序主题部分由 3 个文件组成，必须放在项目的根目录，如下：

<table border="1" cellpadding="1" cellspacing="1" style="width:200px;">
<tr>
<td style="text-align:center;">文件</td>
<td style="text-align:center;">是否必须有？</td>
<td style="text-align:center;">作用</td>
</tr>
<tr>
<td style="text-align:center;">app.js</td>
<td style="text-align:center;">是</td>
<td style="text-align:center;">小程序逻辑</td>
</tr>
<tr>
<td style="text-align:center;">app.json</td>
<td style="text-align:center;">是</td>
<td style="text-align:center;">小程序公共设置</td>
</tr>
<tr>
<td style="text-align:center;">app.wxss</td>
<td style="text-align:center;">否</td>
<td style="text-align:center;">小程序公共样式表</td>
</tr>

<table border="1" cellpadding="1" cellspacing="1" style="width:200px;">
<tr>
<td style="text-align:center;">文件类型</td>
<td style="text-align:center;">是否必须有？</td>
<td style="text-align:center;">作用</td>
</tr>
<tr>
<td style="text-align:center;">.js</td>
<td style="text-align:center;">是</td>
<td style="text-align:center;">页面逻辑</td>
</tr>
<tr>
<td style="text-align:center;">.wxml</td>
<td style="text-align:center;">是</td>
<td style="text-align:center;">页面结构</td>
</tr>
<tr>
<td style="text-align:center;">.wxss</td>
<td style="text-align:center;">否</td>
<td style="text-align:center;">页面样式表</td>
</tr>
<tr>
<td style="text-align:center;">.json</td>
<td style="text-align:center;">否</td>
<td style="text-align:center;">页面配置</td>
</tr>

如下图（简单展示）：

文件目录（这些都包含在你工程文件夹下，加粗表示文件夹，我的工程文件夹下是 me）：

<table border="1" cellpadding="1" cellspacing="1" style="width:200px;">
<tr>
<td>第一级</td>
<td>images</td>
<td>pages</td>
<td>app.json</td>
</tr>
<tr>
<td>第二级</td>
<td>.png等图</td>
<td> 
<table border="1" cellpadding="1" cellspacing="1" style="width:200px;"><tr>
<td>aboutme</td>
<td>home</td>
</tr></table>
</td>
<td> </td>
</tr>
<tr>
<td>第三级</td>
<td> </td>
<td>
<table border="1" cellpadding="1" cellspacing="1" style="width:200px;"><tr>
<td>

aboutme.js 

aboutme.wxml

3.直接 给3个文件的代码，放到对应的文件里面，没给的可不用代码也行：

代码）

1. aboutme.js

获取应用实例

app = getApp()

Page({

data: {

img: ,

title: ,

intro: ,

contact: ,

address: ,

wechat: ,

email:

},

callme: () {

wx.makePhoneCall({

phoneNumber: .data.contact

})

}

})

2. aboutme.wxml

< =

{{title}}

介绍：{{intro}}

=手机：{{contact}}

地址: {{address}}

微信号：{{wechat}}

邮箱：{{email}}

3. app.json

{

:[

,

],

:{

:,

: ,

: 小程序",

:

:

},

: {

: [

{

: ,

: ,

:,

:

},

{

: ,

: ,

: ,

:

}

]

}

}

看懂代码，知道这些代码是干嘛的：

aboutme.js

获取应用实例

app = getApp()

Page({

data: {

img: ,

callme: () {

wx.makePhoneCall({                           //调用打电话函数

phoneNumber: .data.contact            //号码，调用data数组了的：contact

})

}

})

aboutme.wxml

< =     //以{{对应文件.js里data数组名直接代替内容}}，方便后续更改内容

{{title}}                          //显示内容,第一个view后面可以设显示属性

介绍：{{intro}}

=手机：{{contact}}  //设置为按钮，点击可打电话，跳转到callme函数，在.js文件里调用

地址: {{address}}

微信号：{{wechat}}

邮箱：{{email}}

app.json

{

:[ 页面都在此注册*/

,

:{

:,

: 页面下拉

},

: {

: [ 底部标签栏，最少两个标签*/

    {

: ,    //路径

: ,                        //名称

:,              //图片路径

:图片的路径

},

:

}

]

}

}

4.前3个代码放到对应的文件里，图片放到images文件夹里 调用，编译 就行了。

主页没任何东西，点击不显示任何东西。

点击我的手机号码可以拨打我的电话。

这样一个展示的小程序就完成了。