uni-app使用心得——微信小程序

作为一个前端开发人员，会开发微信小程序现在已经是一个必不可少的技能，但是，要重新去学又要花费大量的时间，虽然原生的微信小程序中和传统的H5、JS、CSS差别不是很大但是也不是按照我们平时的开发步骤，势必会踩到坑影响开发进度，所以，在业余时间，我选择了uni-app进行学习。

---

uni-app介绍：

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。详见评测DCloud公司拥有370万开发者用户，旗下uni-app有5万+案例、800款插件、50+微信/qq群，并且被阿里小程序工具内置（详见），开发者可以放心选择。

这是uni-app官网的介绍：https://uniapp.dcloud.io/ 有兴趣的朋友可以去仔细研究，这里就不多说了，简而言之，就是一套代码可以通过编译器在多个平台上使用，而且亮点是它是使用Vue.js开发所有前端应用框架，这就和我的技术栈完美对接了（我可以直接进行uni-app开发了？）事实上也并不是，毕竟从vue编译成小程序时，要考虑小程序那边是否有当前使用的所有api。

例如我最近在模仿keep写一个小型的运动demo，在一轮运动结束时，我想用 audio进行自动音乐播放，当我写完的时候，进行编译测试，小程序端报错的是：audio的play方法为undefined，于是我去查找了小程序的文档。

以这个为例就是想说，虽然技术栈基本对应，但是还是有大大小小的坑需要我们踩，但是比之前从零开始学微信小程序就方便很多了。毕竟踩坑也是对自己知识的一种积累嘛！

---

下面进入正题，uni-app的微信小程序端的实际运用：

最常见的请求方式：

// 默认方式
uni.request({
    url: 'https://www.example.com/request',
    success: (res) => {
        console.log(res.data);
    }
});

// Promise
uni.request({
        url: 'https://www.example.com/request'
    })
    .then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
        var [error, res]  = data;
        console.log(res.data);
    })

// Await
function async request () {
    var [error, res] = await uni.request({
        url: 'https://www.example.com/request'
    });
    console.log(res.data);
}

常见的配置：Page.js内和小程序一样的写法，需要注意的是 icon 需要小于40kb

{
    "pages": [{
        "path": "pages/component/index",
        "style": {
            "navigationBarTitleText": "组件"
        }
    }, {
        "path": "pages/API/index",
        "style": {
            "navigationBarTitleText": "接口"
        }
    }, {
        "path": "pages/component/view/index",
        "style": {
            "navigationBarTitleText": "view"
        }
    }],
    "condition": { //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式（list 的索引项）
        "list": [{
            "name": "test", //模式名称
            "path": "pages/component/view/index" //启动页面，必选
        }]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "演示",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "usingComponents":{
            "collapse-tree-item":"/components/collapse-tree-item"
        }
    },
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "10px",
        "iconWidth": "24px",
        "list": [{
            "pagePath": "pages/component/index",
            "iconPath": "static/image/icon_component.png",
            "selectedIconPath": "static/image/icon_component_HL.png",
            "text": "组件"
        }, {
            "pagePath": "pages/API/index",
            "iconPath": "static/image/icon_API.png",
            "selectedIconPath": "static/image/icon_API_HL.png",
            "text": "接口"
        }],
        "midButton": {
            "width": "80px",
            "height": "50px",
            "text": "文字",
            "iconPath": "static/image/midButton_iconPath.png",
            "iconWidth": "24px",
            "backgroundImage": "static/image/midButton_backgroundImage.png"
        }
    }
}

在manifest.js中进行配置，主要是小程序AppleID

对于如何让编译器运行到微信小程序这里就不再多赘述了，按照这个就行了：https://jingyan.baidu.com/article/f0e83a2558580022e591018b.html

总结：

基本上只要有vue的技术栈，稍微看一下uni-app的文档就可以进行简单的demo开发了，把踩坑的过程当作成长和经验的积累继续走下去吧！～