山东省住房城乡建设厅网站首页,耒阳市古雍网站建设店,来推网站,企业官方网站制作起因 事情是这样的 一天早上组里还早激烈的讨论某个项目的可用性和发展前景#xff0c;突然老大说了句#xff0c;能不能做个小程序的版本呢#xff1f;然后大家纷纷讨论起来#xff0c;有反对有支持#xff0c;我就说了一句#xff0c;刚出来的时候搞过一会。。。然后就… 起因 事情是这样的 一天早上组里还早激烈的讨论某个项目的可用性和发展前景突然老大说了句能不能做个小程序的版本呢然后大家纷纷讨论起来有反对有支持我就说了一句刚出来的时候搞过一会。。。然后就把我推出来了日了狗了~~ 这个项目大概一个星期之后就要推出去了换句话说我要一个星期内搞个小程序的版本出来宝宝有点慌了~~ 不过既然接手了还是要好好做的首先的完全自己搞肯定是来不及项目的模块绝对要复用起来思索下大概有3点需要搞 HTMLCSSjavascript moduleCSS 其中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
