《大前端三问》- 微信小程序开发学习笔记1

本系列为对微信小程序学习的笔记

1 小程序的特点

1、 更方便、更自由

无需要安装,无需要卸载,用完即走,几乎不占内存

2、 易传播

易传播,可以在微信内传播、运行、分享。

1.1 各种类型的小程序

  • 内容/工具类
  • 零售类
  • 游戏/娱乐类

2 小程序开发准备工作

  1. 注册小程序帐号(mp.weixin.qq.com);
  2. 激活邮箱;
  3. 信息登录
  4. 登录小程序管理后台;
  5. 完善小程序信息;
  6. 绑定开发者(多人协同开发);

微信公众平台官网 地址
小程序教学文档 文档地址

3 开发工具介绍

打开工具后,首先选择开发小程序项目,进入小程序项目主页。这里可以新建小程序项目。

3.1 开发者工具

3.1.1 工具介绍

  1. 工具栏
  2. 代码编辑器:
  3. 模拟器:可以即时看到项目当前的可视状态。
  4. 调整器:对代码与项目进行调试

3.1.2 项目结构

全局文件

  • app.js: 注册
  • app.json: 对此小程序的全局配置(全局超时时间,窗口表现)
  • app.wxss: 小程序全局样式
  • project.config.json: 项目的全局配置,可以备份此项目你当前的个性配置
  • pages/ : 页面目录,存放项目所有的页面代码
  • utils/ : 存放可复用的工类代码

pages/ 每个小程序页面最多由4个文件组成

  • page.js : 页面的逻辑与数据交互
  • page.json : 配置页面的配置信息
  • page.wxml : 配置页面的元素与内容
  • page.wxss : 设置页面元素的样式

4 开发第一个Hello

4.1 创建小程序项目

在小程序项目主页,选择右下方的“+”号,添加一个小程序项目。

  • 项目目录:项目在你主机硬盘中存放的目录;
  • AppID:你在微信公众平台官网上注册的小程序的AppID;
  • 项目名称:项目的名称

4.2 建立项目的结构

项目目录结构
1
2
3
4
5
6
7
8
9
10
11
12
├── app.js
├── app.json
├── app.wxss
├── pages
│   └── index
│   ├── index.js
│   ├── index.json
│   ├── index.wxml
│   └── index.wxss
├── project.config.json
└── utils
└── util.js

4.3 全局文件

4.3.1 app.js 全局生命周期管理逻辑

App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。我们这里先传一个空对象,也就是先不对生命周期回调做处理。

app.js
1
2
3
App({
})

4.3.2 app.json 全局项目配置

app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

更多关于 app.json 配置

  1. pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  2. window字段 —— 小程序所有页面的顶部背景颜色,文字颜色定义在这里.
app.json示例
1
2
3
4
5
6
7
8
9
10
11
{
"pages": [ // 配置小程序页面信息
"pages/index/index" // 主页
],
"window": { // 配置小程序窗体
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#1E90FF",
"navigationBarTitleText": "智能尘埃",
"navigationBarTextStyle": "black"
}
}

4.3.3 app.wxss 全局样式

这里先置空

4.4 页面

4.4.1 index.js 页面逻辑

Page函数可以管理页面上的生命周期回调及事件回调等。

index.js
1
Page({})

4.4.2 index.wxml 页面布局

小程序的页面使用XML的方式布局,每个控件是其中的一个元素,比如这里放了一个view控件 。

index.wxml
1
<view>Hello World!</view>

4.4.3 index.json 页面配置

管理页面的配置,这里也先置空,使用个空对象

index.json
1
{}

4.4.4 index.wxss 页面样式

这里设置文字居中显示,这里的样式类似CSS。确实,WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

  1. 新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
  2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
  3. 此外 WXSS 仅支持部分 CSS 选择器
index.wxss
1
2
3
4
5
view {
width: 100%;
height: 40 rpx;
text-align: center;
}

至此,我们的第一个 Hello-World demo已经完成~

坚持原创技术分享,您的支持将鼓励我继续创作!