微信小程序开发 | 01 - 快速上手小程序开发

Posted 2021-05-29 Mculover666

一、微信小程序开发工具

参考官方安装文档进行安装。

二、小程序代码构成

1. 工程结构

小程序工程中默认工程结构如下：

• pages文件夹
• utils文件夹
• app.js
• app.json
• app.wxss
• project.config.json
• sitemap.json

2. 小程序配置文件

2.1. 小程序全局配置文件

app.json是小程序全局配置文件，参考文档，包括：

• 小程序所有页面路径
• 界面表现
• 网络超时时间
• 底部tab

内容如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

① pages选项是小程序所有页面路径，新建页面时，在pages中直接添加新页面路径，保存后开发者工具会自动生成新的一页相关文件到pages文件夹下；

pages数组中第一个值，是小程序打开后加载的第一个页面。

② windows选项用于设置小程序的界面，背景颜色、导航栏背景、导航栏文字、导航栏文字颜色。

③ 底部菜单栏默认没有，可以手动添加进去：

 "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/picture.png",
        "iconPath": "images/picture.png",
        "pagePath": "pages/index/index",
        "text": "图片集"
      },
      {
        "selectedIconPath": "images/video.png",
        "iconPath": "images/video.png",
        "pagePath": "pages/video/video",
        "text": "视频集"
      },
      {
        "selectedIconPath": "images/dance.png",
        "iconPath": "images/dance.png",
        "pagePath": "pages/about/about",
        "text": "关于我"
      }
    ]
  },

效果如图：

④ 网络超时事件默认没有，可以手动添加：

"networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },

2.2. 开发工具配置文件

小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

3. Page页面组成

网页编程采用的是 html + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，WXML用来描述当前页面结构，WXSS用来描述样式，JS用来处理页面和用户的交互。

另外，为了区分当前页面和全局配置文件，page还拥有.json配置文件，用来配置当前页面的属性。

为了使用更方便的less样式表，可以借助VScode安装扩展，使微信小程序开发工具支持less样式文件，安装参考教程：小程序使用less编译方法。

接下来以一个个人作品集小程序，学习如何开发微信小程序。