美文网首页
微信小程序总结

微信小程序总结

作者: 晴風無眠 | 来源:发表于2016-09-28 19:58 被阅读127次

    微信小程序刚出来,让前端这个圈子又热了起来,不少从业人员,也开始尝鲜; 从官网上的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可能会做出更好的东西,未来我们是很难想像的。
    第二,微信毕竟是腾讯的,别的公司不可能把自己的命运都放在腾讯手里,他们可能会开发微信应用,但不会把微信应用做为一个主要的流量入口,
    他们可能会将微信做一个导入自己产品的一个入口。
    以上观点为个人观点,不喜误喷!

    相关文章

      网友评论

          本文标题:微信小程序总结

          本文链接:https://www.haomeiwen.com/subject/tquqyttx.html