微信小程序实战笔记

前言：

微信小程序最近刚从鹅厂生产出来，我有幸参与了一次小程序的实战，有必要记录我的开发过程。看上去小程序很简单，但是在深入开发的时候才能具体体会里面的变化，接下来记录我的第一个微信小程序的点点滴滴！

想做微信小程序就要先了解微信官方给出的API:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=20161122

编译工具：

我用的是微信官方提供的工具：这个工具是用react.js开发出来的，对于会react.js的开发来说很容易看懂它的代码结构，并且能了解到小程序内部一些实现规范和方式。

HTML：

小程序封装了一套自己的HTML定义wxml，因为建立在自己平台对html中特有属性都没了，

比方说：<p>标签 ：

在传统浏览器上是p标签默认宽度100%的，但是在微信小程序中这个默认属性就变了。

另外小程序自己封装了一些HTML组件，能帮我我们快速实现前端UI交互，这个是小程序的关键点，没有这些组件就没有办法做到敏捷开发，快速迭代。

小程序重新梳理了html标签规范必定去掉了标签默认数据，我猜测腾讯前端人员可能认为这些默认的属性会很大程度上影响页面布局，干脆就却掉，在复杂场景下，我用很多html标签编写页面，就会因为这些标签自带一些属性而进行不同场景的处理，确实是一件烦事。这些我很欣赏小程序，如果想布局就自己加属性进去而不是默认属性给了又要去修改。

CSS:

除此之外对css中的伪类选择器也不支持。

官方原话：为了适应广大的前端开发者，我们的 WXSS 具有 CSS 大部分特性。

height:

其中对height设置100%一开始很疑惑，但是想一想通了，

先看代码：

<div>
  <span style="height:100%;"></span>
</div>

如代码缩写，在传统浏览器开发页面中如果设置了height是100%会针对其父节点高度来计算，而在微信小程序里面是不管父子级关系的，如果一个子节点设置了height:100%;页面显示元素直接拉长。

正常显示应该是如下图：

对比可以看出直接看出已经无法自动控制了，所以100%；这个值在微信小程序里看来不能随便用了！

!important这个我实验了一下效果可以的，这样我们可以对样式做优先级调整了。

 position:

在传统浏览器端position: relative;之后，子节点设置了position: absolute;也不会飘出父节点范围，而在小程序中这点就完全无效了，子节点改怎么飞就怎么飞，无法控制，习惯了这样的方式对于现在小程序场景有些不习惯。想要控制子节点在小程序里面做法是在父节点上再加上一个float:left;这样子节点就乖乖的在父节点范围了！

页面跳转数:

微信小程序对于页面跳转所积累的页面数量做了限制，小程序提供了3种跳转方式：wx.navigateTo、wx.redirectTo、wx.navigateBack，不善于合理的运用，当页面数累计到5个时候就再操作任何跳转就会失灵。

在微信小程序开发工具中提示你所积攒的页面数，这个是个很好的提示，但是怎么避免页面累积呢？

1、这个就需要产品设计场景不要过多的新的跳转，不然最后会不可控。

2、父子级关系页面，在跳转到子页面我们可以用wx.navigateTo，注意一点子跳转到父页面一定要用wx.navigateBack，其他形式跳转会增加页面数。

获取缓存：

小程序提供了3种状态处理缓存机制，1.设置缓存  2获取缓存  3清空缓存

我在用小程序的缓存时候碰到2个点有必要记录下来，

第一个：object类型数据问题

缓存已key,value键值对存在的，我想设置一个key 并且值为object类型，一开始设置一切正常，但是再使用场景需要改变object中的某个属性的时候，结果其他属性全部没了，只留最新设置的属性存在object中，顿时蛋疼了！