小程序基础请参考之前的踩坑心得心得记录

小程序的基础知识可以参考之前的文章：

在现有的一个html5移动端项目的基础上，考虑到其形状和大小非常适合改造为微信小程序，所以花了很短的时间就撸起袖子尝试了一下，在此记录一下期间遇到的踩坑经验

目录 1. 可重用的模拟

在之前的项目中，使用了模拟的前后端通信数据（mock）。 稍作修改，即可满足小程序的测试，同时保留对原项目的支持。

1.1 识别请求来源为小程序

//小程序中的每次请求
wx.request({
      url: `http://127.0.0.1:3201${url}`,
      data: assign(
        data, 
        {
          _from_weapp: 1, //添加特殊标记，以作区分
          code: _globalData['wx_code'],
          openid: wx.getStorageSync('openid')
        }
      ),
      
      ...
});

//mock中的过滤器
app.all('/api/*', function(req, res, next) {  
    //判断来源是不是小程序
    const IS_WEAPP = req.method == 'GET'
        ? req.query._from_weapp == 1 
        : req.body._from_weapp == 1;
        
        ...     
});

1.2 登录状态及权限管理

1.3 跨域ajax设置

app.all('/api/*', function(req, res, next) {  
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Credentials", true);
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    res.header("Content-Type", "application/json;charset=utf-8");  
    next();  
});

2.素材图像处理

与以往的经验相比，小程序中的素材图片需要考虑以下几点

所以基本的应用原则是：尽量减少素材图片的使用，除了系统等地方用到的图标外，图片文件需要打包成结构，其他素材图片转码后放入wxss中

/*在wxcc中的引用*/
.figure {
  width: 27rpx;
  height: 25rpx;
  display: inline-block;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAZCAYAAADAHFVeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABd0RVh0Q3JlYXRpb24gVGltZQAyMDE3LjUuMjKXkY//AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAgVJREFUSImtldGRokAQhj+te9cQyED22alamAlgyWDZDAxhjeC8CGQjWBKA5YF7381AM8AIvIdpcJxDC8WpskBo/q+b+buZ4K2yqANgBYRADmTaqMaPG7qOx2N3PvVAKfANJHLpN1CVRT2/F+auDiagLVABoTYqAp6AQIDhQ2AitAUOwAtSmTbqG4geBWwr2wB7Ef0BtlKpCwR4HwWT/XgG3sUI0QVgDozau19Y14E1BtqopizqCMgEiMS8AusxsIkIf2mjJv7NsqgzgQB8aKPSWwG91pf+8lclx/U9IH9NgZ2c9zmtTSAfCwKYaqN2WCemPfczbDs8rs9E9MUXlEQi+fvQPjsAmT+avD4bBewcWBZ1Anxieyzyh68YKMfuYyRJ4MWkcr/RRm3g3I2TnuDtFeAc69AAWGmjMudehm2TAzBrNWK97DTOpr48/AYs6Jn2zoTZ4UwYB7TWRs1dja/yb6fxXyPfWOFCYhZYR4dtrGhsJLEk1svdWWV3VPgBNMAf7NzsYkUjwr7y/GJlQyv0YkNOE6czkKMR91Y2tEIv9lKLdAlerczJus3u1goT7L4FQDAI5gH3QKqNqq7EtsCZXHqL9TIbDBORCLvZM6w5cm1U7sXMOVU0a0Ew8DX2iK3k12b+w2lvnuW4B9JYL6v22ZthHjjBfppCrPUb7Bc/b93ojqt/8akRua+fVJwAAAAASUVORK5CYII=');
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 12rpx;
}

//转码的脚本
const base64Img = require('base64-img');
const imgs = Array.from(process.argv).slice(2);
console.log(imgs.map(imgPath=>{
    let rst = imgPath + '\n-------------------\n';
    rst += base64Img.base64Sync(imgPath);
    rst += '\n\n';
    return rst;
}).join('\n'));

3、风格转变

由于之前的项目使用了比较合理的rem大小，因此只需稍加修改就可以轻松转换为小程序所需的rpx

/*既有项目中的LESS预处理*/
@remUIWidth: 720; /*之前的设计图尺寸*/
.px2rem(@px, @name: font-size){
    @{name}: unit(@px, px);
    @{name}: unit(@px / (@remUIWidth / 20), rem);
}
...
.logout {
    .px2rem(130px, margin-left);
}

/*编译结果*/
.logout {
  margin-left: 130px;
  margin-left: 3.61111111rem;
}

改成小程序的rpx格式，仍然用Less进行预处理：

@WEAPP-WIDTH: 750;
@ui-width: 720;
.px2rpx(@px, @name: font-size){
  @{name}: unit(@px, px);
  @{name}: unit( floor(@px * @WEAPP-WIDTH / @ui-width), rpx);
}
...
.logout {
    .px2rpx(130px, margin-left);
}

/*编译结果*/
.logout {
  margin-left: 130px;
  margin-left: 135rpx;
}

4、小程序中的几种不同的跳转

小程序现在不允许外部链接，但即使对于应用内重定向，也有几种不同的方式，即使您不舒服，您也必须了解：

组件中有一个open-type属性，对应上面的类型：

5.兼容性有点令人失望

虽然小程序已经发布很长时间了，但是在很多方面都在不断的变化和完善。 es6和css的语法可以通过“启用ES6转ES5”和“上传代码时启用样式文件自动补全”来解决。 但有些所谓的新API仍然需要人工判断和处理：

老版本微信客户端不支持()/()

const hide_loading = () => {
  if (wx.hideLoading) {
    wx.hideLoading()
  } else {
    wx.hideToast()
  }
};

老版本的微信客户端不支持，根据情况采用不同的方法替换

if (wx.reLaunch)
    wx.reLaunch({
      url: rst.route
    })
else 
    wx.switchTab({
      url: rst.route,
    })

在某些ios客户端中，当程序启动时，立即调用()会报错，需要延迟

if (res.statusCode == 401) {
  setTimeout(function() {
    if (wx.reLaunch)
      wx.reLaunch({
        url: '/pages/login/login'
      });
    else
      wx.redirectTo({
        url: '/pages/login/login'
      })
  }, 500);
  return;
}

兼容处理组件跳转

本例中，由于是用不同的参数跳转到该页面，在老版本客户端尝试了几个旧的属性值后无法实现，所以特殊处理：

{{ tab.label }}

const openType = wx.reLaunch ? 'reLaunch' : 'navigate';
...
//在 onLoad(opts) 中
this.setData({
    tabs: {
        openType,
        current: opts.key,
        tabs: result.tabs,
        links: result.tabs.map(
            tab =>`/pages/path?time=${opts.time}&key=${tab.key}`
        )
    },
    ...
});
...
onTabClick(evt) {
    if (openType === 'reLaunch') return;
    const {url} = evt.currentTarget.dataset;
    const [m, time, key] = url.match(/time\=(.*?)\&key\=(.*?)$/);
    this.onLoad({time, key});
}

其他通用的兼容处理方法参见官方文档：

6.马马虎虎的小程序“组件”

小程序目前不支持原生“组件”的概念，只能使用js/wxml/wxss中提供的模块化方法来实现

对于更简单的可复用组件，如果没有更复杂的逻辑，只需考虑模板和样式：

...