uniapp开发APP从开发到上架全过程（一）

第二部分是script包括的JS代码，使用export default 对象将JS中的代码导出，内部结构则是Vue的数据结构，包含了data(),methods()等方法和一些uni的生命周期函数。

第三部分则是style标签包裹的css代码，与HTML的css代码如出一辙。

<template>
    <view>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>

</style>

页面配置

uni中编写的所有页面都需要在page.json中进行注册，未注册的页面则无法进行跳转和显示，在page数组中配置页面参数即可，也可以每个页面的对象下边配置style对象来定义页面的标题栏等信息

通过配置globalStyle对象可以实现APP全局相关参数的配置，具体配置项可以参考uniapp官方文档(uni-app官网)

另外也可以通过配置tabBar对象来实现自动生成APP的标签TAB

APP.VUE

app.vue是整个项目的主入口，在此处的onLaunch在APP初启动的时候会进行调用，可以在此处做一些APP初始化的相关操作

<script>
    export default {
        onLaunch: function() {
            console.log('App onLaunch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

同样，在此页面编写的css也会对所有页面起作用，可以将一些全局的css放在此处，如主题色之类。

APP设置

manifest.json是整个项目的设置文件，涵盖了项目的AppId、应用名称、版本以及APP、小程序的相关设置，通过Hbuilder编辑器可以以可视化的方式对项目进行设置，也可以通过源码视图来对项目进行设置

请求封装

作为一款可以上线运营的APP，必然是要可以展示各类数据的，而展示数据就需要对接后端API来进行，为了方便开发和后边维护，可以将请求单独封装为一个文件来进行统一处理。

在项目根目录创建common文件夹，新建http.js文件，在uni中想要引用外部Js，同样需要使用export default 将方法导出，因此http.js中最后编写完的函数也要通过 export default { 变量名称 }的形式进行导出。

uni提供了一个请求数据的API,uni.request (uni.request(OBJECT) | uni-app官网 (dcloud.net.cn))我们基于此API对请求进行封装，方便在调用接口的时候进行使用。

const baseUrl = 'https://www.xxx.com/api/';

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */

function getHeader() { //header头部
    return {
        "Accept": "application/json",
        'Content-Type': 'application/json; charset=utf-8', // app header头
        // 　　　　'Content-Type': 'application/x-www-form-urlencoded', // h5 header头
        // 　　　　'ACCESS_TOKEN': `${token}`,
    };
}

const ajax = function(opt) {
    uni.showLoading({
        // title:"提交中"
    })
    opt = opt || {};
    opt.method = (opt.method && opt.method.toUpperCase()) || 'POST';
    opt.url = baseUrl + opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function() {};
    opt.fail = opt.fail || function() {};
    opt.complete = opt.complete || function() {};
    uni.request({
        method: opt.method,
        dataType: 'json',
        url: opt.url,
        data: opt.data,
        header: getHeader(),
        success: (res) => {
            uni.hideLoading()
            // console.log(res)
            if(res.data.code == 200) {
                opt.success(res.data);
            }else {
                uni.showToast({
                    title:res.data.message,
                    icon:"none"
                })
                opt.fail(res);
            }
            
        },
        fail: (res) => {
            uni.hideLoading()
            console.log(res)
            uni.showToast({
                title:res.data ? res.data.message : '网络连接失败',
                icon:"none"
            })
            console.log(opt)
            opt.fail(res);
        },
        complete: (res) => {
            uni.hideLoading()
            opt.complete(res);
        },
    })
}

为了统一管理，我将所有的后端API路径也都放在此处

const bindAjax = function(data,success,fail) {
    ajax({
        url: 'xxx/xxx',
        method: 'POST',
        data: data,
        success: function(res) {
            if (res.code == 200) {
                success(res.data)
            }
        },
        fail:(e) => {
            fail(e)
        }
    })
}

然后通过erxport将我们定义好的方法名暴露即可

export default {
    ajax,
    bindAjax
}

最后，想要在页面中调用，还需要在main.js中创建全局变量

import http from './common/http.js';

Vue.prototype.http = http;

这样我们就可以在页面中使用this来进行调用了

this.http.bindAjax({
    a:1,
    b:2
}(e) => {
    // 成功后返回的数据
    console.log(e)
},(e) => {
    // 请求失败
})

完整文件看这里 (1条消息) uniapp统一请求封装-Javascript文档类资源-CSDN文库

插件引用

uniapp的另一个优点就是插件足够多，这样可以避免开发者重复造轮子，对于常用的插件开发者可以直接引用，极大的节省开发时间和成本。

访问Dcloud插件市场(DCloud 插件市场)即可以搜索需要的插件，如我们需要一块类似淘宝那样的搜索插件，就可以直接搜索“搜索插件”来进行检索

找到我们需要的插件后，可以直接在插件详情页右侧选择 使用HbuilderX导入插件，就可以将插件自动导入我们的项目中

需要注意的是，要注意插件的平台兼容性，许多插件是专门为某个平台如微信小程序获安卓APP等进行设计的，那个如果我们将此插件使用到其他平台上则可能会引发兼容问题

接下来，我们就可以开始愉快的编码了~

下一篇，使用Hbuilder进行真机测试，敬请期待！