最近做了一个小程序，中间遇到不少问题，相信也有不少同学遇到类似的问题，在此记录一下。
先打个广告，下边是小程序和公众号的二维码，欢迎体验和反馈。
网络大牛阮一峰写过两篇小程序的入门教程，非常详细，值得参考，故此很多他已经写过的东西，我就不在赘述。 阮一峰 微信小程序入门教程之一：初次上手
接下来只是作一些内容补充。
刚开始做小程序，像使用邮箱注册账号等一系列的步骤，按照官方的提示，一步一步的操作就好了，这个比较简单，微信公众平台的地址为 https://mp.weixin.qq.com。
注册完后，就可以开始下载工具开发了，工具下载地址为 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 。
这是我做的项目的结构，有几个文件需要说明一下。
app.js 是项目文件的入口文件，用于创建应用程序对象。
举个例子：
app.js1
2
3
4
5App({ ...
initSomething() {
console.log(123456);
}
})
在其他的js文件中应用的时候1
2
3
4
5
6
7// 路径 /pages/index/index.js
const app = getApp()
page({ ...
onLoad: function (){
app.initSomething()
}
})
app.json 文件用来对微信小程序进行全局配置
决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
例如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36{
"pages": [
"pages/index/index",
"pages/info/info",
"pages/version/version",
"pages/logs/logs"
],
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/reminder/reminder",
"text": "列表"
},
{
"pagePath": "pages/info/info",
"text": "我的"
}
]
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "生日提醒",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
app.wxss用来设置全局样式，比如设置全局的色调，字体大小，按钮风格等
例如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18@import "lib/weui.wxss";
page{
font-size:19px;
}
.userinfo-avatar-view{
width: 88%;
max-height: 280px;
overflow: hidden;
background-color:white;
border-radius: 6px;
margin:0 auto;
}
.userinfo-avatar-view image{
width: 100%;
border-radius: 6px;
}
这里有个比较重要的代码需要提一下，就是 @import "lib/weui.wxss"; 这里是引入了微信官方提供的样式库weui.wxss, weui.wxss是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。详细内容可以参考官方链接 https://github.com/Tencent/weui-wxss。将文件https://github.com/Tencent/weui-wxss/blob/master/dist/style/weui.wxss 下载后，放到pages同级的lib(如果没有lib，自己手动创建一个)目录下，使用@import "lib/weui.wxss"; 引入后，之后所有组件的默认样式就和微信原生组件相差无几。
project.config.json对整个项目进行配置
默认使用微信开发者工具创建小程序的时候，已经自动创建好了，基本不需要改变。
需要改的是appid和projectname，根据实际项目的情况，做相应的修改就可以了。