大飞

大飞 关注TA

挑战一切!

大飞

大飞

关注TA

挑战一切!

  •  世界的顶端
  • 混口饭吃
  • 写了333,609字

最近回复

该文章投稿至Nemo社区   Js、Css、Html  板块 复制链接


微信小程序框架介绍——开篇

发布于 2017/01/13 21:40 1,136浏览 0回复 2,119

          微信小程序对于熟悉web开发的人说,简直就是信手拈来。因为微信小程序的组成就是大家熟悉的JavaScript+HTML+CSS,再加配置文件Json.而在微信小程序中HTML被替换成WXML,就是微信的html(WX-HTML),CSS的后缀名不是"css",而是WXSS(WX-CSS),使用上跟CSS一致。另外微信小程序跟安卓的Activity一样具有生命周期,接下来我将分别介绍微信小程序的生命周期和组成。

        一. 生命周期

            微信小程序的生命周期相对于安卓的Activity的生命周期简单多了,分别是onLaunch()——>onShow()——>onHide() 还有onError(),而onErro()会发生在程序的运行任何时期,这也是跟安卓的不一样,这一点我觉得是比较不错的,安卓发出程序错误需要自己捕获。onLaunch()相当于安卓的Activity的onCreate(),当小程序初始化完成时,会触发 onLaunch()(全局只触发一次);onShow()相当于安卓的Activity的onResume(),当小程序启动,或从后台进入前台显示,会触发 onShow();onHide()相当于安卓的Activity的onPause(),当小程序从前台进入后台,会触发 onHide().

           微信小程序的生命周期体现在JavaScript中,如下图:

         

       二. 微信小程序的组成

              先来看一下页面组成:

           

            1.JavaScript:

             app.js为全局的js,类似于安卓的application,整个应用的生命过程在这里,app.js必须实现App()方法。js中的方法形式是:方法名:function(参数){} 。

            

             普通页面中的js,必须要实现Page()方法,否则会提示错误,Page()方法内可以写生命周期方法,基本操作都在该方法内。

            

            2.json

            app.json 全局配置清单,页面的注册等配置都在这个,没新增一个页面都需要在这里注册。

             

            普通的json文件,可以设置对应页面的标题等信息

            

            3.WXML 

            WXMl使用的是腾讯封装的视图组件和普通的html,具体不介绍,使用起来跟普通的html 差不多

          

           4.WXSS  

              wxss没什么好说的,跟普通css无差异,app.wxss属于全局的css。

             

             

           

      最后,用一句话来总结,不积跬步,无以至千里;不积小流,无以成江河。

点赞(0)
点了个评