起因是某天早上群里就某个项目的易用性和发展前景进行了热烈的讨论,突然老板说,我们能不能做一个版本的小程序?然后大家纷纷议论,有反对的,也有支持的,所以我就随便说了一句,刚出来的时候过了一会。..然后就上线了(狗处理了~~)这个项目大概一周后上线。也就是说,我想在一周之内做出一个版本的小程序,宝宝有点慌~~不过既然接手了,还是要做好。首先,自己动手肯定来不及。项目的模块必须被重用。想了想,大概有3点需要做。HTMLCSSjavascriptmoduleCSS其中,小程序中的CSS称为WXSS,基本与CSS语法类似,所以需要更改标签选择器,如table{//XXX}//改为.table{}和WXSS的大小单位推荐使用rpx,但是这里继续使用px,当然在响应性方面需要自己修改。工作量不是很大。JS对JS来说有点棘手。唯一值得庆幸的是,原来的项目是用Vue作为框架搭建的。仔细观察小程序框架的语法结构,发现其实和vue很像,都有生命周期和各种事件绑定等等,所以整体的JS结构大概有这么几个点需要修改的。创建的生命周期函数:function(){//xx}//改为onLoad:function(){}Databindingthis.container='';//改为this.setData({"container":''});剩下的就是module的引用,小程序本身也支持ES6语法,但是还是有缺陷,比如不支持promise,可以通过引入相应的polyfill来解决,顺便提一下小程序的API本身也可以应用于promise//util.jsimportPromisefrom'./bluebird.min';exportconstwxPromise=function(fn){returnfunction(obj={}){returnnewPromise((resolve,reject)=>{obj.success=function(res){resolve(res);}obj.fail=function(err){reject(err);}fn(obj)})}}可以在需要调用的地方引入,或者直接将原有的API封装在APP.js中,然后挂载在全局上方import{wxPromise}from'../../utils/util';letlogin=wxPromise(wx.login);letgetUserInfo=wxPromise(wx.getUserInfo);login().then((res)=>{console.log(res);returngetUserInfo();}).then((res)=>{console.log(res);}).catch((res)=>{console.log(res);})原项目中的modules也调用了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对象,然后注入到模板中,由模板生成。但是有两个问题。1、转换后的WXML依赖模板渲染。首先,小程序的模板不支持递归调用。也就是说,如果你的标签有6层嵌套,那么你需要复制6份模板。出来,然后tmp1嵌套tmp2...temp6,只能祈祷工具带来的模板嵌套够多了。2.无法实现数据绑定,如
