《大前端三问》- 微信小程序开发学习笔记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已经完成~