前言

好久没碰微信小程序了。周五，一个朋友说他有多余的钱，问我能不能做。我和几个朋友一起考虑过。当我回到家时，我同意了。几个朋友凑在一起，用了两天完成。因为程序要求不是很高，而且好久没写技术文章了，所以也整理了一个微信小程序。常用API开发技巧，想做小程序的朋友可以看看

第一章 了解微信小程序

微信小程序是一种连接用户和服务的全新方式，无需下载安装即可使用。它可以很容易地在微信中获取和传播。“ 经验。

微信小程序已经成为一个开放平台，可以让开发者将自己的想法做成微信小程序服务，放到平台上供人们使用。通过微信小程序的开发，应用将无处不在，随时可用。在开发之前，需要进行注册、绑定开发者等一系列操作。详情请移步微信官方文档。

我看的教学视频是2017年初拍摄的，所以当时最新的开发者工具版本是0.11.微信小程序开发如何跳转页面，官方文档中提供的最新版本是1.0< @2.版本。难道真的不用下载安装就可以使用了吗？

不，微信小程序的安装包不到1MB（最新版本改为2MB）。用户点击使用时，安装包不到1MB。下载安装时，用户自己感受不到。

前后端分离的开发方法

前端先创建假数据，可以很好的展示在页面上，然后与服务器数据进行相应的连接。前端驱动服务器开发的设计理念。这样做的目的是让设计更合理，API更方便。

小程序特点小程序对开发者的影响小程序学习基础第二章小程序环境搭建与开发工具小程序开发环境介绍

去开发工具下载地址下载

下载完成后，扫描微信打开开发者工具，选择New

选择使用测试号（因为注册小程序号比较麻烦）

其他选项设置好后，选择创建新建小程序项目

平台会自动生成小程序的demo

这个工具的左边是效果区，右边是代码区。它有一个功能，修改一些参数可以在不编译的情况下预览。直接按Ctrl+S就可以看到修改的效果了。

调试区用于调试带断点的代码。点击上方菜单栏的调试工具按钮，打开调试区域。

调试区的js文件：

sm后缀的文件就是断点调试用的文件，和写的代码一样。

没有sm后缀的编译文件和写出来的代码是一样的。只是第一行出现了一条编译好的消息。

对小程序数的开发者没有限制

1、无法上传发布小程序

2、不能在真机上运行，​​只能在PC模拟器上运行

3、录音、网络状态、指南针、通话等功能不可用

4、获取用户信息的过程是模拟的而非真实的

不过不影响我们学习小程序开发

调试的几个区域

在断点状态下，快捷键和是一样的。

Area——系统编译区

注意：当调试区打开时，点击下图标记的按钮，可以在调试区单独打开一个窗口，将折页放在窗口底部。

zone——网络信息列表

完全一样

- 本地缓存列表

用于查看小程序本地缓存数据

区域 - 所有页面都绑定数据

wxml专区——小程序的UI界面及代码调试

当鼠标悬停在右侧的代码上时，对应的 UI 元素会显示在左侧页面上

模拟器上方菜单栏有前后切换按钮，用于模拟打开其他小程序和后台运行程序的动作。在后台运行时，小程序中会触发一个事件。

注：如何快速打开小程序api文档-点击上方菜单：微信开发者工具->关于->打开api文档

第 3 章 从欢迎页面制作小程序

生成小程序后，点击其主页面进入子页面，查看启动的日志信息。

小程序文件类型和目录结构

应用程序与页面的关系

注意：下图中的无限数只是理论上的。太多的页面违背了小程序的原始设计。小程序整体压缩文件包大小超过1MB，无法上传（最新版本上传限制为2MB）。

无限

无限

无限

申请入口

一级页面

二级页面

3、4 和 5 级页面 - 最高 5 级

每个页面由以下文件组成

wxml

wxss

json

js

小程序自生成目录结构

在 app.json 中设置打开哪个页面

PS：json文件不能随意注释。

注册小程序页面、View\\Text等组件使用

图像大小 px 和 rpx：

这里的px不是指图像属性的物理像素，而是逻辑分辨率的概念。物理分辨率和逻辑像素之间的 2:1 关系。也就是说，上面，2rpx=1px。

为了动态适配不同分辨率的设备，我们使用rpx（逻辑分辨率）进行适配。设计图为0-750像素，大小可直接转换为rpx。

如何样式：

方法一（动态样式）：给标签添加属性，写入当前标签样式

方法2（静态样式）：写wxss文件——给标签添加一个属性，通过选择器写css样式。wxss 文件不需要单独引用。因为某个名称下的所有文件都已注册。

例子：

wxml 文件：

wxss 文件：

Flex 弹力盒模型

用于对齐堆叠的元素并在列中显示它们

: 列排列

行：水平排列

- 用于设置对齐布局，表示左右居中

可以在全局样式设置中设置全局相同的样式。

关于背景：

- 的颜色不能直接在容器中设置。因为容器没有设置高度和宽度，所以它适应内部元素的高度和宽度。如果直接给一个高度，如果里面的内容是动态内容，可能会超过指定的高度和宽度，导致内容溢出。解决方案：

经过调试，我们发现系统在我们指定的视图容器之外还包裹了一个叫page的容器。让我们设置页面的样式

设置导航栏的背景颜色：

app.json中有配置项设置小程序的标题、状态栏、导航栏、窗口背景颜色。

用于设置导航栏的背景颜色。

移动终端分辨率和小程序自适应单元RPX从一个设计图的实现开始

如何在不扭曲比例的情况下显示图像？

1 pt 可以由 1 px 或 2、3 甚至更多组成

pt下的px越多，图像显示越细腻。两次都达到了人眼能分辨的极限，所以plus版并不比6和6S更清晰。

下一个 2 px 形成 1 pt

PPI=px 根数/屏幕大小

为什么模拟器下ip6分辨率是375而设计图一般是750

因为微信小程序显示的375是逻辑分辨率，而设计图一般给出物理分辨率。

如何适应不同的模型

以rpx为单位，小程序会自动转换成不同的分辨率。

如果您按照尺寸进行设计，那么像素就是 rpx。

并非所有单位都适合 rpx

比如rpx不适合文字，否则设备适配后看不清文字。错误：1 //.js 有脚本错误或 Page() 没有正确调用

需要在这个js中写一个page方法，里面什么都可以写。

第四章发展新闻阅读清单

1、在page文件夹下新建一个文件夹，在里面新建一个.js.wxml.wxss文件，在.js文件里面填上空的Page函数（不填会报错报道）。

2、将新建的.wxml文件的地址添加到原app.json的属性数组中（放在最前面的时候，运行时默认显示）。注意：快捷键F1打开命令面板，有很多快捷键选项

组件的应用------旋转木马

代表轮播，其中的单词 -item 代表每个图像。

代码示例：

的相关属性：

App.json中导航栏和标题的配置

在子页面的json文件中，可以配置页面的导航栏颜色等配置，不影响全局配置。

但是只能配置这个参数的属性，所以没有标注。直接展开app.json中的参数，平铺到子页面的json文件中。

绝对路径和相对路径

一些代码示例

.wxss

经验：水平用rpx，垂直用px。（如果元素太少无法换行，也可以使用水平px）

.wxml

页面和应用程序生命周期

在编码过程中，您可以使用脚本文件将服务器的数据连接到小程序。

编写脚本文件时，在js文件中输入page，开发工具会生成一个默认的脚本文件结构。

js文件的所有脚本代码都会运行在一个名为Page的json结构中。

它包含以下生命周期函数：

应用生命周期：

首先执行页面初始化()->页面显示()->页面渲染完成()

注：js脚本可以自定义函数调用

小程序在公众平台的完整生命周期图如下

数据绑定（核心）

在web开发过程中，我们要在页面上显示一条数据的操作是：

先获取DOM对象，然后对获取到的节点的数据进行操作。

在小程序中倡导数据优先的思想。小程序不支持DOM，所以小程序开发中的操作应该是：

将json格式的数据放在js脚本的data属性中，在wxml文件中用双大括号调用。

一个例子如下：

js脚本：

wxml:

这里小程序实现的数据绑定是单向数据绑定

也就是说，数据从脚本文件传递到wxml文件时可以直接赋值，但是如果数据被wxml文件改变了，脚本文件中的数据是不会改变的。如果想通过wxml改变脚本文件中的数据，需要采取事件传递的形式。

显示从服务器动态获取的数据

假设数据是从脚本文件动态获取到服务器的，数据应该在页面初始化后显示。也就是说，数据绑定操作应该写在函数中，然后用()函数将其平铺到数据数组中。

例子：

js脚本

对应的wxml文件

笔记：

属性用“”赋值时，数据绑定的操作和逻辑无法达到预期的效果

原因：分配给该属性的属性是一个字符串，小程序在解析该字符串时会将其转换为布尔值，该字符串的布尔值为true。

示例如下：

解决方法：使用数据绑定语法，将其括在双花括号中，以便将其解析为 .

同理，当一个属性设置为true时，随机字符串的值会被解析为true。

如果js脚本再包裹一层json对象，则需要通过“{{ name. name}}”调用

例子：

注意：相邻的两个数据绑定可以正常解析。

wx-if：控制标签元素的显示和隐藏

使用示例：

当然，标签元素的显示和隐藏可以通过脚本文件进行动态控制。

可以在数据绑定的双花括号内进行简单的操作

例如：

同样，加减乘除的数字计算也可以在双花括号内进行。

wx-for：循环显示数据

如果服务器接收到的数据是json数组，动态显示需要小程序的for循环。

json数组示例：

以上方法会导致无法显示的问题

原因：这个。方法是将参数平铺到数据数组中，循环显示时不会完整显示。

解决方法：给数据数组一个key，放到data里面，这样解析的时候数据就是一个数组。

wxml显示示例：