从零开始用uniapp搭建一个APP

从零开始用uniapp搭建一个APP

做一个项目就像玩积木一样，项目中用到的东西就好像积木块，你所要做的就是把这些小木块拼成你想要的形状。

目录

从零开始用uniapp搭建一个APP

---

需要做一个安卓的app，之前一直在写前端所以考虑到用uniapp来做。完成之后做一个记录算是学习总结。

做任何事情最难的还是第一步，只要迈出第一步其他的就简单了。直接开始

One

用uniapp开发，最好还是使用 HBuilderX 开发工具比较好。

1. 创建项目简单 自带有uniapp模板，可以根据自己需要来选择合适的模板

2. 运行调试简单 可以直接选择在浏览器运行或是运行到手机或模拟器

3. 打包发布简单 用HBuilderX一键云打包

Two

项目创建完成之后自然是开始配置了，前期准备工作做得好，后期开始做项目的时候会省不少事。

主要配置接口文件和manifest.json文件

在根目录创建api、common文件夹，如果有用到vuex再创建一个store文件夹。

common文件夹下创建config.js文件

let url_config = ""

if(process.env.NODE_ENV === 'development'){
    // 开发环境 配置ip地址端口号
     url_config = 'http://~~~~~:8080'
}else{
    // 生产环境
    url_config = 'http://~~~~~~:8080'
}

export default url_config

common文件夹下创建request.js文件

import urlConfig from './config.js'

const request = {}
const headers = {}


request.allRequest = (url, method, data, power) => {
	/*权限判断 因为有的接口请求头可能需要添加的参数不一样，所以这里做了区分
    1 == 需要token校验的接口
    2 == 文件下载接口列表
    3 == 验证码登录 
	4 == 不通过token校验接口login接口 */
	

    /*
        登录成功之后把后端返回的token在本地缓存中存储一下，
        请求接口的时候拿到token，在需要token验证的请求头携带
    */
	let token = uni.getStorageSync('is_ok');
        
    switch (power){
        case 1:
            headers['token'] = token;
            break;
        case 2:
            headers['Authorization'] = 'download'
            break;
        case 3:
            responseType = 'blob'
            break;
		case 4:
			headers['Authorization'] = `login_success`;
			break;
        default:
            headers['Authorization'] = `other`;
            break;
    }
        
    return uni.request({
        url: urlConfig + url,
        method,
        data: data,
        dataType: 'json',
        header: headers
    }).then(res => {
        if (res[1].statusCode == 200 && res[1].data.code == 1) {
            return res[1]
        } else {
            throw res[1].data
        }
    }).catch(parmas => {
　　　　　　switch (parmas.code) {
　　　　　　　	case 400:
　　　　　　　　　　  uni.clearStorageSync();
					uni.showModal({
						title:'提示',
						content:"身份验证失败，请重新登录！",
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								uni.reLaunch({
								    url: '/pages/login/login'
								});
							}
						}
					})
　　　　　　　　　　  break
　　　　　　　　default:
　　　　　　　　　　uni.showToast({
　　　　　　　　　　　　title: parmas.message,
　　　　　　　　　　　　icon: 'none'
　　　　　　　　　　})
　　　　　　　　　　return Promise.reject()
　　　　　　　　　　break
　　　　　　}
　　})
 } 
 export default request

api文件夹下创建index.js用来统一存放接口

import request from '@/common/request.js'

const api = {}
// POST、GET //必须大写，为了兼容其他应用

// 登陆（不需要token验证）
api.login = params => request.allRequest(`/app/~/login`, 'POST', params, 4);

// 退出登录
api.logout = params => request.allRequest(`/app/~/logout`, 'POST', params, 1);

// 只传一个ID
api.needId = id => request.allRequest(`/app/~/` + id, 'POST', '', 1);

// GET请求
api.requestGET = id => request.allRequest(`/app/~/` + id, 'GET', '', 1);

export default	api

Three

配置完成之后剩下的就是基本工作了，uniapp有一个UI框架 uni-ui,项目界面中需要的界面可以可以直接用，也可以从插件市场直接导入需要的插件到项目中。

 

Four

打包下载APK，over。