微信小程序总结

微信小程序刚出来，让前端这个圈子又热了起来，不少从业人员，也开始尝鲜； 从官网上的wiki到微信开发工具的使用，有一些使用心得，再这里总结一下；
如果有那里说错了，或有疑问，欢迎大家提出来，与大家一起学习成长。

---

官网上的wiki

小程序文档

Paste_Image.png

微信的文档还是很详细的，只要是从业人员，看文档便可看明白，实际操作也是简单的很，上手快，微信这一点做的还是很不错的，毕竟是大公司嘛

它总体用的框架是MVVM，现在前端大部分都已经使用这类框架，如angular.js、vue.js、avalon.js 等，
开发标准也是web前端大同小异，如下

• WXML -> html
• WXSS -> css
• js -> js
• json -> json方式的配置文件

它的WXML就等同于html，只是标签没有了，取而待之的是组件形式，大部分的功能组件已经都有的，但是有些组件的api还是有些少的，目前也没有第三方组件，（以后应该会用的，毕竟这也是刚出来的）

语法就重要的三块内容就是框架、组件、api

Paste_Image.png

框架 -> 相关页面的说明

json文件为配置说明，在根目录有一个基本的app.json，里面配置整个项目的页面，如pages，window，tabBar，networkTimeout等，也可以在某个页面相关目录下，建单页面的配置

js文件为逻辑处理文件，与正常的js一样，但是不能使用document、window等内容，模块化开发方式，各个js文件都是相互独立的，可以通过require、include方式调用不同的模块

WXML 文件为视图层，数据绑定的方式也是Mustache语法（双大括号），属性绑定的前缀为wx:，和其它MVVM框架的属性绑定方式大同小异

** WXSS 文件为样式文件**，使用css语法，尺寸单位为rpx，规定屏幕宽为750rpx，iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，

组件

WXML只能用组件的方式，每个组件都有自己的属性，属性是添加在WXML上的，相当于src、href 这些内容
组件分为：

• 视图窗口 ->

  1. 视图窗口（等同于DIV）
  2. 可滚动视图区域（等同于一个滚动插件）

  3. 滑块视图容器。（等同于一个banner插件）

     
     
     

     Paste_Image.png

• 基础内容

  1. 图标（等同于图标库）

     
     
     

     Paste_Image.png

  2. 文本（添加文字信息）

  3. 进度条（一个进度条的内容）

Paste_Image.png

• 表单组件

  1. 按钮（等同于 type=button）

     
     
     

     Paste_Image.png

  2. 多项选择器（等同于type=checkbox）

  3. 表单（赞同于form）

  4. 输入框 （等同于type=text）

  5. 标签（等同于label）

  6. 滚动选择器（等同于select）

     
     
     

     Paste_Image.png

  7. 单项选择器（等同于type=radio）

  8. 滑动选择器（等同于type=range）

     
     
     

     Paste_Image.png

  9. 开关选择器（等同于Bootstrap Switch）

• 操作反馈

  1. 从屏幕底部出现的菜单表

     
     
     

     Paste_Image.png

  2. 模态弹窗

     
     
     

     Paste_Image.png

  3. 消息提示框

     
     
     

     Paste_Image.png

  4. 加载提示

     
     
     

     Paste_Image.png

• 导航
  1、页面链接（等同于a标签，但是只在连接内部页面，不能连接外部页面）

• 媒体组件

  1. 音频（等同于audio，可以连接外部音频文件）

     
     
     

     Paste_Image.png

  2. 图片（等同于img，可以连接外部视频文件）

  3. 视频（等同于video，可以连接外部视频文件）

     
     
     

     Paste_Image.png

• 地图

  1. 地图（map）

• 画布

  1. 画布（等同于canvas）

API

Paste_Image.png

• native交互的接口
  • 设备
• 网络请求的接口
  • 网络
  • 位置
• 微信通信的接口
  • 界面
  • 开放接口

现在出来的是内测版，功能上来说已经添加了大部分常用功能，但是还有一些不足，希望以后微信可以更好的完善。

有些人说，微信可能会取代app，我觉的，这是不可能的。
第一、当时的pc游戏现在已经可以在网页中玩了，但是现在的pc游戏变的更加好，再过十年现在的pc游戏可能会出现在网页中，但是那到时，会出现更好的pc游戏，这和app是一样的，微信限制了很多东西，现在要按它的ui来设计界面，等到它的能力到达现在的app这样，到那时，app可能会做出更好的东西，未来我们是很难想像的。
第二，微信毕竟是腾讯的，别的公司不可能把自己的命运都放在腾讯手里，他们可能会开发微信应用，但不会把微信应用做为一个主要的流量入口，
他们可能会将微信做一个导入自己产品的一个入口。
以上观点为个人观点，不喜误喷！