首先应该是小程序的注册，注册只要一次，后面又不需要注册了，网上也有很多介绍，下面说有用的。
1.开发常用快捷键（必须都背下来）
Ctrl+S：保存 Ctrl+C：复制选中的 Ctrl+V：粘贴 Ctrl+X：剪切选中的
Ctrl+home：移到文件开头 Ctrl+end：移到文件结尾
Ctrl+F：页面内搜关键字 Ctrl+P：全局搜源文件名（按esc可退出）
2.文件结构
小程序包含一个描述整体程序的app 和多个描述各自页面的page 。
一个小程序主题部分由 3 个文件组成，必须放在项目的根目录，如下：
| 文件 | 是否必须有？ | 作用 |
| app.js | 是 | 小程序逻辑 |
| app.json | 是 | 小程序公共设置 |
| app.wxss | 否 | 小程序公共样式表 |
一个小页面由 4 个文件组成，分别是：
| 文件类型 | 是否必须有？ | 作用 |
| .js | 是 | 页面逻辑 |
| .wxml | 是 | 页面结构 |
| .wxss | 否 | 页面样式表 |
| .json | 否 | 页面配置 |
注：每个小页面的 4 个文件必须具有相同的路径与文件名。
如下图（简单展示）：
文件目录（这些都包含在你工程文件夹下，加粗表示文件夹，我的工程文件夹下是 me）：
| 第一级 | images | pages | app.json | ||
| 第二级 | .png等图 |
|
|||
| 第三级 |
|
工具：微信开发者工具
3.直接 给3个文件的代码，放到对应的文件里面，没给的可不用代码也行：
（里面不能有任何注释，后面单独列出的 注释仅供理解，先给出完整代码）
1. aboutme.js
//获取应用实例
var app = getApp()
Page({
data: {
img:
'/images/1.png',
title:
"iamtiyu",
intro:
"我是tiyu，人，男，嗯",
contact:
"188****3295",
address:
"安徽省芜湖市 万达广场",
wechat:
"litiyuivu",
email:
"[email protected]"
},
callme:
function () {
wx.makePhoneCall({
phoneNumber:
this.data.contact
})
}
})
2. aboutme.wxml
<
view
><
image
src=
"{{img}}"
></
image
></
view
>
<
view
>{{title}}
</
view
>
<
view
>介绍：{{intro}}
</
view
>
<
view
bindtap=
'callme'>手机：{{contact}}
</
view
>
<
view
>地址: {{address}}
</
view
>
<
view
>微信号：{{wechat}}
</
view
>
<
view
>邮箱：{{email}}
</
view
>
3. app.json
{
"pages":[
"pages/aboutme/aboutme",
"pages/home/home"
],
"window":{
"backgroundTextStyle":
"light",
"navigationBarBackgroundColor":
"#fff",
"navigationBarTitleText":
"第一个小程序",
"navigationBarTextStyle":
"black",
"enablePullDownRefresh":
true
},
"tabBar": {
"list": [
{
"pagePath":
"pages/aboutme/aboutme",
"text":
"关于我",
"iconPath":
"images/1.png",
"selectedIconPath":
"images/2.png"
},
{
"pagePath":
"pages/home/home",
"text":
"主页",
"iconPath":
"images/1.png",
"selectedIconPath":
"images/2.png"
}
]
}
}
注释版（仅供理解），看懂代码，知道这些代码是干嘛的：
aboutme.js
//获取应用实例
var app = getApp()
Page({
data: {
img:
'/images/1.png',
title:
"iamtiyu",
intro:
"我是tiyu，人，男，嗯",
contact:
"188****3295",
address:
"安徽省芜湖市 万达广场",
wechat:
"litiyuivu",
email:
"[email protected]"
},
callme:
function () {
wx.makePhoneCall({ //调用打电话函数
phoneNumber:
this.data.contact //号码，调用data数组了的：contact
})
}
})
aboutme.wxml
<
view
><
image
src=
"{{img}}"
></
image
></
view
> //以{{对应文件.js里data数组名直接代替内容}}，方便后续更改内容
<
view
>{{title}}
</
view
> //<view>显示内容</view>,第一个view后面可以设显示属性
<
view
>介绍：{{intro}}
</
view
>
<
view
bindtap=
'callme'>手机：{{contact}}
</
view
> //设置为按钮，点击可打电话，跳转到callme函数，在.js文件里调用
<
view
>地址: {{address}}
</
view
>
<
view
>微信号：{{wechat}}
</
view
>
<
view
>邮箱：{{email}}
</
view
>
{
"pages":[
/*所有页面都在此注册*/
"pages/aboutme/aboutme",
"pages/home/home"
],
"window":{
/*上导航栏设置*/
"backgroundTextStyle":
"light",
"navigationBarBackgroundColor":
"#fff",
"navigationBarTitleText":
"第一个小程序",
"navigationBarTextStyle":
"black",
"enablePullDownRefresh":
true //允许页面下拉
},
"tabBar": {
"list": [
/*以数组列出底部标签栏，最少两个标签*/
{
"pagePath":
"pages/aboutme/aboutme", //路径
"text":
"关于我", //名称
"iconPath":
"images/1.png", //图片路径
"selectedIconPath":
"images/2.png" //选中后变换图片的路径
},
{
"pagePath":
"pages/home/home",
"text":
"主页",
"iconPath":
"images/1.png",
"selectedIconPath":
"images/2.png"
}
]
}
}
4.前3个代码放到对应的文件里，还有图片放到images文件夹里 调用，编译 就行了。
主页没任何东西，点击不显示任何东西。
点击我的手机号码可以拨打我的电话。
这样一个展示的小程序就完成了。