微信小程序尝鲜demo

398 查看

微信推出了小程序,周末利用豆瓣电影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


2018 - 知识虫 - 我的知识库 渝ICP备16002641号-2

渝公网安备 50010702501581号