微信小程序

• 准备

1. 先搞到一个AppID，登录微信公众平台-设置-开发设置-开发者ID-生成
   

   获得开发者ID.png

2. 然后下载微信web开发者工具

3. 安装好工具就可以开发了

   
   添加项目.png

• 起步

1. 当我们勾选创建一个quick start 项目时会自动生成一个demo

2. 项目通常包含.js、.json、.wxml、.wxss四个类型的文件,分别对应脚本文件、配置文件、页面文件和样式表文件

• app.json

1. 小程序中的每一个页面的路径都需要写在app.json的pages中，且pages中的第一个页面是小程序的首页(创建页面的时候直接在app.json里配置好路径，就会自动在对应的目录结构下生成四个文件)

2. app.json中的window对象用于设置小程序的状态栏、导航条、标题、窗口背景色，如下图。当然，.json文件中不允许添加注释，相关资料都可以在官方开发文档中查找到
   

   window配置.png

3. 其中enablePullDownRefresh属性需要稍微关注，与它相关的是用户的下拉事件onPullDownRefresh,如果这里是false或者不加配置（默认也是false）则会导致即使在.js中写了onPullDownRefresh也无效

最后一行的注释不可紧贴前一个字符，否则报错(猜测是因为没有,而小程序的开发工具对于ES6的支持似乎只有部分，最后一行加,也会报错)

注释紧贴的情况.png
末尾加逗号的情况.png

• 关于项目

简单介绍下项目

1. 项目是一个查询电影的应用，主要查询正在上映的电影和即将上映的电影，数据来源是豆瓣API，这个主要是练习目的，过不了审核无法发布
   

   审核未通过原因.png

2. 目录结构如下，其中images文件夹里存放加载图片以及下部导航的媒体组件

   
   目录结构.png

3. 首页展示，上方使用滑动图片，下方渲染列表，列表作为模板被每个页面引用

   
   首页展示.png
   swiper写法.png
   引用模板1.png
   引用模板2.png
   模板.png

• 开发中遇到的问题

1. 图片大小不受控制，将样式卸载全局wxss中解决

2. 调用api报错，需将https合法域名设置并同步到开发工具中
   

   设置request合法域名.png
   同步request合法域名.png

3. 发送请求前需要保存this

• 关于工具

工具除了一些基本的功能，有几个地方还是很讨喜，至少出乎我的意料

1. 设置-编辑器-外观，可以调节编辑器的风格

2. 设置-编辑器-编辑，可以设置修改文件自动保存，并且保存时可以自动编译小程序

3. 快捷键如格式化代码，代码上/下移，复制并向上/下粘贴都非常实用