前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注。拖到现在正好借组内分享的时机来仔细了解一下微信小程序。了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来学习,首先分析一下微信小程序是什么,听起来比较高大上,说实话原来我确实挺疑惑,到底这一套是什么开发机制,native?hybrid?纯h5?看网上各种教程上来就说api说语法,感觉不先理清楚是什么的问题就去搬api过来纯粹是耍流氓。

  一、微信小程序是什么:

  言归正传,微信小程序的本质是什么?个人理解微信小程序本质还是一套前端框架,微信团队基于原来第三方h5页面在微信里只能通过h5实现原本可以由native实现的功能,例如上传图片等。进而采取的开放部分jsbridge的api来方便开发者。不过既然作为大厂肯定不会仅仅开放部分jsbridge的api就完了,顺便微信类似vue、react一样实现了一套自己的mvvm的框架就是目前的微信小程序。官方文档这样描述:框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。

  本质还是一套前端框架,代码最终将会打包成一份 JavaScript并在小程序启动的时候运行,直到小程序销毁。模版语法类似vue,接近原生的自定义标签。数据绑定和渲染类似vue的语法,不过是以wx:开头(vue 以v: 作为标识) 事件系统类似react一样定义了一套自己的事件系统。

  二、微信运行环境:

  微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具
  在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中
  在 Android 上,小程序的 javascript 代码是通过 X5 内核来解析
  在 开发工具上, 小程序的 javascript 代码是运行在 nwjs(chrome内核) 中
  页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window等bom对象。所以类似jquery、zepto等通过window或者document来获得dom对象的库是不能用来使用的。

三、目录结构:
  小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
  一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
  app.js 逻辑部分,即全局变量或者方法
  app.json 公共配置,包括页面配置等,顶部底部tab的设置,背景颜色等
  app.wxss 公共样式表 可以被具体page样式覆盖

  app.js代码(代码取自微信官方demo)和注释说明如下:

  

 //app.js
// 微信小程序就是调用微信开放jsbridge,来完成微信h5开发中某些原本比较难的功能的特定的微信前端框架
/**
* app 即小程序的生命周期管理。
* */
App({
// 初始化
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
// 全局方法或者变量,可在不同page中使用
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})

  app.json(文件中不允许有注释)示例如下:

    

 {
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/swiper/swiper",
"pages/input/input",
"pages/form/form"
],
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信小程序",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
},
"tabBar":{
"borderStyle": "white",
"list": [{
"pagePath": "pages/index/index",
"iconPath":"image/icon_API.png",
"selectedIconPath":"image/icon_API_HL.png",
"text": "首页"
},{
"pagePath": "pages/form/form",
"iconPath":"image/plus.png",
"selectedIconPath":"image/green_tri.png",
"text": "更多"
}, {
"pagePath": "pages/swiper/swiper",
"iconPath":"image/icon_COM.png",
"selectedIconPath":"image/icon_COM_HL.png",
"text": "其他"
}
]
}
}

  具体页面一般包括一下文件(与全局文件类似,不过仅仅作用于该页面): 
  *.js 页面逻辑 就是js没什么差别
  *.wxml 页面结构 对应html,不过是应用了不少自定义标签 
  *.wxss 页面样式表 对应css文件,优先级比appapp.wxss高,css的写法并未完全支持
  *.json 页面配置 指定特定页面的title等元素
  为了方便开发者减少配置项,规定描述页面的这四个文件必须具有相同的路径与文件名。
  也就是说,我们不用指定某个页面对应的js或者wxss文件,只需要保持路径和文件名相同即可。

  四、模版语言及事件系统 
  1):模版语法类似vue,接近原生的自定义标签。数据绑定和渲染类似vue的语法,不过是以wx:开头(vue 以v: 作为标识)

/**
* 类似vue的条件渲染语法,熟悉vue的话应该不会陌生
**/
<view wx:if="{{condition}}">
</view>

  2):事件系统 
  事件系统类似react:定义了一套自己的事件系统。包含一系列常用事件类型:
         touchstart 手指触摸动作开始
         touchmove 手指触摸后移动
         touchcancel 手指触摸动作被打断,如来电提醒,弹窗
         touchend 手指触摸动作结束
         tap 手指触摸后马上离开
        longtap 手指触摸后,超过350ms再离开 
  绑定方式:事件绑定的写法同组件的属性,以 key+value 的形式:

  以bind或catch开头,然后跟上事件的类型,如bindtap catchtouchstart,

  value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

  bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡 。例如:

/**
*bind/catch +事件类型,两种事件绑定方式
*/
<view id="outter" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>

  3):事件对象:包括BaseEvent 基础事件对象,CustomEvent 自定义事件对象,TouchEvent 触摸事件对象等。

  五、优缺点:
  1):优点
    1、提供相应的类似jsbridge的支持,使得某些功能更为方便
    2、本质是mvvm的前端框架,简化操作。
    3、提供了比较成型的组件库,构建比较方便
    4、基于微信appapp,使得开发成本下降
    5、支持模块化

  2):缺点
    1、由于框架并非运行在浏览器中,js相关bom的方法无法使用。如 document,window等。不过可以获取当前事件对应的dom对象。相比react还是一样不建议操作dom,jq,zepto等工具库也不好使了
    2、又是一套自己的语法,需要学习时间,不过学习曲线不陡峭
    3、目前不支持直接引入 node_modules ,开发者需要使用到node_modules时候建议拷贝出相关的代码到小程序的目录中这样局限性就比较大了,需要自己手动的东西好多

  3):其他问题
  可以参考https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html?t=20161122

以上就是个人关于微信小程序的一些观点和看法,抛砖引玉共同学习吧。详情请移步github查看相关demo。

微信小程序探究的更多相关文章

  1. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  2. 微信小程序框架探究和解析

    何为框架 你对微信小程序的技术框架了解多少? 对wepy 框架进行一系列的深入了解 微信小程序框架解析和探究 小程序组件化框架WePY 在性能调优上做出的探究 开发者培训班上海专场PPT分享:小程序框 ...

  3. 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 前两篇 ...

  4. 微信小程序开发 [00] 写在前面的话,疯狂唠唠

    我总是喜欢在写东西之前唠唠嗑,按照惯例会在博文的开篇写这么一段"写在前面的话",这次却为了这个唠嗑单独开了一篇文,大概预想着要胡说八道的话有点多. 前段时间突然对小程序来了兴趣,说 ...

  5. 微信小程序的图片懒加载

    在普通的web页面当中,我们都知道图片懒加载可以提升浏览器的加载速度.原理是图片用空或者占位图片进行显示,当屏幕移动到图片位置的时候,再把图片的地址换成它的地址.那么,在小程序当中呢,最近老大让看一下 ...

  6. 微信小程序里使用 Redux 状态管理

    微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...

  7. 微信小程序前端与myeclipse的数据交换过程(SSH)

    这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后 ...

  8. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  9. 微信小程序体验(2):驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

随机推荐

  1. MySQL主从复制技术的简单实现

    配置环境: 主从服务器操作系统均为 ubuntu15.10 主从服务器MySQL版本均为 MySQL5.6.31 主服务器IP:192.168.0.178 从服务器IP:192.168.0.145 主 ...

  2. Linux中bashshell的一些知识

    数据流重导向 重导向redirect:就是将当前的所得数据输出到其他地方: 三种输出输入的状况,分别是: -标准输入stdin:代码为0:使用<或<< -标准输出stdout:代码为 ...

  3. LINUX 下时间转换为秒数

    linux下时间是从1970.1.1开始算的秒数 //转来自网址 http://blog.csdn.net/wind19/article/details/6579495 $ dateTue Feb 3 ...

  4. C#_基础:委托速讲

    1定义:委托=函数指针 C# public delegate void Test(string str); 等价C++ public void (*Test)(string str): 委托赋值(初始 ...

  5. NoSQL初探之人人都爱Redis:(2)Redis API与常用数据类型简介

    一.Redis API For .Net 首先,不得不说Redis官方提供了众多的API开发包,但是目前Redis官方版本不支持.Net直接进行连接,需要使用一些第三方的开源类库.目前最流行的就是Se ...

  6. Linux 创建修改删除用户和组

    200 ? "200px" : this.width)!important;} --> 介绍 在日常的维护过程中创建用户操作用的相对会多一些,但是在这个过程中涉及到的知识点就 ...

  7. 当程序以Windows Services形式启动时当前路径不对

    当程序以Windows Services形式启动时当前路径不对 @(操作系统)[博客|dotNet] 很多时候我们需要将我们的程序写成利用Windows服务的形式来让它能够自启动.今天遇到一个问题,当 ...

  8. 前nginx后Apache+Node反向代理

    前几天一直在被一个问题困扰,机器上跑的站点太多了,Apache上面有十几个,NodeJS的也有一堆,记端口号都要烦死,于是萌生了使用反向代理的想法.出发点貌似太low了,完全不是出于负载均衡.高并发什 ...

  9. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  10. rem单位和em单位的使用

    今天弄了一点响应式的东西,本以为很快就可以弄好,结果还是绕晕了头,所以还是写下来方便下次看吧! 一开始我打算用百分比%来做响应式布局,后来算的很懵圈,就果断放弃了,哈哈是不是很明智. 接下来就是rem ...