【微信小程序】语法笔记及开发心得

好久没有写代码了，今天自己开发了一个快递查询的微信小程序，把自己心得记录下来方便以后巩固。ps，小程序学的太晚了，人家去年好多都会了，我那时在干啥。。

1、学习脑图和思路：

2、学习资源：

A、微信小程序官方文档：https://mp.weixin.qq.com/debug/wxadocs

B、视频教程：

http://m.bilibili.com/video/av9085879.html?from=singlemessage#page=8

C、案例，Demo

3、学习脑图中的一些需要详细了解的地方：

A、小程序实现原理和程序架构：

见这篇 文章：写的很详细。

还有这篇

B、Flex布局和相对绝对定位

包括了解容器元素、属性及属性值、属性应用场景。

Flex布局：其中有display,主轴和交叉轴，flex-direction排列方向，flex-wrap是否换行，justify-content元素在主轴上的对其方式，align-items在交叉轴的对其方式，align-self元素自身的对其方式，order定义元素的排列顺序，flex-grow当有多余空间时该元素放大比列，flex-shrink当空间不足时放大缩小比列，flex-basis元素在主轴上占据的空间。

相对和绝对定位：相对定位是和自身来比较，绝对定位是和离他最近的已经设置定位的上级元素比。

C、视图层要熟悉有哪些组件，组件对应属性，组件对应事件：

1）视图容器：View，scroll-view含滚动条的视图，swipe幻灯片，画布canvas；

var context = wx.createContext()
   context.setStrokeStyle("#00ff00")
   context.setLineWidth(5)
   context.rect(0, 0, 200, 200)
   context.stroke()
   context.setStrokeStyle("#ff0000")
   context.setLineWidth(2)
   context.moveTo(160, 100)

context.stroke()
   // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
   wx.drawCanvas({canvasId: 'firstCanvas',actions: context.getActions() // 获取绘图动作数组})}

2）自定义组件和表单组件：自定义有icon,text,process,navigator：url；表单组件有label：for,picker:range和value,picker-view,slider:,switch等；

3）媒体组件：audio:src,image:src,video:src；

4）地图：map ，markers，longitude，latitude，scale，markers。

5）操作反馈小工具：action-sheet从底部弹出来,modal确认框,toast会自动消失,loading加载

6）组件数据绑定，组件数据内容展示（变量，if，for），组件事件绑定，引用，尺寸。引用案例如下：

或