uniapp开发APP从开发到上架的全过程(一)(uniAPP开发app流程)
在前端，我被一个朋友叫去帮他开发一个APP。综合考虑后，我没有 不去原生地，我用的是uniapp，一套技术栈，开发的。
Uniapp是dcloud推出的跨端前端解决方案，可以通过一组代码生成小程序、Android、IOS、H5等代码，是中小型项目的绝对有效武器。
技术架构
前端采用uniapp。后端使用Thinkphp作为后端管理和接口，使用开源的后端管理系统
开发
uniapp的开发比较简单。开发过Vu:// uni . xxxx就可以直接用了因为它的底层是基于Vue的，所以开发模式也是数据。在Dcloud(HBuild
项目目录结构
Pag
页面构成
uniapp的每个页面结构分为三个部分。第一部分是模板标签包含的页面标签，模板标签是HTML中的标签元素。区别在于普通HTML中使用的是div标签，而uni中使用的是view标签。请注意，模板下只能包含一个视图标签，所有其他标签都包含在该标签下。第二部分是脚本中包含的JS代码。JS中的代码使用导出默认对象导出，内部结构为Vue。的数据结构，包括data()，methods()和一些uni生命周期函数。
第三部分是style标签包装的css代码，和HTML的css代码一模一样。
模板
视角
/查看
/模板
脚本
导出默认值{
data() {
返回{
}
},
m: {
}
}
/脚本
风格
/风格
所有用
页面配置
uni写的页面都需要在page.json注册未注册的页面可以 不被跳过和显示。只需在页面数组中配置页面参数，还可以在每个页面的对象下配置样式对象，定义页面的标题栏等信息。
可以通过配置globalStyle对象来配置应用程序的全局一致性参数。具体配置项目请参考uniapp官方文档(uni-app官网)。
另外，APP的TAB可以通过配置tabBar对象自动生成。
APP。VUE
APP.vue是所有项目的主入口，APP初始启动时会在这里调用onLaunch，app初始化的一些相关操作都可以在这里完成。
脚本
导出默认值{
onLaunch:函数(){
console . log( ;App onLaunch )
},
onShow:函数(){
consol:函数(){
console . log( ;应用隐藏 )
}
}
/脚本
同样，在这个页面上编写的css也可以在所有页面上运行。你可以在这里放一些全局的css，比如主题颜色。
APP设置
manif要求封装
必须能够显示各种数据，显示数据需要通过对接后端API来进行。为了便于开发和后台保护，您可以需求被单独打包到一个文件中进行统一处理。在项目的根目录下创建一个公共文件夹，并创建一个新的http.js文件。如果要在uni中调用外部Js，需要使用export default导出方法，所以最后用http.js写的函数也要通过export default {variable name}的情况导出。
Uni提供了一个需要数据的API，uni . request(uni . request(object)| uni-app官网(dcloud.net.cn))封装了基于这个API的需求，方便调用接口时使用。
const bas;；
/*封装ajax函数
* @param {string}opt.type http连接方法，包括POST和GET。
* @param {string}opt.url发送请求的url。
* @ param {Boolean}将选择。异步就是异步？真为异步，假为同步。
opt.data以对象类型的形式发送的* @ param {object}参数。
* @ param {function} opt。succ: "应用程序/JSON ",
内容类型 : ;应用/JSON；charset = utf ϋ;，//appheader标头
// ;内容类型 : ;应用程序/x-www-form-urlencoded ;，//H5标头。
//;ACC: ` $ { token } `，
};
}
const ajax = function(opt) {
uni.showLoading({
///titl: "已提交 "
})
opt = opt | | { }；
opt.method = (opt.method opt . method . toupper case())| | ;邮政和邮政。;；
opt . URL = base URL 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.r:光学方法，
dataTyp: ;json ,
url:选项网址，
data:光学数据，
h: get header()，
succ:(RES)= {
uni.hideLoading()
// console.log(res)
if(res.data.code == 200) {
opt . success(RES . data)；
}否则{
uni.showToast({
title : RES . data . message，
icon:(RES)= {
uni.hideLoading()
consol:res.data？RES . data . message : ;网络连接失败。;,
icon:(RES)= {
uni.hideLoading()
opt . complete(RES)；
},
})
}为了统一管理，我会所有后端API路径也放在这里。
const bindAjax = function(data，succ: ;XXX/XXX ;,
m: ;邮政和邮政。;,
data:数据，
succ:函数(res) {
if (res.cod:(e) = {
失败(e)
}
})
}
然后公开我们通过erxport定义的方法名。
导出默认值{
ajax，
bindAjax
}最后，如果要在页面中调用，需要在main.js中创建一个全局变量
从导入http ;。/common/http . js ;；
vu:1，
b:2
}(e) = {
//成功后返回数据
console.log(e)
}，(e) = {
//请求失败
})
请点击此处查看完整文件(1条消息)。uniapp统一要求封装-Javascript文档类资源-CSDN库。
插件援用
uniapp的另一个好处是插件足够多，可以让开发者避免重复制作轮子，开发者可以直接使用经常使用的插件，大大节省了开发时间和成本。访问Dcloud插件市场(Dcloud plug-in mark测试。敬请期待！
文章来源：丸子建站
文章标题：uniapp开发APP从开发到上架的全过程(一)(uniAPP开发app流程)
https://www.wanzijz.com/view/874.html
