微信小程序入门学习过程

背景：想学习微信小程序开发，决定自己做一个小程序来熟悉大致过程

开发过程：

1. 首先，需要注册登陆https://mp.weixin.qq.com/微信公众平台申请小程序账号（个人邮箱如果已经申请了公众号账号后不能使用同一邮箱再申请小程序账号）；
2. 浏览开发文档https://developers.weixin.qq.com/miniprogram/dev/framework/，了解小程序的目录结构、基本配置项和框架使用方法。拥有Vue相关基础的话，基本无障碍学习小程序开发；
3. 下载微信开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html，完成下载安装后按照开发工具引导建立第一个小程序。这里笔者新建的是不涉及云开发的纯前端程序，语法使用JavaScript。新建完成后给出的小程序会包含一个的登陆页面及日志页面的示例项目，这个项目微信并没有更新，不包含一些新语法，但还是推荐仔细阅读一下用来学习小程序的全局配置，架构和语法信息。
4. 之后熟悉一下微信开发工具的大致用法，工具可以实现小程序的API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能，而且可以直接关联了微信的git代码版本维护功能（工具确实不如主流编辑器好用，使用不习惯的同学可以在此处进行新建项目以及调试预览，代码编辑和版本维护的话可以使用自己常用的开发工具进行开发）。
5. 终于开始正式开发了，新建一个页面，并在app.json里面加入tabBar信息（这个个人觉得小程序开发都会配置吧，但是示例里没有配置，可以直接在开发文档里搜索照着配置），将新建页面的路由设置到tabBar
6. 页面开发过程除了自己要写的逻辑，当然少不了*，微信提供了一套通用WeUI可以直接引入使用，使用方法就两个步骤：

   1. 在页面的json文件中引入
      {
        "usingComponents": {
          "mp-icon": "/weui-miniprogram/icon/icon" // 这个官方示例路径是../.. 实际直接使用绝对路径就能直接使用
        }
      }
      
      在页面的wxml文件里就可以直接使用
      <mp-icon type="field" icon="transfer2" color="#353535"></mp-icon>

       

7. 或者可以使用npm功能，微信小程序开放npm支持https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
8. 对于需要自己抽象的此项目的公共方法可以在util中实现，在文件中使用module.exports导出及require到处
9. 对于需要自己抽象的组件可以新建component文件夹，引入时在页面中配置

   1. {
        "component": true, // 这个不要忘了
        "usingComponents": {
          "header": "/component/header/index"
        }
      }

       

注意点（以下是初次开发遇到的一些问题记录）：

1. 微信开发文档表明了API使用和配置，但是对于相关问题没有提供太多的解决方法，这时候充分利用开发文档上方的社区，常用问题基本都有解决，社区是有官网开发人员解答疑问的；
2. 使用TypeScript或JavaScript在引入npm的时候会发现测试项目的路径有细微的差别，这点需要注意
3. scroll-view如果不能滚动，可以查看是否将scroll-view设置了固定高度
4. 接口的mock数据不需要引入其他配置工具或服务，开发工具控制台提供了mock的TAB直接配置使用
5. 开发一期完成后发现了微信开发工作控制台中的Audit性能测试，通过测试遇到了几个问题
   1. 提示setData设置了一些视图层未使用过的变量。这个解释下，微信setData除了更新数据，还是通知视图层更新相关视图，如果数据从未在视图层渲染（比如一些计数逻辑），可以直接在page对象里申请个用于记录，无需要使用setData进行更新Page({diyData: {test}})，之后直接使用this.diyData.test更新
   2. 提示字体颜色影响体验，这个其实是指字体和背景颜色对比度不够，这个由于个人缺乏美感，所以找了两个工具https://hexnaw.com/ 和https://www.checkmycolours.com/能够对比不同颜色的对比度值

写在最后：

初次使用小程序开发，使用的功能和遇到的问题都比较浅显，在此记录以下