一次微信小程序的快速开发体验

or0fun 发布于2019-08-21 15:20 / 2651人阅读

摘要：起因事情是这样的一天早上组里还早激烈的讨论某个项目的可用性和发展前景，突然老大说了句，能不能做个小程序的版本呢然后大家纷纷讨论起来，有反对有支持，我就说了一句，刚出来的时候搞过一会。。。

起因

事情是这样的

一天早上组里还早激烈的讨论某个项目的可用性和发展前景，突然老大说了句，能不能做个小程序的版本呢？然后大家纷纷讨论起来，有反对有支持，我就说了一句，刚出来的时候搞过一会。。。然后就把我推出来了（日了狗了~~）

这个项目大概一个星期之后就要推出去了，换句话说，我要一个星期内搞个小程序的版本出来，宝宝有点慌了~~

不过既然接手了还是要好好做的，首先的，完全自己搞肯定是来不及，项目的模块绝对要复用起来，思索下大概有3点需要搞

HTML

CSS

javascript module

CSS

其中CSS在小程序的叫做WXSS，基本和CSS语法类似了，也就需要将标签选择器改了，比如

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

}

还有就是WXSS的尺寸单位比较推荐使用rpx，但是这里还是继续使用px，当然在响应式方面还需要自己改改，工程量不是很大

对于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}}
{{text}}

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

总结

没事别BB

GPU云服务器云服务器微信小程序是一次开发吗微信小程序的开发微信小程序是怎么开发的怎么开发自己的微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88158.html

一次微信小程序的快速开发体验

摘要：起因事情是这样的一天早上组里还早激烈的讨论某个项目的可用性和发展前景，突然老大说了句，能不能做个小程序的版本呢然后大家纷纷讨论起来，有反对有支持，我就说了一句，刚出来的时候搞过一会。。。起因事情是这样的一天早上组里还早激烈的讨论某个项目的可用性和发展前景，突然老大说了句，能不能做个小程序的版本呢？然后大家纷纷讨论起来，有反对有支持，我就说了一句，刚出来的时候搞过一会。。。然后就把...

VioletJack 2019-08-01 16:24 评论0 收藏0
记一次微信小程序在安卓的白屏问题

摘要：在做小程序的时候，做到了一个限时商品售卖，用到了倒计时，因为这个原因导致了安卓手机上使用小程序时，将小程序放入后台运行一段时间后，再次进入小程序后出现了页面白屏或者点击事件失效的情况，这里记录下相关代码文件我这里是使用了自定义组件的形式来渲在做小程序的时候，做到了一个限时商品售卖，用到了倒计时，因为这个原因导致了安卓手机上使用小程序时，将小程序放入后台运行一段时间后，再次进入小程序后...

Hydrogen 2019-08-23 14:13 评论0 收藏0
从0到1：微信小程序自选股项目回忆录

摘要：小程序自选股项目团队在长达五个月的时间里经历了太多不为人知的故事，不知通宵了多少个夜晚，只为等待小龙宣布号小程序正式发布的到来。第一次被微信开放平台开发二组团队小程序项目团队当小白鼠各种实验新特性。。导语：我很喜欢小龙的一句话，微信因你而变。是的，把事情做到极致的时候，这个世界就会因你而变。小程序自选股项目团队在长达五个月的时间里经历了太多不为人知的故事，不知通宵了多少个夜晚，只...

feng409 2019-08-20 13:36 评论0 收藏0
从前端界面开发谈微信小程序体验

摘要：在开发之前你要有微信开发者工具。同时为了更适合开发微信小程序，还对进行了扩充以及修改，直接帮我们把适配的一部分工作都做了，比如他的，可以根据屏幕宽度进行自适应，规定屏幕宽为。本文由云+社区发表这段时间有幸加入了一个关于微信小程序的项目开发组，从无到有的根据文档自行学习了小程序的开发过程，前面已经有几位前辈的文章珠玉在前，我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧...

hellowoody 2019-08-23 13:55 评论0 收藏0