微信小程序开发

3月前

Miatou

小程序本质上是类似 React 的 MVC 框架,不过就小程序的 API 来说,很有鹅厂一贯简陋风格。虽然支持 ES6 转 ES5,但支持的不完全,很多功能无法使用。其中一个版本更是把内建 Promise 移除,且不支持 require npm 模块。

在抛弃 html、css之后,自己搞了一套 wxml、wxss,不支持类似 less、sass 语法。至于官方的编辑器,采用 nw.js 开发,效率低下、各种问题层出不穷,开了一会内存占用就飙高,要不就假死,如果你遇到编辑器有任何不正常的情况,重启总是唯一正确的解决方法,总之用来看效果就行了。

异步回调

小程序有很多异步回调的 API,比如这个场景:用户第一次使用,首先获取用户系统信息,判断版本兼容性,获取用户授权信息,上传到服务器,换取服务器授权 token,最后存到本地。这一共是3个回调,代码应该是这样的:

// 获取系统信息
wx.getSystemInfo({
  success: function (res) {
    // 获取用户微信信息
    wx.getUserInfo({
      success: function (res) {
        // 上传授权信息
        wx.request({
          url: 'api server url',
          success: function (res) {
            // 缓存 token
            wx.setStorage({
              token
            })
          }
        })
      }
    })
  }
})

再加入一些逻辑判断,这个异步回调,真的吐血。最好的解决方法是 ES2017 标准中的 Async,代码可以简化成下面的:

async function () {
  try {
    let systemInfo = await wx.getSystemInfo()
    let userInfo = await wx.getUserInfo
    let oauthInfo = await wx.request({ url: 'api server url' })
    wx.setStorage({ token })
  } catch (err) {
    console.error(err)
  }
}

如果想要使用 Async,就必须要 Babel 来把代码转成 ES5。

NPM 模块

Promise 本来是 ES6 标准,被小程序移除之后,需要手工引入一个 js 文件,如果还有其他的模块需求,就又要引入更多 js 文件,这又回到了远古前端的路子上,想要使用 npm,那就要 Webpack 来实现了。由于文件数量多,最好是自动遍历 src 文件夹,找出所有需要编译的 js 文件,需要 gulp 支持。

gulpfile.js 配置如下:

var gulp = require('gulp');
var named = require('vinyl-named');
var webpack = require('webpack');
var webpackStream = require('webpack-stream');

// Webpack 配置
var config = {
  resolve: {
    root: path.join(__dirname, 'node_modules'),
    extensions: ['.js']
  },
  output: {
    filename: '[name].js',
  },
  module: {
    preLoaders: [
      { test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/ }
    ],
    loaders: [
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ],
  // 配置 babel
  babel: {
    "presets": [
       "es2015",
       "stage-0"
    ],
    "plugins": [
       "transform-runtime",
       "transform-es2015-arrow-functions",
       "transform-async-to-generator"
    ],
    "sourceMaps": true
  }
};

// 编译 ES2017
gulp.task('compileJS', function () {
  return gulp.src(['src/**/*.js'])
    .pipe(named(function (file) {
      var path = JSON.parse(JSON.stringify(file)).history[0];
      var sp = path.indexOf('\\') > -1 ? 'src\\' : 'src/';
      var target = path.split(sp)[1];
      return target.substring(0, target.length - 3);
    }))
    .pipe(webpackStream(config), webpack)
    .on('error', function (err) {
      this.end()
    })
    .pipe(gulp.dest('dist'))
})

Sass 支持

Sass 就比较简单了,使用 gulp-sass 编译,然后修改文件后缀成 wxss 就行了。

评论(10)

  • 666

    1月前 回复
  • 感觉要有大动作!

    3月前 回复
  • 你这是正式用新主题了啊。 微信小程序还是蛮有用的在我看来。 这个基础教程收藏了。

    3月前 回复
    • 牧风

      已经放弃 Wordpress 了

      3月前 回复
    • 你评论邮件也太辣眼睛了,我发QQ给你了。你看看

      3月前 回复
    • 牧风

      修改了评论的样式

      3月前 回复
    • 还行,话说你不嵌套下评论?一级一级的现在。。。

      3月前 回复
    • 牧风

      数据库没有做嵌套,暂时也懒得改

      3月前 回复
    • 这个估计需要的话,要尽快,不然就变成历史遗留问题了,哈哈

      3月前 回复
  • 大变样~~!

    3月前 回复