微信小程序总结

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容

  • 经过一个月的折腾,终于把之前学的前端知识用了起来,做成了公司的第一个微信小程序(花型宝:一站式图案版权保护服务平台...
    青山不改阅读 291评论 0 0
  • 以下内容是张小龙在12月28号在微信公开课的关于小程序的全部讲解。 手机是肢体的延伸,而电脑pc不是。 微信不会搞...
    双鱼大猫阅读 714评论 1 3
  • 转角遇到最好的自己阅读 245评论 0 0
  • 忙起来的生活让我觉得很充实,生活紧张而有序的进行着,什么事情也都处理的井井有条,有太多时间的时候反而什么都干不了,...
    蝟实阅读 398评论 2 3
  • 一、分区表理论知识 oracle的分区表可以包括多个分区,每个分区都是一个独立的段,存放到不同的表空间中,查询时可...
    否否阅读 1,211评论 0 6