微信小程序开发流程与常见问题
前言
作为一个前端开发人员，目前只会纯PC端开发已经远远不够，也需要移动端开发相关的技能，除了需要掌握H5，小程序也是其中技能之一。近期因为公司未来项目可能涉及到微信小程序，本人也花了些时间对小程序开发做了些了解和学习，以下是对小程序demo开发过程中相关流程以及遇到的问题进行记录与整理。
一、微信小程序注册与开发工具下载
根据指引填写信息和提交相应的资料进行注册，登录 mp.weixin.qq.com ，在菜单 “开发管理”-“开发设置” 看到自己的小程序的 AppID 。前往开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看《开发者工具介绍》。安装完成后，扫码登录开发者工具，可以新建或者导入小程序项目。
二、使用步骤
1.获取小程序模板代码与编译运行
新建小程序项目后，会生成小程序的通用模板框架以及最基本的一些内容，当然如果只是尝试体验，不需要进行版本管理（在实际工作中，代码都会进行管理，通常是通过GitHub或是GitLab，由于我们代码通过Gitlab管理，所以我记录的是自己的开发流程，每个人根据具体情况做不同的操作）。通过git工具，获取Gitlab仓库小程序模板代码，使用开发者工具导入项目，通过终端安装npm包（npm install），安装结束后，通过菜单“工具”-“构建npm”，即可完成模板运行环境的编译。
说明：从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。具体操作见说明文档。
2.全局样式使用及集成LESS
微信小程序主要分全局样式与局部样式。全局样式主要在app.wxss进行定义，例如全局使用的布局样式；局部样式通常是pages目录下页面独有的样式表或者组件独有的样式。由于之前主要针对于PC端和移动端（H5）开发，所以对于微信WXSS的书写特别“难受”，虽然语法跟CSS没有太大区别，但是平时使用惯了Sass或Less，对于样式的嵌套，变量的使用等，后者都能提升开发效率。所以希望可以在小程序中同样使用Sass或者Less，下面是项目中使用Less的详细方法。
这里我们首先需要通过VScode获取一个easy-less插件
安装好了插件后，我们可以在C:\Users\用户名.vscode\extensions下找到
复制mrcrowl.easy-less-1.6.3文件到微信开发者工具当中；粘贴扩展文件夹，打开微信开发者工具菜单栏，“设置”-“扩展设置”-“扩展”-“自定义扩展”点击，“打开扩展文件夹”，然后会打开一个文件夹，粘贴到这里就行了。
因为Easy-LESS默认输出的css，但是小程序中要使用.wxss的文件，所以设置一下输出的文件后缀。
至此，就可以在想要创建WXSS文件的同级目录下创建同名的less文件，编辑保存后会实时的生成同名的wxss文件（建议不要将app.wxss换成app.less，因为有坑，比如你引入We UI的时候，需要全局引入样式，但是less文件不支持wxss）
3.微信小程序调试简洁方法
微信开发者工具在每次编辑保存后会自动刷新跳转到首页，那么在开发非首页或者二级详情页时会很不方便，这个时候需要调整一下编译方式。默认编译方式为“普通编译”，我们可以自定义自己的编译条件，设置模式名称，启动页面的路由，以及启动参数，比如详情页，需要传递参数id=1,我们按照传统的key-value方式即可，即id=1，多个参数通过“&”拼接。（说明：小程序在登录时，通常在app.js onLauch 处理登录逻辑, 但是登录操作是异步请求，在未换取到业务后台的token时，首页业务接口会触发，所以在首页会有相关登录回调操作保证token存在，但是其他页面设置简洁调试的时候回无法获取token，建议在搭建页面布局样式、不需要调取接口获取数据时使用该方法）
二、常见问题
- 微信小程序接口调用方法封装：
微信小程序基于wx.request() API进行异步请求，需要对wx.request进行封装，这样可以避免每次请求的基础配置重复书写；相同类型的异常统一处理；精简了返回数据的格式等
- 微信小程序第三方组件使用（F2）：
F2为了方便小程序的使用，封装了微信小程序的自定义组件，故需要微信小程序支持使用 npm 安装第三包。具体使用方法参考该使用文档
微信小程序真机调试wx-f2报错(“Cannot read property ‘createView’ of undefined”)
- 微信小程序嵌入H5：
需要使用web-view承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。（说明文档）
- 微信小程序组件问题记录：
tabs: 无法再tabs中嵌入列表内容（问题详情与解决方案）
toast - loading: toast 与 loading 冲突问题（问题详情与解决方案）
总结
主要对小程序开发相关流程以及遇到的问题进行记录与整理，细节不够完善，后面会持续优化。