代销福利彩票的条件|dj东京娱乐登录网
   3年前 (2016-11-06) 铁匠  微信小程序
文章评分 0 次,平均分 0.0

微信小程序之初步探究

9月22日凌晨,微信公众平台对200个服务号发送了“微信小程序”的测试邀请。微信方面表示,“小程序”目前只是测试阶段,未来此类“小程序”的主体比较广?#28023;?#19981;管是个人、政府、企业、媒体,?#21482;?#26159;其他组织开发者,均可以申请注册和使用“小程序?#20445;?#23567;程序”发布后,在?#30340;?#25472;起了较大的反响。

微信小程序之初步探究

9月22日凌晨,微信公众平台对200个服务号发送了“微信小程序”的测试邀请。微信方面表示,“小程序”目前只是测试阶段,未来此类“小程序”的主体比较广?#28023;?#19981;管是个人、政府、企业、媒体,?#21482;?#26159;其他组织开发者,均可以申请注册和使用“小程序?#20445;?#23567;程序”发布后,在?#30340;?#25472;起了较大的反响。

下面是?#39029;?#27493;探究所做的简单整理。

开发工具下载

目录结构

我们在微信提供的开发工具中新建一个项目,开发工具会给我们建立一个最基本的目录结构和示例Demo代码,结构如下:

微信小程序之初步探究

结构很简单,程序主体部分由app.js,app.json,app.wxss三个文件组成,而且必须放在项目的根目录。

页面由四个文件组成,分别是:

微信小程序之初步探究

配置

  • 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
  • 每一个小程序页面也可以使用.json文件来对本页面的窗口表现进?#20449;?#32622;。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面?#20449;?#32622;项会覆盖 app.json 的 window 中相同的配置项。

逻辑层

1.注册程序

App() 函数用来注册一个小程序。?#37038;?#19968;个 object 参数,其指定小程序的生命周期函数等。

示例:

  1. App({
  2. ??onLaunch:?function()?{
  3. ????//?Do?something?initial?when?launch.
  4. ??},
  5. ??onShow:?function()?{
  6. ??????//?Do?something?when?show.
  7. ??},
  8. ??onHide:?function()?{
  9. ??????//?Do?something?when?hide.
  10. ??},
  11. ??globalData:?'I?am?global?data'
  12. })

2.注册页面

Page() 函数用来注册一个页面。?#37038;?#19968;个 object 参数,其指定页面的初始数据、生命周期函数、?#24405;?#22788;理函数等。

  1. Page({
  2. ??data:?{
  3. ????text:?"This?is?page?data."
  4. ??},
  5. ??onLoad:?function(options)?{
  6. ????//?Do?some?initialize?when?page?load.
  7. ??},
  8. ??onReady:?function()?{
  9. ????//?Do?something?when?page?ready.
  10. ??},
  11. ??onShow:?function()?{
  12. ????//?Do?something?when?page?show.
  13. ??},
  14. ??onHide:?function()?{
  15. ????//?Do?something?when?page?hide.
  16. ??},
  17. ??onUnload:?function()?{
  18. ????//?Do?something?when?page?close.
  19. ??},
  20. ??onPullDownRefresh:?function()?{
  21. ????//?Do?something?when?pull?down
  22. ??},
  23. ??//?Event?handler.
  24. ??viewTap:?function()?{
  25. ????this.setData({
  26. ??????text:?'Set?some?data?for?updating?view.'
  27. ????})
  28. ??}
  29. });

3.模块化

可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。需要注意的是:

  • exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。
  • 小程序目?#23433;?#25903;持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录?#23567;?/li>

4.API

小程序开发框架提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。

5.ES6 转 ES5

微信小程序运行在三端:iOS、Android 和用于调试的开发者工具

  • 在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中
  • 在 Android 上,小程序的 javascript 代码是运行在 X5 内核中
  • 在 开发工具上, 小程序的 javascript 代码是运行在 nwjs(chrome) 中

虽然三个运行环境在大部分情况下是相似?#27169;?#20294;是还有一些细微的区别,为了帮助开发者解决这种区别带来的困扰,开发工具会自动帮助开发者将 ES6 的代码转为 ES5 的代码。

对于使用其他构建工具的开发者,可以在项目也开中关掉这个功能,使用自己的构建和转码工具。

视图层

和我之前对微信小程序的?#26412;?#19981;同,微信小程序不支持也不兼容HTML,而是微信全新定义的规范,它的视图文件的后缀名为.wxml,是基于xml进行的扩展,其样式表文件也并非CSS,而是.wxss,兼容受限的部分CSS写法。

视图渲染时,采用了类似单向数据绑定的方式进行数据绑定,WXML 中的动态数据均来自对应Page的data。使用Mustache语法(双大括号)将变量包起来:

  1. <view>?{{?message?}}?</view>

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。支持条件渲染、列表渲染、模板、?#24405;?/p>

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序,我们对 CSS 进行了扩充以及修改。

与 CSS 相比我们扩展的特性有:

  • 尺寸单位
  • 样式导入

框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。组件文档

微信小程序官方文档传送门

 

除特别注明外,本站所有文章均为铁匠运维网原创,转载请注明出处来自http://www.uryjp.tw/12966.html

关于
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

扫一扫二维码分享
代销福利彩票的条件 重庆百变王牌历史开奖记录查询 山东群英会怎样是中奖 棋牌官方下载50元提现的棋牌游戏 江南高纤股票分析 甘肃十一选五开将结果 杰克棋牌官方网址下载 重庆时时彩数据规律 金沙澳门棋牌棋牌游戏 预测17年347期福彩开奖号 体彩安徽11选5开奖查询