微信推出了小程序，周末利用豆瓣电影api实践了一下，效果如图。

Paste_Image.png

Paste_Image.png

Paste_Image.png

源码

源码地址 github地址，只写了两个界面，接口用是豆瓣api，尝鲜的同学可以参考一下。

MINA

MINA(MINA IS NOT APP)文档地址 是微信小程序的开发框架，我们的程序也就是建立在该框架上。框架整体上类似Android的结构：

• App
  App()函数类似Android中的Application，可以定义一些全局变量，有自己的生命周期：
  
  
  

  App生命周期
  
  每一个新定义的界面需要在App中的json文件中进行注册，跳转未经注册的界面程序会报错。类似在AndroidManifest中对activity进行注册。
  • Page
    page()类似Android 中的Activity，基本一个page对应一个界面

page生命周期

生命周期的函数由框架调用，可以根据生命周期来进行相应的设置。Page中定义一定数量的data，通过setData可以完成界面的重新render，进行异步数据获取时，在数据完成加载后可以通过该函数进行渲染。

• 文件结构
  每个界面由四个文件组成，js wxml wxss json,其中js和wxml是required，wxss和json是optional，各个部分功能如下：

Page文件结构

可见wxml不仅用于定义界面，还可以进行数据bind，当在代码中调用setData()时，bind数据的界面即会重新render，与android中的databinding很类似， 实践中也很方便。

• 界面跳转
  mina中定义跳转协议，

  wx.navigateTo(OBJECT)
  保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
  wx.redirectTo(OBJECT)
  关闭当前页面，跳转到应用内的某个页面。
  wx.navigateBack()
  关闭当前页面，回退前一页面

可根据url进行跳转，类似网页url，schema部分为page的本地路径，schema后可携带数据。本部分的实现可参考界面跳转部分的实现。文档地址mina导航文档地址。

• 控件
  mina 提供了许多空间，原生开发中的基本控件均覆盖了，试用了下，很方便，许多原生需要自定义的地方在mina中可以轻松使用。

一些小坑

1. 开始时使用的接口时知乎日报的接口，然而mina的image控件可能不支持http的图片地址，不能正常展示，后改为豆瓣接口。
2. 之前微信没有开放接口，利用weapp-ide-crack 提供的方式进行破解，坑比较多，然后一天之后微信就开放接口，试用还不错。

总体来说开发体验还不错，代码编辑部分的体验还有待提高，当然开发js我们也可以有更多的选择，在开发完成后使用微信开发工具进行代码调试即可。

非常感谢：
weapp-douban-film
weapp-ide-crack