zweizhao.github.io

项目,文章,随笔,博客,Markdown,个人网站,人生感悟。

View on GitHub

Mithril&HbuilderX 上架 Google Play

后端使用的是 LeanCloud,为了快速开发而使用云后台。原计划是 Bmob,不过有 bug,而且工单反应慢就放弃,而换了 LeanCloud。

Google Play 相关成果信息展示

Google Play 的开发者后台地址:Google Play Console

Google Play 开发者后台

后台

Google Play 结果

Google Play


正文部分

由于 Mithril 本身就是一个极其轻量的纯 JS 框架,所以没有使用任何第三方的 UI 框架,纯手工,配上打包最终 Apk 大小是 2.3M,可以说是非常的轻量了。

一个展示的 APP,一个上传图片的网页。

iPixel

模块

项目工程

上面 unpackage 是 HBuilderX 打包忽略,懒得处理就把 src 内容放到 unpackage 里面了,所以 unpackage 相当于 src 开发路径。

css 与 js 文件夹是生成最终文件,非开发路径。

static 为引用的第三方库,av 是 LeanCloud 库(这名字我喜欢);hammer 是手势库,APP还是有点手势的好;mithril 就不用说了。

使用了 yarn 包管理,webpack 打包 ES6,LESS 编译使用的是 VSCode 拓展:Easy LESS,所以总配置就 webpack.config.js 与 .babelrc,如下:

webpack.config.js

module.exports = {
  entry: './unpackage/js/main.js',
  output: {
    path: __dirname + '/js',
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader',
      },
    ],
  },
  resolve: {
    alias: {
      '@': __dirname + '/unpackage/js'
    }
  }
}

.babelrc

{
  "presets": ["@babel/preset-env"]
}

组件

组件

一共三大组件:

  1. detail 为主页面,意为展示图片详情页面。
  2. drawer 为左侧的抽屉。
  3. store 为数据控制中心,用来处理跨组件交互(项目还小,目前没怎么用到)。

toast 为兼容网页与 APP 的弹出对话组件,main 是项目入口文件。

可公开代码

main

main 入口只有一个 Detail,目前没有用到路由。

import Detail from './pages/detail'

m.mount(document.body, {
  view() {
    return [m(Detail)]
  },
})

上面使用数组是为了后续拓展。

store

store 里面寄存一个单例,数据初始化在具体组件里面。

const STORE = Symbol('foo')

const store = {}

if (!global[STORE]) {
  AV.init('xxx', 'yyy')

  global[STORE] = store
}

export default global[STORE]

toast

调用原生的 toast,如果是网页就使用 alert。

//自定义弹框
export default msg => {
  try {
    plus.nativeUI.toast(msg)
  } catch (error) {
    alert(msg)
  }
}

try 原则上是不提倡用的,但是用起来方便,如果使用 webpack 打包,效率损失是可忽视的,这是经过本人亲自测试的,如果是纯原生为经过 webpack 打包,就不要乱用了。

detail

import store from '@/store'
import Drawer from '@/components/drawer'
import Toast from '@/components/toast'

// 这里初始化 store 对应数据
let { list, classes } = (store.detail = {
  list: [], // 返回图片结果列表
  imgTitle: 'no img',
  currentIndex: 0,
  max: 10,
  drawerShow: false,
  classes: ['Asuna'], // 所有类型
  selectedClass: '',
})

const state = store.detail
let currentUrl = '#'

// 获取抽屉列表数据
const getClasses = () => {
  const query = new AV.Query('CLASSES')
  query.find().then(res => {
    classes = Array.from(res, item => item.get('className'))
    try {
      getList(classes[0])
    } catch (error) {
      console.log(error)
    }
  })
}

// 获取图片列表数据
const getList = className => {
  state.selectedClass = className
  if (state.selectedClass === '') return

  list = [] // 先清空
  state.currentIndex = 0 // 索引放到第一个
  const query = new AV.Query(state.selectedClass)
  query.addAscending('title')
  query.find().then(res => {
    list = res
    state.max = res.length - 1
    // 第三方,所以无法被动触发,需要手动
    m.redraw()
  })
}

// 子组件的回调
const changeSelectedClass = index => getList(classes[index])

// 索引加减
const cup = d => {
  state.currentIndex += d
  // 索引越界处理
  if (state.currentIndex < 0) {
    state.currentIndex = 0
    Toast('本组第一张了。')
  } else if (state.currentIndex > state.max) {
    state.currentIndex = state.max
    Toast('没有更多了。')
  }
  // 第三方,所以无法被动触发,需要手动
  m.redraw()
}

// 子组件回调隐藏抽屉
const hiddenDrawer = () => (state.drawerShow = false)

// 图片组件,因为有 DOM 操作所以单独抽出来。
const Img = {
  oncreate(v) {
    // DOM 操作
    const hammertime = new Hammer(v.dom, { domEvents: true })
    hammertime.on('press', this.clickImg.bind(this))
    hammertime.on('swipeleft', cup.bind(this, 1))
    hammertime.on('swiperight', cup.bind(this, -1))
  },
  view(v) {
    const { url } = v.attrs
    currentUrl = url

    return m("img.img[alt='img']", {
      src: url,
    })
  },
  clickImg() {
    if (confirm('确定下载吗?')) {
      console.log(currentUrl)
      try {
        plus.gallery.save(currentUrl, function() {
          alert('保存图片到相册成功')
        })
      } catch (error) {
        alert('PC没有保存相册功能')
      }
    }
  },
}

// detail 组件
export default {
  oncreate(v) {
    getClasses()
  },
  view() {
    const title =
      list[state.currentIndex] && list[state.currentIndex].get('title')
    const url = list[state.currentIndex] && list[state.currentIndex].get('url')

    return m('.detail.page', [
      m('header', [
        m('button', { : () => (state.drawerShow = true) }, '更多'),
        m('h1', title || state.imgTitle),
        m('button', { : Img.clickImg }, '保存'),
      ]),
      m('main', [m(Img, { url })]),
      m('footer', [
        m(
          'button',
          {
            : () => state.currentIndex--,
            disabled: state.currentIndex < 1,
          },
          '上一张'
        ),
        m(
          'button',
          {
            : () => state.currentIndex++,
            disabled: state.currentIndex >= state.max,
          },
          '下一张'
        ),
      ]),
      // 子组件通信
      m(Drawer, {
        drawerShow: state.drawerShow,
        changeSelectedClass,
        classes,
        hiddenDrawer,
      }),
    ])
  },
}

关键注释已经添加,这里主要说一下 m.redraw() 的使用。

一般来说,不需要主动触发这个,但是当你的回调或者 state 数据变动被绑定在了第三方这种情况下,修改是不会触发 diff 树变动的,所以需要 m.redraw() 来手动处理。

drawer

import store from '../store'

const state = (store.drawer = {
  selectedIndex: 0,
})

export default {
  view(v) {
    const { hiddenDrawer, drawerShow, changeSelectedClass, classes } = v.attrs

    return m('.drawer.page', { class: drawerShow && 'drawer-show' }, [
      m('.shadow-back', { : hiddenDrawer }, [
        m('.content', [
          // m('img.logo'),
          m(
            'ul',
            classes.map((className, index) =>
              m(
                'li',
                {
                  class: index === state.selectedIndex && 'selected',
                  : () => {
                    state.selectedIndex = index
                    changeSelectedClass(index)
                  },
                },
                className
              )
            )
          ),
        ]),
      ]),
    ])
  },
}

drawer 就相对简单,主要是通过 v.attrs.x 来获取父组件传来的数据,当然,store 就不需要传递了。

你可以传数据,当然也可以传函数回调,这里建议:

  1. 单向数据流,子组件尽量不要直接修改父组件数据。
  2. 如果要修改,使用回调函数修改,即父子组件使用同一个方法修改相关数据。

搞完。

共耗时约 12 小时吧,后面第一次上 Google Play 花了 3 小时。一共 15 小时,不算整理资源。

Google Play 的审核效率是远远超过 App Store 的。3 小时包含审核不通过,审核下架(就是这个 APP 废了),重新发布审核通过一系列过程。对了,还有人工交流……

最终效果:

PC 版

不要疑惑,我这当然兼容 PC 版了……那个保存因为是 alert,位置不对没有截图进来。

网页体验地址,推荐手机模式


感谢上次评论让我发个实战教程的同学,呐,请收下……


喜欢的请关注一波,一起装逼一起飞。