微信小程序-介绍和开发准备

一：背景

1：为什么会有小程序？

 　　需求角度：为了满足市场需求，为了满足人的消费方式。

　　技术角度：公众号页面加载缓慢和白屏现象，小程序就是为了能够让页面快速加载。

2：什么是小程序？

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想；

用户扫一扫或者搜一下即可打开应用，也体现了“用完即走”的理念；

用户不用关心安装太多应用的问题，应用将无处不在，随时可用，但又“无需安装卸载”

 

3：小程序和移动应用程序的区别？

 　　无需安装、不占内存、易传播

4：小程序能做什么？

　　

　　

 

二：小程序开发准备

1：申请小程序的账号

　　

1.1 打开微信公众平台官网

　　　

　　

　　

1.2 激活邮箱

　　

1.3 信息登记

　　

　　

　　

1.4 微信小程序管理后台

 　　我们平时在 https://mp.weixin.qq.com/  登录时，就会进入到这个后台

　　

　　点击填写进入小程序信息界面

　　

 

2：安装微信开发者工具

 进入官方文档

 

 

下载

下载好后安装

 

 

三：了解微信开发者工具

可以参考官网介绍。官网介绍非常详细

1：目录结构

 

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

　　

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

 

其他：

2：小程序代码的构成　

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

2.1 小程序配置文件json

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

2.1.1 app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

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

我们简单说一下这个配置各个项的含义:

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

其他配置项细节可以参考文档 小程序的配置 app.json 。

 

四：微信小程序的开发