微信小程序初体验

近日,微信推出的小程序横空出世,一下引起轩然大波,吃瓜群众纷纷围观。

在这个技术快速更新,牛人辈出的大环境下。作为一名前端爱好者,对于这种刚出炉的东西也是充满好奇。

以前出现了什么新的框架或者新的好玩的东西,都是等到那些身先士卒的勇士搞明白了,然后看他们的教程或心得来决定是否入手。
但这次,初生牛犊也想探探这个小程序的虚实。

1.内测

此次微信小程序还属于内测版本,所以,没有收到内测邀请的开发者账户是不能将小程序上传到微信上去的。但是这都不是什么大事,我们如果有一个微信公众号,我们就能开发,只是我们只能本地预览,不能上线而已。进入微信公众号,打开开发者文档即可看到关于小程序的开发说明并获取开发工具。然后就可以开发了。在微信公众号刚推出的时候,我就有注册过一个微信公众号,但后面就没管了。没想到在这个时候帮了大忙了。

2.框架

小程序整体目录结构分为两个层次,逻辑层,视图层。顾名思义,逻辑层就是数据处理部分,视图层是数据展现部分。视图层采用的是.wxml和.wxss文件来渲染。根据后缀名就能猜到,这两种文件就是和传统web开发里面的html文件和css文件是一个机制。只是,微信的小程序他采用的是自己的引擎和内核,因此他定义了自己的文件格式,但.wxss文件和.css文件语法是一样的,都是样式文件,里面的属性也就是css属性。只是.wxml文件和html文件有一些小区别,微信定义了一套自己的标签和标签属性,但这一套标签太简单了,只有几个标签,要想实现自己预想的效果,还是要靠编写样式去美化。在逻辑层,有.js和.json文件。.js文件就是用来数据处理的文件,和传统的web开发中的js并无差别。.json是配置文件,用来配置当前页。值得注意的一点是,在开发中,我们每一个页面都要对应四个名字相同但后缀为.wxml、.wxss、.js、.json文件。例如我们要有一个首页index,我们就应该建一个index文件夹,并且index文件夹里面要存在index.wxml、index.wxss、index.js、index.json文件。当程序运行的时候,在开发者工具中,我们查看程序资源,我们就会发现,这些文件都被合并成了一个js文件。至于.js文件中的配置机制,就要查看文档了。小程序除了我们自己定义的文件,还有三个全局定义文件是必不可少的。分别为app.js、app.json、app.wxss这是用来进行全局配置的文件。具体配置,请看文档。

简单的目录结构.png

3.特性

小程序有借鉴很多当下前端优秀框架的特性,像angular的双向数据绑定、react的组件化等,如果有接触过当下十分火热的一些框架,在开发的过程中,你会觉得这些语法很熟悉,因此上手会很快。

3.1数据双向绑定

WXML 中的动态数据均来自对应 Page 的 data。其语法和angularjs中的双向绑定是一样的。

/**index.wxml*/
<view> {{ ahdms }} </view>       
    
/**index.js*/
Page({
  data: {
ahdms: 'Hello MINA!'
  }
 })
3.2条件渲染

用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块:

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
3.3列表渲染

在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item.

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>
Page({
data: {
items: [{
  message: 'foo',
}, {
  message: 'bar'
}]
}
})

由于篇幅原因,更多特性不再赘述。

微信截图_20160930112058.png
微信截图_20160930112111.png
微信截图_20160930112129.png
微信截图_20160930112142.png

微信截图_20160930112158.png

4.总的来说

经过编写一些测试demo,几天下来。给我的感觉就是,这个微信小程序感觉就是一个应用在微信端的angularjs框架、或者说更像是一个react框架。如果有接触过angular、react
或者是vue等,会上手的特别快。小程序的数据双向绑定,页面的渲染机制,自定义模板,mv*的结构,模块化。这些特性都很符合现在的前端潮流。我想这也是为什么小程序一公布
就在前端圈引起轩然大波的原因之一吧。但是,这个小程序毕竟还只是一个内测版本,还是有几处不足的。例如,标签不足,连<textarea></textarea>这样的标签都没有满足。
由于小程序的底层是通过js去调用微信的原生接口的,所以很多细节的可自定义性不强。微信开发者工具很烂等。关于这些意见,我有发邮件给微信的联系邮箱,得到的回复是
正在开发规划,逐步满足。虽然,这个小程序还不是很成熟,但是可以预见,这个对微信端网页开发的前端工程师来说,是一个福音。以前有很多的公司有将自己的app专门再做一套
微信网页版,放到微信公众号里面来获取微信端的市场。但当这个小程序真正稳定的发布之后,我想native app开发者或许是会有点压力的。
总的来说,微信小程序还是很有意思的,开发速度也很快,可以预见,当真正的稳定版发布的时候,我想如果在个人简历上加上一条,会微信小程序开发,估计会更有优势。

附上几张测试demo效果图吧

附上几张测试demo效果图吧

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

推荐阅读更多精彩内容

  • 说有点神奇的微信应用号出来了,就好奇跟风看看微信小程序到底是怎样的吧,网上教程暂时不是很多,不过微信官方的开发者文...
    黑曼巴先生阅读 4,605评论 0 0
  • 「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试。可是小程序目前还在内测,首批只发放了 ...
    EarlGrey阅读 7,685评论 19 97
  • 当前端在谈论微信小程序的时候,iOS 开发在谈论什么。 本职是iOS 移动开发的,最近研究了一下比较火的微...
    伊尔今夏阅读 11,249评论 2 20
  • 9月21日微信正式对外公布“微信小程序”,并邀请了第一批内测用户。 9月23日公布了公众平台小程序文档和工具,网址...
    木语花颜阅读 197评论 0 1
  • 今年的营业盈余约为3,150万美元,期初股东权益回报率(持有股权投资以原始成本计)仅约9.8%,比去年(1981年...
    谢宇衡阅读 590评论 1 0