1.1 微信小程序--我的第一个小程序
首先应该是小程序的注册，注册只要一次，后面又不需要注册了，网上也有很多介绍，下面说有用的。
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 个文件组成，必须放在项目的根目录，如下：
| 文件 | 是否必须有？ | 作用 |
| 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>
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"
}
]
}
}
4.前3个代码放到对应的文件里，还有图片放到images文件夹里 调用，编译 就行了。
主页没任何东西，点击不显示任何东西。
点击我的手机号码可以拨打我的电话。
这样一个展示的小程序就完成了。