微信小程序实战须知1

• 理解小程序框架

• 小程序是前端

  单单的小程序只是一个前端，得跟后端结合才能真正有价值。

• 快捷键

  F1：查看各种快捷键

• 自动编译

  当修改代码后，可以通过编译按钮实现编译，也可以通过Ctrl+S就实现了自动编译。

• 学习方法

  编程重点是学思维，API靠查文档

• 小程序页面

  小程序每个页面都有3到4个文件构成。
  可以理解为，小程序每一个页面都有一个单独目录，示范项目中pages下面有两个目录：index和logs，就是有两个页面。

  index和logs下面的文件是页面的文件，app.js\app.json\app.wxss是小程序应用程序的文件，且不包含wxml文件。

• 就近原则

  在应用程序的wxss设置颜色A，在页面的wxss也设置颜色B，根据就近原则，会优先选择页面设置，如果页面没有设置才会选择全局样式。

  同样对于配置也是一样。

• 页面级别

  曾今有5层、10层限制，目前没有限制。但是实际上最好不要超过5层，如果层级过多，一来过于复杂用户体验不好，五级一般就够了；二来可能导致体积过大。

• Web开发的常见内容

  一个Web页面一般包含：

  • .html

    起到页面的骨架作用。

  • .css

    样式表文件，用于美化骨架。

  • .js

    逻辑文件，用于操作骨架或样式。

  • .json

    配置，用于配置页面。有些页面不用配置，因此没有json文件。

• 组件

• view

  用于做容器，意义性不强。

• swiper

  swiper-item会自动充满swiper，即如需修改高宽，需要修改swiper。

  swiper-item也是一个容器，可以放很多东西，比如按钮等各种形式。

• 特殊要点

• rpx与px

  px是像素单位，rpx是适应机型保持一致的单位。

  如果是px就，在iphone6下是只取一半数值，其他机型不是一半关系。

• 生命周期函数

  生命周期函数，一定有一条时间线。

  每个函数有一个执行顺序。

• 数据流程

  只有js具有从服务器获取数据的能力，wxml只能从js中获取数据。

  网页做法是先获取dom在传入，而小程序内无DOM节点，因此无法使用此方法。

  小程序中采用数据绑定。双花括号{{}}是数据绑定的基本，是一种单向数据绑定，只能从js到wxtl，不能反向（指的是自动改变，实际上可以通过事件监听实现）。

  传统网页做法是dom优先思想，现在已经不提倡，而是提倡数据优先。

• References

1. 微信开发文档
2. 7七月, 微信小程序入门与实战