258资源分享网

上周微信小程序公测了，允许开发者将应用提交到微信公众平台审核，但暂时还不能发布。
微信小程序是不用下载即能使用的应用，它相比原生app更新实时、跨平台、开发成本低、使用门槛低，一经宣布，便受到业内的强烈关注。最近动手尝试了下微信小程序。
这篇文章将继续以iOS开发的视角介绍微信小程序的开发心得。

项目结构

首先介绍一下小程序的结构目录：

 

按官方文档的说明，app.js用于处理小程序逻辑，用于监听小程序的生命周期、声明全局变量。app.wxss用于管理小程序公共样式，app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。在iOS中，相当于AppDelegate类。
如下所示，pages设置页面路径，window设置默认页面的窗口表现，tabbar设置底部 tab 的表现，networkTimeout设置网络超时时间，debug设置是否开启 debug 模式。

{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }

每个页面又是由.js、.wxml、.wxss、.json文件构成，.js是页面逻辑，.wxml处理页面结构，.wxss处理页面样式，.json处理页面配置。

生命周期

小程序的生命周期如下图

 

在iOS中，onLaunch方法类似于application:didFinishLaunchingWithOptions:，onHide类似于applicationDidEnterBackground:，onShow类似于applicationWillEnterForeground:
页面的生命周期如下

 

 

onLoad相当于loadView，onReady相当于viewDidLoad，onShow相当于viewDidApear:，onUnload相当于viewDidDisappear:。与iOS不同的是，小程序先调用onShow方法再调用onReady，onHide表示页面隐藏，当navigateTo或底部tab切换时调用。

页面跳转

小程序的页面中转比较简单，主要有三个方法：
wx.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。相当于iOS中的push跳转。
wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。
wx.navigateBack()：关闭当前页面，回退前一页面。相当于iOS中的pop返回。

数据绑定

小程序有一套UI与数据的绑定机制，有点类似MVVM模式，它是单向绑定的，只能从Data更新到View，而且要手动调用setData方法才能更新view。
语法类似这样，在.wxml文件中用双大括号将变量包起来，在.js文件中修改数据，调用setData方法，UI根据这个数据的最新结果刷新。

//page.wxml <view> {{ message }} </view> //page.js Page({ data: { message: '' }, onLoad: function(options) { this.setData({ message:'Hello world' }) } })

小程序的数据绑定还支持表达式，如条件表达式、算术表达式、字符串表达式、三元表达式。

//用 wx:if="{{condition}}" 来判断是否需要渲染该代码块： <view wx:if="{{condition}}"> True </view> //wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> 豆瓣科幻小说demo

接下来我们一起写一个小程序demo。效果如下：

 

 

demo搭建与配置

首先创建项目，设置项目名称，选择项目位置，这里选择了无Appid

 

创建两个页面，一个主页index和一个详情页book