一次微信小顺序的疾速开辟体验

2019年8月31日 159次阅读 来源: jayzou

原由

事变是如许的

一天早上组里还早猛烈的议论某个项目的可用性和发展前景，倏忽老大说了句，能不能做个小顺序的版本呢？然后人人纷纭议论起来，有阻挡有支撑，我就说了一句，刚出来的时刻搞过一会。。。然后就把我推出来了（日了狗了~~）

这个项目也许一个礼拜以后就要推出去了，换句话说，我要一个礼拜内搞个小顺序的版本出来，宝宝有点慌了~~

不过既然接办了照样要好好做的，起首的，完整自身搞肯定是来不及，项目的模块相对要复用起来，思考下也许有3点须要搞

  • HTML

  • CSS

  • javascript module

CSS

个中CSS在小顺序的叫做WXSS，基础和CSS语法相似了，也就须要将标签选择器改了，比方

table{
    //XXX
}
//改成
.table{

}

另有就是WXSS的尺寸单元比较引荐运用rpx，然则这里照样继承运用px，固然在响应式方面还须要自身改改，工程量不是很大

JS

关于JS方面就比较辣手了一点，唯一光荣的是，原项目是用vue来做框架搭建的，仔细观察下小顺序框架的语法构造，发明实在和vue很相似，都具有性命周期和种种事宜绑定等等，所以在团体JS构造上面也许有几点须要修正

  • 性命周期函数

  created: function () {
    //xx
  }

  //改成
  onLoad: function() {

  }

  • 数据绑定

this.container = '';
//改成
this.setData({
    "container": ''
});

剩下的就是模块的援用，小顺序自身也支撑ES6语法，但照样有缺点，比方不支撑promise，能够经由过程引入响应的polyfill 来处理，还能趁便让小顺序自身的API也应用上promise

//util.js
import Promise from './bluebird.min';
export const wxPromise = function(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function(res) {
        resolve(res);
      }

      obj.fail = function(err) {
        reject(err);
      }

      fn(obj)
    })
  }
}

能够在须要挪用的处所引入，或许直接在APP.js内里封装原API，然后挂载在全局上面

import {wxPromise} from '../../utils/util';
let login = wxPromise(wx.login);
let getUserInfo = wxPromise(wx.getUserInfo);
login()
    .then((res) => {
        console.log(res);
        return getUserInfo();
    })
    .then((res) => {
        console.log(res);
    })
    .catch((res) => {
        console.log(res);
    })

原项目内里的模块还挪用了window对象的属性，比方localstorage、innerWidth、innerHeight等等，在开发东西内里输出console.log(window)直接甩了我一个大大undefined，呵呵，都快崩溃了，厥后想一想，也不是完整没有办法，小顺序也有相似的API来完成这些要领和属性，我要做的就是造一个window对象给它就能够了，老样子，直接挂载全局就行


    App({
        window: {},
        location: {
            href: 'http://localhost/index.html?clear'
        },
        onLaunch: function() {
            let _this = this;
            getSystemInfo()
                .then((res)=>{
                    _this.window.innerWidth = res.windowWidth;
                    _this.window.innerHeight = res.windowHeight;
                })
            _this.window.localStorage = {};
            _this.window.localStorage.setItem = wx.setStorageSync;
            _this.window.localStorage.getItem = wx.getStorageSync;
            _this.window.localStorage.clear = wx.removeStorageSync;
        }
    })

//注入到页面或许模块
let {window, location} = app;

HTML

末了一个困难就是HTML了，起首HTML直接套在WXML上面是行不通的，结果是能够编译显现出来，然则完整失去了HTML各个标签的意义，比方div块级标签所具有的属性都不存在了，固然你能够经由过程WXSS增加属性来兼容，比方

div, p {
    display:blcok
}

我个人并不赞许这类做法，由于在HTML中img、canvas等等并没有请求闭合标签，然则WXML是严格请求每一个标签都要有闭合，就是说你想经由过程增加WXSS属性来兼容的话，起首要手动加img和canvas的闭合标签(在小顺序中img标签应该是image，不然照样没法显现图片)，其次就是怕官方下次更新迭代倏忽到场div这个组件，然后又要改版，烦~~
那末唯一的前途就是将HTML转成相符小顺序的WXML出来，作为一个顺序员，手动改也太掉价了。。。直接上东西，google查下，发明网上也有相似的东西出来，东西的转换道理是如许的话，起首HTML先转换成json对象，然后注入到模版，由模版天生。
然则有2个题目
1、转换出来的WXML是依靠模版衬着的，起首小顺序的模版是不支撑递归挪用的，就是说，如果你的标签有6层嵌套的话，那末你须要复制6份模版出来，然后tmp1嵌套tmp2…temp6，如许的话你只能祷告东西带来的模版有嵌套了足够多。
2、没法完成数据绑定，比方

<div>{{text}}</div>
//转换后原样输出了{{text}}
<view>{{text}}</view>

既然模版输出这条路走不通，那就只能借助node动态的输出WXML，思绪和上面差不多，也是HTML天生json dom，然后递归衬着wxml节点，末了输出一份wxml文件，东西的完成在这里，细节就不多说了，现在还没有做canvas、audio、video标签的转换，有BUG的话直接提issue，末了求star

总结

没事别BB

    原文作者：jayzou
    原文地址: https://segmentfault.com/a/1190000008559931
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞