Summary of the National Third Prize in the WeChat Mini Program Application Development Competition, as well as a summary of key points, and a series of basic development skills (including cloud development notes, wxcharts data visualization)

Standing out in the fourth place among nearly a thousand teams in the South China Division, it became the only professional team shortlisted for the national competition.
At that time, I was a sophomore in a junior college, and there were about two months left before the submission of the provincial competition before we signed up. Then we started to learn small programs, and developed them while learning. I didn't expect to win the national award for the first time in the competition, and I was excited for a long time.

After that, I moved to the field of algorithms. Friends who are interested in algorithms can read my other blogs. It’s a coincidence that I participated in the 2021 CCSP National Competition and was the only professional team shortlisted. Hahaha. Click here for the link
:
CCSP National Competition Summary

The following is a summary of some key points of the WeChat Mini Program.

1. Each page is really just an object

The picture above is an extremely complicated small program, but I believe that everyone with knowledgeable knowledge can understand it immediately.

This code works with just one word.

Then we slightly modified it to look like the picture below.

If you have not studied the operating mechanism of WeChat applets, you may shout: "wtf!? What about that word? js files will affect the page style???"

That's right, the js file of the WeChat applet will indeed affect the page style, because each page is actually a Page object. If there is no such page object, the page will run like any one you see on my blog. It's the same as blank, and it can even be said that it doesn't work at all.

Here is a key point that can easily cause serious bugs during the development process:
The official interpretation of wx.redirectTo(OBJECT) is: "Close the current page and jump to a certain page in the application."

The real situation of 'closing the current page' is: closing the page object in the js file of the current page.

If you define a global variable num outside the page like the above picture, you will not clear num by using the so-called 'close page and jump' methods, and you will not assign a value to num again when you open this page.

If this global variable num is used to record certain businesses and can affect the background database, or is related to some deeply nested loops. When there is no proper start and stop value control, it can be described as a nuclear bomb-level vulnerability, which can disrupt business logic without knowing it.

After all, everyone has no time to study the underlying operating principles of small programs, and the stack allocation is naturally unclear, but such an operating mechanism must be clear, so that high-quality and safe code can be written.

2. All paths in the official version cannot contain Chinese

I didn’t notice that there is a picture path that contains Chinese. The computer developer tools are displayed normally, the mobile phone development version is displayed normally, and the mobile phone experience version is displayed normally. After the good guy is on the official version, it will not be displayed. It is really a series of stories about salary deduction.

The predecessors planted trees and the descendants enjoyed the shade, and the trees were all planted with money by the predecessors.

3. If the key of setData is a variable

I’m afraid that novices think that the key must be a constant, so you can’t compile this program
. Just add the code and add square brackets.

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

4. background-image does not support local images

Those friends who insist on using local pictures due to fluency or other factors can consider:

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

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

5. Key points of UI design: how to get along well with the top navigation bar and page content

After talking about the technology, let's relax a little bit about the page design. After all, most of the small program developers are full-time engineers, haha. How to make the
entire page style uniform and the border not appear sharp?

The following examples are all from a small public welfare program developed by me and my partner (in terms of diet and conditioning for chronic diseases)
If you are interested in "Disease from the Mouth", you can search it

Use a certain shape to come out by the way
Customize the navigation bar, and the content is interlinked
The background color of the page and the color of the navigation bar are set to the same color
half extended
Boundary softening (gradient)
similar color

6. Feedback API

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

One line of code to get it done
WeChat's built-in API, you can call it to enter the page shown below (note: you can only see it on your phone, and the developer tool does not have a feedback page). It is suitable
for small programs with fewer functions. If there is nothing to put on the personal page, just put Leave a comment.

7. Cloud development notes (important!)

I started to develop because I didn't understand cloud development before, and I suffered a lot. Here I list the basic usage of cloud database. I hope you don't go my way.

field returns the specified field

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

skip Start reading from the first few articles (skip)
limit returns the specified number of data
orderBy query data sorting)
removeDelete data
updateModify data
addAdd data (how to add date date type data)

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

doc query (returns a single object)
where conditional query (specified range query)
where fuzzy query (using regular expressions)

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

8. Data visualization wxcharts

wxcharts is an ultra-lightweight data graph drawing plug-in specially developed for small programs. It can draw line graphs, curve graphs, pie charts, and histograms. It can meet general needs and is recommended to friends in need.
Example picture:

The plug-in can be downloaded by searching on 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 自定义显示数据内容

Thanks for reading~~~