微信小程序初接触与踩坑日记

发布：2018-01-27 14:45浏览：次来源：网络作者：cola

一：微信小程序初接触

微信主要做了这么几件事：

不怎么流通的数据流
指定ui
破破烂烂的ide

尤其自带的ide简直不能忍受

想要用其他ide（编辑器）写微信小程序，我们需要做下面的事：

将html编译成wxml
将sass编译成wxss
由于json的难阅读所以使用yml进行配置

gulp配置

var gulp = require('gulp')
var fs = require('fs')
var sass = require('gulp-sass')
var rename = require('gulp-rename')
var yaml = require('gulp-yaml')
var babel = require('gulp-babel')
var image  = require('gulp-image');

gulp.task('wxml', function () {
  gulp.src('./app/**/*.html')
  .pipe(rename(function (path) {
    path.extname = '.wxml'
  }))
  .pipe(gulp.dest('build/'))
})

gulp.task('sass', function () {
  gulp.src('./app/**/*.scss')
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(rename(function (path) {
    path.extname = '.wxss'
  }))
  .pipe(gulp.dest('build'))
})

gulp.task('yml', function () {
  gulp.src('./app/**/*.yml')
  .pipe(yaml({ space: 2 }))
  .pipe(gulp.dest('build'))
})

gulp.task('js', function () {
  gulp.src('./app/**/*.js')
  .pipe(babel({
    presets: ['es2015']
  }))
  .pipe(gulp.dest('build'))
})

gulp.task('image', function () {
  gulp.src(['./app/**/*.png', './app/**/*.jpg'])
  .pipe(image())
  .pipe(gulp.dest('build'))
})

gulp.task('default', ['wxml', 'sass', 'yml', 'js'], function () {
  gulp.watch('./app/**/*.html', ['wxml'])
  gulp.watch('./app/**/*.scss', ['sass'])
  gulp.watch('./app/**/*.yml', ['yml'])
  gulp.watch('./app/**/*.js', ['js'])
})

下面是非前端或者非nodejs开发者看的：

首先你得安装nodejs和npm，然后执行npm i -g gulp-cli。然后git clone 项目。进入文件夹中执行npm install，然后执行gulp即可进行编译。

将编译后的build/目录作为小程序主目录。完成。

atom 插件

个人花了点时间搞了一个atom插件。作为atom开发的补充，具有部分自动补全的功能，都是体力活。atom搜索安装wxapp插件就好。重启编辑器后直接使用

基础配置

微信已经将目录结构定死了所以可以发挥的余地也不是很大，基本来说只要跟着他的教程走做个简单的应用还是很容易的

模板目录如下：

weapp/
	app/
		pages/
			index/
			logs/
		utils/
		app.js
		app.scss
		app.yml
	node_modules/
	build/
	.gitignore
	gulpfile.js
	package.json

其中build为打包后的目录，微信小程序就运行该目录。

另外我个人搞了个atom插件（我习惯用atom）包括了部分自动提示，还可以。

小程序示例

接下来我们将使用v2ex的接口来进行简单的示例。v2ex的接口相当简洁，非常时候做示例。

接口整理

最热主题：

url: https://www.v2ex.com/api/topics/hot.json

method: get

节点信息

url: https://www.v2ex.com/api/nodes/show.json

method: get

query: name

用户主页

url: https://www.v2ex.com/api/members/show.json

method: get

query: id or username

简单配置后台

由于小程序域名有所限制，所以这里自己搭个后台简单转发一下，代码如下：

var https = require('https')
var express = require('express')
var fs = require('fs')
var request = require('request')

var app = express()

var options = {
  key: fs.readFileSync('./wechat/wechat.key'),
  cert: fs.readFileSync('./wechat/wechat.pem')
}

app.get('/', (req, res) => {
  res.json({
    name: 1
  })
})

app.get('/hot', (req, res) => {
  var url = 'https://www.v2ex.com/api/topics/hot.json'
  request(url, (err, result, body) => {
    res.json(body)
  })
})

app.get('/newest', (req, res) => {
  var url = 'https://www.v2ex.com/api/topics/latest.json'
  request(url, (err, result, body) => {
    res.json(body)
  })
})

app.get('/profile', (req, res) => {
  var username = req.query.username
  var url = 'https://www.v2ex.com/api/members/show.json?username=' + username
  request(url, (err, result, body) => {
    res.json(JSON.parse(body))
  })
})

var server = https.createServer(options, app)

server.listen(443, () => console.log('server is running'))