起因
事情是这样的
一天早上组里还早激烈的讨论某个项目的可用性和发展前景,突然老大说了句,能不能做个小程序的版本呢?然后大家纷纷讨论起来,有反对有支持,我就说了一句,刚出来的时候搞过一会。。。然后就把我推出来了(日了狗了~~)
这个项目大概一个星期之后就要推出去了,换句话说,我要一个星期内搞个小程序的版本出来,宝宝有点慌了~~
不过既然接手了还是要好好做的,首先的,完全自己搞肯定是来不及,项目的模块绝对要复用起来,思索下大概有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、无法实现数据绑定,比如
//转换后原样输出了{{text}}
{{text}}
既然模版输出这条路走不通,那就只能借助node动态的输出WXML,思路和上面差不多,也是HTML生成json dom,然后递归渲染wxml节点,最后输出一份wxml文件,工具的实现在这里,细节就不多说了,目前还没有做canvas、audio、video标签的转换,有BUG的话直接提issue,最后求star
总结
没事别BB