一.写在前面

1、为什么要学习小程序开发？

对于前端开发来说，微信小程序因其简单快捷、开发成本低、用户流量巨大等特点，成为前端开发工程师必须掌握的技能。

2、开发准备：

（1）有人开玩笑说，如果你会Vue小程序，就根本不用学：

微信小程序虽然是腾讯自己开发的，但是核心思想和Vue等框架是一样的~

（2）善于收集精致的小组件：“我们不生产代码，我们只是代码的搬运工”。 善于找到自己想要的组件，并巧妙而优雅地组装成一个大项目，也是程序员的一项基本功。 。

具体来说，如何找到自己想要的小程序demo呢？ 文章最后我会向大家推荐小程序资源。 有许多大师的项目。

卷起袖子开始吧

1.注册小程序账号并下载IDE

1. 官网注册并下载IDE。

2.官方文档永远是最好的学习材料。

注意：

（1）注册账号后会有一个appid，新建项目时需要填写，否则很多功能无法使用，比如预览、代码上传等。

（2）如果您已经注册了微信公众号，请务必注意，微信公众号和小程序是两个账号，它们的appid也不同。 小程序开发必须使用小程序的appid。

2、小程序框架介绍及运行机制

1、我们创建了一个“通用快速启动模板”，整个项目目录如下：

2.app.js

整个项目的启动文件，如注释中写的方法，主要有三大功能：浏览器缓存，存储和检索数据； 登录成功回调； 并获取用户信息。

它是定义整个项目的全局变量或常量。

3.app.json

整个项目的配置文件，比如注册页面、配置tab页面、设置整个项目的风格、页面标题等；

！ 注：小程序启动时默认首页为app.json页面中的首页。

4.页数

小程序的页面组件每一个页面都会有几个子文件夹。 例如，快速启动模板有两个页面：索引和日志。

5.打开索引目录

可以看到有3个文件，其实和我们的Web开发文件是一一对应的。

index.wxml对应index.html；

index.wxss对应index.css；

index.js是一个js文件。

一般我们还会为每个页面组件添加一个.json文件，作为页面组件的配置文件，并设置页面标题等功能。

6.双击index.js文件

(1)var app = ();

引入整个项目的app.js文件，用于获取公共变量等信息。

如果想使用util.js工具库中的方法，可以在util.js中导出，然后在需要的页面获取。

（2）比如，当我们想要获取豆瓣电影时，需要调用豆瓣的api； 我们首先在app.js中定义它

然后在index.js中使用app..来获取这个值。

当然，您也可以在页面需要时对这些常量使用硬编码值。 但为了整个项目的维护，建议将此类公共参数写入配置文件中。

（3）接下来，在整个页面（{}）中，第一个数据是本页面组件的内部数据，会渲染到页面的wxml文件中，类似vue和react~

通过修改data数据来驱动页面渲染

(4)一些生命周期函数

例如()、()、()、()等，监听页面加载、页面初始渲染、页面显示、页面隐藏等。

您可以查看官网API了解更多信息。 最常用的是()方法和()方法（设置页面共享的信息）

7.wxml模板的使用。

比如本项目的电影页面，使用最小的星级组件wxml作为模板，从明星到电影再到movie-list，一层层嵌套。

在star-.wxml页面写入name属性； 然后导入的时候通过name获取

8.常用的wxml标签

view、text、icon、block、-view等，这些标签可以直接查看官网文档。

3、小程序框架、各页面及发布上线注意事项

1.整个框架需要注意的一些点

(1)整个wxml页面的底部标签是哦。

（2）每个页面顶部导航栏的颜色和标题是在本页面的json中配置的。 如果没有配置，则取app.json中的总配置。

(3)不能用json写注释，否则会报错。

(4)路由相关

1）如果你使用wx. 跳转到tab页，除了在app.json中注册pages页面外，还需要在app.json中注册tab页才能生效。

注意：最多有5个选项卡，也就是我们所说的顶部或底部最多5个菜单。 其他页面只能通过其他路由方式打开。

2）跳转到非标签页，如欢迎页面、电影详情页面、城市选择页面； 在app.json中注册后，就不能在里面注册了，否则无法跳转。

3）跳跃。 新打开的页面左上角没有返回按钮。 该项目仅在切换城市时使用一次。

(5) 页面间传递参数

将参数写入重定向的URL中，然后另一个页面接收方法中传递的参数。 通过并获取id如下

(6) 使用以 data- 开头的自定义属性

比如我们在wxml中怎么写

点击事件对象可以这样取，var = event...;

注意：大写字母将转换为小写字母，_ 符号将转换为驼峰式大小写。

(7)事件对象event、event的区别。 和事件：

指的是当前点击的组件，指的是事件捕获的组件。

例如，应该绑定轮播组件的click事件，这样就可以监听是否有图片被点击。

此时引用的是image（因为点击的是图片），引用的是（因为上面绑定了点击事件）

(8) 使用免费网络接口：

本项目使用了天气API、腾讯地图API、百度地图API、豆瓣电影API、头条新闻聚合API等，具体使用请参考各自官网的接口文档，非常详细。

注意：免费接口有访问限制，所以如果你用这个接口与别人的组件配合使用，最好自己注册一个新的密钥并替换。

附件是免费接口的完整列表：

！ ！还要注意的是，这些接口的域名必须配置为小程序的合法域名，否则将无法访问。

(8)wxss有一个陷阱：它无法读取本地资源。 例如，如果本地使用背景图片，就会报错。

将本地图片转为在线图片有以下几种方式： 上传到个人网站； QQ空间相册等也是可以的。

2.切换城市页面：

（1）使用首页跳转至城市切换页面。 由于首页没有关闭，所以切换城市后返回时，天气信息还是旧的。

正确的处理逻辑如下：

1）使用跳转切换城市页面，本质上就是关闭所有页面，打开新页面。

2）切换到城市页面，将公共变量中的城市信息更新到手动切换的城市区域，然后返回首页触发首页重新加载。

3）首页添加获取城市信息时的判断。 如果全局的不可用，请使用全局的。 如果全局的有的话（比如刚才设置的），就使用全局的。

(2) 滚动并返回城市列表顶部

基于-view组件的-top属性，初始值为0，滚动会增加； 点击返回顶部，设置为0则返回顶部。

3.天气页面

(1)初始化页面、天气显示逻辑

首先调用wx. 小程序的方法获取当前的经纬度，然后调用腾讯地图获取当前的城市名称和区县名称，并将其存储在公共变量中。

然后调用检查天气和空气质量的方法。

(2)容错处理

城市的名字长短不一，有的名字特别长，比如巴彦淖尔市。 需要动态获取完整的城市名称；

部分偏远城市暂时没有天气信息。 我们需要对返回的结果进行判断。 如果没有信息，我们需要给用户一个很好的提示信息。

4.周边地图服务页面

（1）调用百度地图各项服务查询酒店、美食、生活服务三类信息。 更多信息请参见百度地图文档。

（2）点击时为被点击的图标添加边框，数据驱动视图，所以使用长度为3的数组来保存三个图标当前是否被点击的状态。

然后wxml根据数据动态添加类和边框样式。

5.豆瓣电影页面

（1）电影详情页的预览图是在小程序本身实现的。

（2）详情页通过()方法监听用户上拉的触底事件，然后发送请求继续获取数据，达到延迟加载的效果。

(3)优化用户体验。 7分等整数分数在js中改为7.0分，然后wxml模板判断分数是否为0，显示“尚未评分”

(4)搜索完成后清空搜索框

因为在小程序中无法通过这种方式获取元素，只能通过数据来控制。

给data添加一个属性，用来保存搜索框的内容，并将其绑定到input的value属性上。 当搜索完成或者点击X时，变量被清空，达到清空输入框的效果。

6.新闻页面

（1）免费聚合头条新闻接口仅返回新闻的基本信息，不包含新闻的主要内容。

我找了很多新闻界面，但似乎都没有主要的新闻内容。 如果有人知道更好的接口，请留言告诉我~

（2）当然，你也可以自己爬取新闻网站的数据。