微信小程序应用开发赛全国三等奖总结，以及关键点汇总，开发基本功系列（含云开发笔记、wxcharts数据可视化）

在华南赛区近千支队伍里以第四名脱颖而出，成为唯一一支入围国赛的专科队伍。
当时是专科大二，省赛作品提交剩下两个月左右我们才报名，然后开始学小程序，边学边开发，没想到第一次参加比赛就拿到国奖，兴奋了好久。

在那之后就转战算法领域了，对算法有兴趣的小伙伴可以看看我其它博客，说起来也很巧，后来参加2021CCSP全国赛也是唯一一支入围的专科队伍哈哈哈
链接戳这里：
CCSP全国赛总结

下面是微信小程序的一些关键点总结。

1. 每个页面其实仅仅是个对象

上图是一个极其复杂的小程序，但是相信知识渊博的各位都能马上看懂。

这段代码运行起来只有一个字。

然后我们稍加修改变成下图这样。

如果没有研究过微信小程序运行机制的小伙伴也许会喊到：“wtf！？那个字呢？js文件会影响页面样式？？？”

没错，微信小程序的js文件确实会影响页面样式，因为每个页面其实就是一个Page对象，如果没有这个page对象那页面运行起来 就和你在我这篇博客上看到的任一 一处空白一样，甚至可以说它根本没运行起来。

顺势提一个开发过程很容易造成严重bug的关键点：
wx.redirectTo(OBJECT)官方解释为：“关闭当前页面，跳转到应用内的某个页面。”

其中 ‘关闭当前页面’ 的真实情况是：关闭当前页面js文件中的这个page对象。

如果像上图这样在page外定义一个全局变量num，你使用那些所谓 ‘关闭页面并跳转’ 的方式并不会将num清空，再打开这个页面也不会再为num赋值。

如果这个全局变量num是用来记录某些业务并能影响到后台数据库，或者跟一些深层嵌套循环相关。在没有恰当的起止值控制时可谓是核弹级漏洞，能在不知不觉中扰乱业务逻辑。

毕竟大家都没时间去研究小程序的底层运行原理，堆栈分配情况自然也都不能摸清，但是像这种运行机制还是必须要清楚的，这样才能写出高质量、安全的代码。

2. 正式版中的所有路径都不能包含中文

之前没留意有个图片路径包含了中文，电脑开发者工具正常显示、手机开发版正常显示、手机体验版正常显示，好家伙上了正式版之后就不显示了，真是扣工资系列故事。

前人种树后人乘凉，树全是前人用钱种的。

3. 如果setData的key是变量

就怕新手以为key必须是常量，那你这程序没法编下去了
直接上代码吧，加中括号就行

this.setData({ 
        [key]: value
    })

4. background-image不支持本地图片

那些因为流畅度或其他因素压迫下非要用本地图片的朋友可以考虑：

<image class:"bg" src:"本地路径"></image>

.bg{
position:absolute;
width:100%;
height:100%;
z-index:-1;
}

5. UI设计重点：顶上的导航栏和页面内容 如何融洽相处

技术的讲完了来点页面设计方面的放松一下，毕竟干小程序开发的大部分都是全干工程师了吧哈哈
如何让整个页面风格统一，边界不显得锋利呢？

下面例图均来源于我和伙伴开发的一款公益小程序（慢性病饮食调理方面）
《病从口出》感兴趣可以去搜一下

1. 利用某形状顺带出来
   

2. 将导航栏自定义，内容相互贯通
   

3. 页面背景色与导航栏颜色设置为同色
   

4. 半延伸
   

5. 边界软化（渐变）
   

6. 相近颜色
   

6. 意见反馈API

<button open-type="feedback"></button>

一行代码搞定
微信自带的API，调用就能进入下图这个页面（注意：手机上才能看到，开发者工具没有反馈页面）
适合于功能较少的小程序，个人页面没有东西放，就放个意见反馈吧。

7. 云开发笔记（重点！）

之前因为没摸清云开发就开始开发了，吃了不少亏，这里把云数据库基本的用法都列出来，希望各位不要走我的路。

1. field返回指定字段

//只返回 description，progress 两个字段：
db.collection('数据库名').field({
  description: true,
  progress: true,})
  .get()
  .then(console.log)

2. skip从第几条开始读（跳过）
   
3. limit返回规定条数的数据
   
4. orderBy查询的数据排序）
   
5. remove删除数据
   
6. update修改数据
   
7. add添加数据（如何添加date日期类型数据）

 db.collection('blog').add({
        data:{
          name: "我还能肝",  
          time: db.serverDate() //获取当前服务端的时间
        }

8. doc查询（返回单个对象）
   

9. where条件查询（指定范围查询）
   

10. where模糊查询（利用正则表达式）

//查询desc字段中包含"厉害呀"的数据
conn.collection("menu")
      .where({
        desc: {
          $regex: '.*' + "厉害呀" + '.*',
          $options: 'i'
        }
      }).get()
      .then(res => {
      })

8. 数据可视化wxcharts

wxcharts是一款专为小程序研发的一款超轻量级数据图绘制插件，折线图、曲线图、饼图、柱状图均可绘制，一般的需求都能满足，推荐给有需要的朋友。
例图：

插件去github上搜索就可以下载

说明文档：
opts Object
opts.canvasId String required 微信小程序canvas-id
opts.width Number required canvas宽度，单位为px
opts.height Number required canvas高度，单位为px
opts.background String canvas背景颜色（如果页面背景颜色不是白色请设置为页面的背景颜色，默认#ffffff）
opts.enableScroll Boolean 是否开启图表可拖拽滚动 默认false 支持line, area图表类型(需配合绑定scrollStart, scroll, scrollEnd方法)
opts.title Object (only for ring chart)
opts.title.name String 标题内容
opts.title.fontSize Number 标题字体大小（可选，单位为px）
opts.title.color String 标题颜色（可选）
opts.title.offsetX Number 标题横向位置偏移量，单位px，默认0
opts.subtitle Object (only for ring chart)
opts.subtitle.name String 副标题内容
opts.subtitle.offsetX Number 副标题横向位置偏移量，单位px，默认0
opts.subtitle.fontSize Number 副标题字体大小（可选，单位为px）
opts.subtitle.color String 副标题颜色（可选）
opts.animation Boolean default true 是否动画展示
opts.legend Boolen default true 是否显示图表下方各类别的标识
opts.type String required 图表类型，可选值为pie, line, column, area, ring, radar
opts.categories Array required (饼图、圆环图不需要) 数据类别分类
opts.dataLabel Boolean default true 是否在图表中显示数据内容值
opts.dataPointShape Boolean default true 是否在图表中显示数据点图形标识
opts.disablePieStroke Boolean default false 不绘制饼图（圆环图）各区块的白色分割线
opts.xAxis Object X轴配置
opts.xAxis.gridColor String 例如#7cb5ec default #cccccc X轴网格颜色
opts.xAxis.fontColor String 例如#7cb5ec default #666666 X轴数据点颜色
opts.xAxis.disableGrid Boolean default false 不绘制X轴网格
opts.xAxis.type String 可选值calibration(刻度) 默认为包含样式
opts.yAxis Object Y轴配置
opts.yAxis.format Function 自定义Y轴文案显示
opts.yAxis.min Number Y轴起始值
opts.yAxis.max Number Y轴终止值
opts.yAxis.title String Y轴title
opts.yAxis.gridColor String 例如#7cb5ec default #cccccc Y轴网格颜色
opts.yAxis.fontColor String 例如#7cb5ec default #666666 Y轴数据点颜色
opts.yAxis.titleFontColor String 例如#7cb5ec default #333333 Y轴title颜色
opts.yAxis.disabled Boolean default false 不绘制Y轴
opts.extra Object 其他非通用配置项
opts.extra.ringWidth Number ringChart圆环宽度，单位为px
opts.extra.lineStyle String (仅对line, area图表有效) 可选值：curve曲线，straight直线 (default)
opts.extra.column Object 柱状图相关配置
opts.extra.column.width Number 柱状图每项的图形宽度，单位为px
opts.extra.legendTextColor String 例如#7cb5ec default #cccccc legend文案颜色
opts.extra.radar Object 雷达图相关配置
opts.extra.radar.max Number, 默认为series data的最大值，数据区间最大值，用于调整数据显示的比例
opts.extra.radar.labelColor String, 默认为#666666, 各项标识文案的颜色
opts.extra.radar.gridColor String, 默认为#cccccc, 雷达图网格颜色
opts.extra.pie Object 饼图、圆环图相关配置
opts.extra.pie.offsetAngle Number, 默认为0, 起始角度偏移度数，顺时针方向，起点为3点钟位置（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可）
opts.series Array required 数据列表
数据列表每项结构定义
dataItem Object
dataItem.data Array required (饼图、圆环图为Number) 数据，如果传入null图表该处出现断点
dataItem.color String 例如#7cb5ec 不传入则使用系统默认配色方案
dataItem.name String 数据名称
dateItem.format Function 自定义显示数据内容

感谢阅读~~~