微信小程序极简入门（二）--豆瓣电影小程序入门

基于第一章的quick start模版，我们来进行开发改动，并学习微信小程序的相关概念及开发基础知识。

最终小程序效果图，扫码查看：

一 新建页面及引入类库

我们来打开app.json文件来快速创建页面，page数组第一行就是首页，我们新建两个页面，如图：

然后发现左边的树形目录就自动创建了相关文件。

然后我们引用一个js类库，这个类库在github: https://github.com/lightTrace/xiaochengxu/tree/master/douban-v1 中有，大家单独拿出来复制粘帖到项目的根目录下就行了,当然大家也可以对照源代码，防止有标点符号打错或遗漏的小问题：

然后在目录树中打开app.js,修改成：

//app.js
let app = require("./sim.js/index.js")
App(Object.assign(app,{
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
}))

主要修改是在顶部引用了sim.js类库：

let app = require("./sim.js/index.js")

然后将App(｛ 替换为App(Object.assign(app,{，当然最后一行要加个）

这两部主要是将sim.js的类库方法附在了App对象上，在接下来的开发中，通过getApp（）方法即可获取App对象，并使用sim.js的方法

二 实现splash效果

1.在目录树中打开pages/douban/splash.wxml文件，修改代码成：

<swiper style="height: 100%;width: 100%;" indicator-dots>
  <swiper-item wx:for="{{ subjects }}" wx:key="{{ item.id }}" style="flex: 1;">
    <image src="{{ item.images.large }}" mode="aspectFill" style="position: absolute;height: 100%;width: 100%;opacity: .8;" />
  </swiper-item>
</swiper>

这里使用了swiper组件，swiper-item是swiper的子项，有多少张图片就有多少个子项，它们的宽高被自动设置成百分之百。

image组件的mode属性，用于设置图像的缩放策略，aspectFill是最常用的缩放模式，它保持一定的比例就将图片完整的显示出来。

2.然后继续修改pages/douban/splash.js文件：

// pages/douban/splash.js
Page({
  data: {
    subjects: [],
  },
  onLoad(options) {
    console.log("...")
    let app = getApp()
    app.request("https://api.douban.com/v2/movie/coming_soon?start=0&count=3").then(
      data => {
        console.log("..11.", data)
        this.setData({ subjects: data.subjects })
      }
    )
  }
})

上述代码中，subjects是wxml代码中用来绑定数据的数组，这里使用了app.request()方法用来请求豆瓣的api。获取到数据后，就用setData方法渲染视图，setData会实现两个功能：
1.保存数据至subjects变量
2.通知页面视图，若数据有更新，则进行渲染

我们可以直接访问https://api.douban.com/v2/movie/coming_soon?start=0&count=3 ，可以得到一个json数据，然后pages/douban/splash.wxml中主要是通过<image src="{{ item.images.large }}" mode="aspectFill" style="position: absolute;height: 100%;width: 100%;opacity: .8;" />
展示图片信息，而item.images.large访问的就是三张图片路径

大概就是这么一个获取数据渲染页面的流程。

前面我们已经提过了，在任何页面我们都可以通过getApp()方法取得全局唯一的App对象，就可以调用sim.js的类库了。

3.然后修改在目录树中的app.wxss文件：

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
page{
    height: 100%;
    background-color: #f9f9f9;
}

这是因为小程序中，page的默认高度默认是0，前面splash.wxml中的swiper组件将高度设置成100%是无用的，因为父容器高度是0，所以需要在app.wxss指定父容器高度，即添加：

page{
    height: 100%;
    background-color: #f9f9f9;
}

4.到此为止，点击开启模拟器，我们就实现了通常进入app页面，底部通常有三个指示点，分别对应三张图片，可以滑动查看，效果图：

ps：由于豆瓣API接口是实时更新的，所以后面引入接口页面显示的内容和我的不一样，属于正常现象，不影响学习！

在此，我们就先学习这么多，因为如果写的太长显得太枯燥，下一步将继续深入学习：微信小程序极简入门之豆瓣电影小程序实现页首splash和内容横向滑动（三）