编程

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

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

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

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

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

刚开始做小程序，像使用邮箱注册账号等一系列的步骤，按照官方的提示，一步一步的操作就好了，这个比较简单，微信公众平台的地址为 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文件用来配置小程序及其页面是否允许被微信索引。

Share