1、前提
先说一句，任天堂就是世界的主宰！11月15日 宝可梦剑盾就发售了~
游戏内的一大特色就是他种类丰富的宝可梦们了，面对着拥有不同的属性的宝可梦们，训练师通常会选择不同的宝可梦进行对战以达到伤害的最大化，然而游戏内一共有18种属性，还存在双属性宝可梦，通过图表查询的方式又很笨重，于是想通过一个小程序，能查询宝可梦的属性克制状况。
2、起手
2.1、注册小程序
要注册注册一个小程序，首先要在微信公众平台申请一个个人账号，填写个人信息以及小程序用途后注册一个小程序，每个小程序都会对应一个唯一的appid，拿着appid就能进行小程序的开发了
2.2、IDE选择
官方提供了一个微信开发者工具，在chrome浏览器调试的基础上又集成了一些功能，可以模拟小程序在手机上的运行效果，可以实时得看见代码的运行情况，同时也可以生成预览的二维码，开发者扫描了二维码以后可以在真机上看到小程序的运行结果。我的习惯是在VSCode上进行大部分逻辑代码的编写，一些小规模的代码编辑或wxss样式的微调就在开发者工具上完成。
2.3、小程序框架
整体来说，小程序的框架与vue的方法使用方法比较相似，所以对有过vue项目开发经验的开发人员是很友好的。包括数据绑定、条件渲染、列表渲染等...
3、编写代码
3.1、项目结构
项目钟的文件通过用途进行区分，其中data中存储小程序所用的静态数据，images用来放小程序底部导航的小图标，utils来放wxs代码。
3.2、app.json
每个小程序项目的根目录上都会有一个app.json文件用来对微信小程序进行全局的配置，这次项目配置的内容如下：
{
"pages": ["pages/index/index", "pages/defend/defend"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "属性克制查询",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "攻击方查询",
"iconPath": "./images/search.png",
"selectedIconPath": "./images/search_active.png"
},
{
"pagePath": "pages/defend/defend",
"text": "防御方查询",
"iconPath": "./images/search.png",
"selectedIconPath": "./images/search_active.png"
}
]
}
}
1.pages:string[] 用于指定小程序由哪些页面所组成，且文件名不需要写后缀，框架会自动寻找相对应的.json、.wxml、.js、.wxss文件
2.window:Object 用于设置小程序的状态栏、导航条、标题、窗口背景色
3.tabBar:Object 小程序的导航栏，用于页面路由的切换,list只接受一个数组，且数组的长度大于等于2，小于等于5。可以配置显示的名字，图标以及路径。
3.2、静态数据存放
攻击伤害倍数的数据是以二维数组的形式存在js文件中的，可以通过已知的下标，轻松拿到某一行或某一列的数据，同时还保存了属性相对应的属性名以及页面上显示对应的背景颜色。
3.3、对功能进行区分
3.3.1、以攻击方属性作为条件进行查询
如数据存储的方式所示，若要以攻击方属性作为查询条件，只要在typeName中找到该属性的下标index，并取到damageTable[index]的值，就能拿到改属性所对应的所有数值。
3.3.2、以防御方属性作为条件进行查询
因为防御方存在单属性及双属性的情况，所以既要可以通过单属性查询，也要可以通过双属性查询，所以这里用到了小程序中自带的表单组件--picker，将mode设置成multiSelector，就可以实现多列选择的效果。然后再通过获取picker的值判断用户选的属性是单属性还是双属性，如果是单属性直接取出该属性在typeName中的位置index，并在damageTable中取出这一列的值进行渲染，若选的是双属性，则应该找出两个属性下标对应的列的值，再相乘，这样就能算出双属性伤害的倍数
3.3.3、体验优化
单纯的将倍数算出来其实还是不够方便，但如果能够根据伤害从高到低有一个排序，就会更加的直观明了，于是，又要把数据的倍数使用Array.filter()方法对数组进行筛选、排序，效果如下：
4.采坑总结
1.在wxml的模板中是不能直接调用方法的，只能进行一些简单的运算，如果想要在模板中调用方法，只能在wxs模块中写方法，再在模板中引用模块里的方法，而wxs是单独的模块，拥有自己的作用域，所以如果想要在wxs中拿到page中的数据，只能通过方法传参的方式。
2.wxs与js是不同的语言，它拥有自己的语法，目前使用下来的感觉就是不支持es6的语法，要用es5的语法来编写
3.wxs中的代码报错有提示，只会提示编译错误但没有显示错误内容，需要自己排查
4.新版本的小程序开始支持引用npm包，但是他不是直接引用npm包，而是先安装包，再使用开发者工具对npm包进行构建，做成适用于小程序的包。目前使用下来也有问题，如果安装的npm包不需要其他依赖的话就能安装成功，若安装的npm包有其他的依赖，开发者工具的npm构建不会带上这些依赖导致引用会报错
5、项目总结
虽然这次自己做的项目以功能来说是比较简单的，但是在编写代码的过程中，通过文档的查询、学习，对小程序的框架语法有了更深刻的认识。它的用法基本与vue相似，但也有一些新的特性。总的来说小程序还是对开发者很友好的，提供了很多组件，提供很多开放的接口给开发者如摄像头调起，图片保存到相册等...这些功能在html中是相对不友好有的甚至是不能实现的。后续也会继续学习使用相关接口的调用~
