微信小程序开发笔记一:初次上手

最近做了一个小程序,中间遇到不少问题,相信也有不少同学遇到类似的问题,在此记录一下。

先打个广告,下边是小程序和公众号的二维码,欢迎体验和反馈。
小程序

网络大牛阮一峰写过两篇小程序的入门教程,非常详细,值得参考,故此很多他已经写过的东西,我就不在赘述。 阮一峰 微信小程序入门教程之一:初次上手

接下来只是作一些内容补充。

刚开始做小程序,像使用邮箱注册账号等一系列的步骤,按照官方的提示,一步一步的操作就好了,这个比较简单,微信公众平台的地址为 https://mp.weixin.qq.com

注册完后,就可以开始下载工具开发了,工具下载地址为 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

这是我做的项目的结构,有几个文件需要说明一下。

app.js 是项目文件的入口文件,用于创建应用程序对象。

举个例子:
app.js

1
2
3
4
5
App({  ...    
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,根据实际项目的情况,做相应的修改就可以了。

sitemap.json文件用来配置小程序及其页面是否允许被微信索引。

分享