前言

前一段时间微信公布小程序,瞬间引来了大量的关注。博主的公司也将其定为目标之一,遂派本菜为先头兵(踩坑侠)。

这次开发了一个比较完整的DEMO,模仿自某个APP首页,由于保护隐私的目的我把数据拷贝出来而不是通过接口的方式访问,请求接口的方法我会在后面详细说明。

废话不多说,先上原码:https://github.com/Darylxyx/wx-app/tree/master/tanqu-wx。有兴趣的朋友可以下一个IDE导入项目玩玩。

文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

IDE下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161107

百家之长

在看完微信小程序开发文档,下载专用IDE进行开发后,如果用一个词形容小程序,那就是集百家之长。

下面我们大概扯下有哪些比较先进的技术被用于其中。

模板语法

数据绑定

<view>{{message}}</view>
Page({
data: {
message: 'Hello MINA'
}
});

小程序的模板语法与Vue.js十分相似,甚至很多语法只是前缀更改了。

条件渲染

<!--Vue.js-->
<div v-if="ok">Yes</div>
<div v-else>No</div> <!--小程序-->
<view wx:if="{{ok}}">Yes</view>
<view wx:else>No</view>

列表渲染

<!--Vue.js-->
<div v-for="item in array">
{{ item.message }}
</div> <!--小程序-->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>

可以看出小程序在模板语法方面不知道是不是借鉴Vue.js(不了解不敢乱说),但总的来说这种Angular、Vue之类的双向数据绑定方式开发起来还是非常方便快捷的。不像React单向数据流的方式,需要将数据绑定于状态机中,学习成本略高。

不同的是,小程序中没有用 html,页面文件后缀为 .wxml(不是w-xml,是wx-ml)。所以内部使用的不是传统 html 标签,而是封装好的组件。

注意,在小程序中是没有 window 和 document 对象的。

模块化

工程目录

不像一般web项目需要自己规划目录,小程序通过IDE可以快速生成一个基本的项目结构。根目录的 pages 下每一个文件夹代表一个页面,其中的 wxml 文件会自动加载同级目录下的 wxss(css)和 js 文件。

wxml模块化

wxml 可以将通用的模板(template)单独保存,在需要的地方引用。

<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template> <!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

wxss模块化

wxss 可以实现 css 预编译工具那样的模块化引用。

/** common.wxss **/
.small-p {
padding:5px;
} /** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}

布局

如果有人做过混合开发应用(hybrid)的项目,比如 AppCan 或者 ReactNative 就会知道,这些工具会支持一种很强大但在浏览器环境兼容不太好的布局方式——弹性盒模型。

微信小程序不出意料地支持了这种布局方式,大大提高了布局效率,并且让2016年的web开发人员不再为各种场景下的垂直居中浪费时间。

各屏幕适配

在阅读文档时,看到的最大的惊喜就是微信小程序有自己独特的尺寸单位——rpx。

用法就是当设计给出750像素的设计稿时,你只需要把设计稿里每个元素尺寸单位改成rpx,就可以适应所有的手机屏幕了,不需要为了适应屏幕进行一定的百分比计算。

这简直是吊炸天的存在!遗憾的是在博主测试的时候该单位并未生效,不过相信很快会修复这个问题的。退一步可以使用 rem 作为单位。

发起请求

在小程序里并不是通过 Ajax 发起请求的,而是通过 wx.request API 来发请求,传递参数方式与 jq ajax 类似,同时也没有跨域的烦恼。

要注意的是,访问的接口需要提前进入小程序后台,以管理员身份设置“开发设置”,配置“request合法哉名”。否则会报“接口不在合法列表里”的错误。

目前只能配置一个请求域名,且一个月内只能修改3次。

其他

· 小程序拥有自己的动画API,同时也支持传统的CSS3动画,性能上的对比有兴趣的朋友可以自己试验下。

· 小程序有诸如:录音、重力感应、罗盘等原生应用上才能实现的功能API。

· 小程序中有列表上下滑动的组件(scroll-view),也有支持滑块左右滑动的组件(swiper),但如果需求要求你支持二者,那么嵌套这两个组件会出现很明显的卡顿。

· 通过这次的DEMO制作,发现性能方面,尤其是动画,比原生应用还是有一定差距,页面元素越多越明显,感觉不适合做太复杂的应用。

感谢你的浏览,希望能有所帮助

微信小程序初体验与DEMO分享的更多相关文章

  1. 微信小程序初体验,入门练手项目--通讯录,部署上线(二)

    接上一篇<微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器>:https://www.cnblogs.com/chengxs/p/9898670.html 开发微信小程序最尴尬 ...

  2. 【尝新】微信小程序初体验

    文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089434 根据文档地址中下载微信开发工具后,按照文档指引可以创建一个快速体验的小d ...

  3. 微信小程序初体验(上)

    版权声明:本文由练小习原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/204 来源:腾云阁 https://www.qclo ...

  4. 微信小程序初体验--封装http请求

    最近看了一下微信小程序,大致翻了一下,发现跟angular很相似的,但是比angular简单的很多具体可参考官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev ...

  5. 微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器(一)

    内容: 一.前言 二.相关概念 三.开始工作 四.启动项目起来 五.项目结构 六.设计理念 七.路由 八.部署线上后端服务 同步交流学习社区: https://www.mwcxs.top/page/4 ...

  6. 微信小程序初体验

    小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxado ...

  7. 微信小程序初体验遇到的坑

    今天,2017年1月9日凌晨,微信小程序如约上线.2007年1月9日,整整10年前的今天,苹果的iPhone手机正式问世! 经不起新技术的诱惑了,想试着开发一下看看.刚开始遇到很多坑,在这里记录一下, ...

  8. 微信小程序初使心得【微信小程序快速入门】

    摘要: 2016年推出微信小程序,时至今日,历经几个版本的更新,已形成了相对实用和稳定的服务平台.本文简单的介绍了微信小程序的入门用法,今后会继续关注和实践. 2016年推出微信小程序,时至今日,历经 ...

  9. 微信小程序入门学习-- 简易Demo:计算器

    简单学习下微信小程序 官网 简易教程 · 小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 需要通过开发者工具,来完成小程序创建和代码编辑. 下载安装,运行 ...

随机推荐

  1. python自学——集合

    #皇城根儿#集合:是无序的.不重复的:1.去重:2.关系测试#创建集合#创建数字集合number=set([1,3,5,7,9]) #数字型集合str_type=set(["im" ...

  2. 红帽7配置samba文件共享服务

    samba软件主要功能是为客户机提供共享使用的文件夹. 使用的协议是SMB(TCP 139).CIFS(TCP445). 所需的软件包:samba 系统服务:smb 1.安装samba服务 ~]#yu ...

  3. Python中可视化图表处理echarts库的安装

    系统环境:Windows 7 企业版 进入cmd 输入:python –m pip install pyecharts

  4. idea 2017破解方法

    http://blog.csdn.net/zx110503/article/details/78734428

  5. ConcurrentModificationException 集合并发修改异常 解决

    import java.util.ArrayList; import java.util.List; import java.util.ListIterator; /** * 问题? * 有一个集合, ...

  6. Python学习(七)面向对象 ——继承和多态

    Python 类的继承和多态 Python 类的继承 在OOP(Object Oriented Programming)程序设计中,当我们定义一个class的时候,可以从某个现有的class 继承,新 ...

  7. [ML学习笔记] 决策树与随机森林(Decision Tree&Random Forest)

    [ML学习笔记] 决策树与随机森林(Decision Tree&Random Forest) 决策树 决策树算法以树状结构表示数据分类的结果.每个决策点实现一个具有离散输出的测试函数,记为分支 ...

  8. Beta阶段第四次冲刺

    Beta阶段第四次冲刺 严格按照Git标准来,组员有上传Git的才有贡献分没有的为0 代码签入图 1.part1 -站立式会议照片 2.part2 -项目燃尽图 3.part3 -项目进展 1.正在进 ...

  9. python之生成随机测验试卷

    自己又开始懒散的态度生活,所以几乎有两个月没有更博了. 项目:美国各州首府地理考试,为防止作弊,35份试卷,50道题随机次序,生成独一无二的试卷. 基本想法: 1.将各州首府的地方和首府写入列表,以K ...

  10. shiro实战系列(八)之安全管理器

    Apache Shiro 提供安全框架界独一无二的东西:一个完整的企业级 Session 解决方案,从最简单的命令行及智能手机 应用到最大的集群企业 Web 应用程序.   这对许多应用有着很大的影响 ...