一、下载安装 HbuilderX
image.png
二、环境准备
1.可以选择配置自己习惯的使用环境
图片1.png
2.安装插件包，工具-插件安装
---安装scss/sass编译
---安装npm
图片2.png
三、uni-app开发介绍
1.目录结构
图片3.png
2.页面配置、生命周期
① pages.json配置 ---
https://uniapp.dcloud.io/collocation/pages?id=pages
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "页面顶部显示导航",
"enablePullDownRefresh": "值为true/false，配置是否开启下拉刷新功能",
}
}
注：开启下拉刷新需要在 pages.json做相应的配置
图片4.png
图片5.png
四、项目准备
Git地址：http://git.aylsonclub.com/aihama/uniapp-oa-wap.git
五、页面代码
页面或组件由三部分组成
<template> ---xml代码，类似html代码
<scrpit> ---js代码
<style> --样式代码
Script代码中都需要导出一个 响应对象
里面主要包含有
（1）Props组件传入的参数对象数据
（2）Data 一般用于储存页面对应绑定的数据
（3）Methods 主要放置自定义函数方法
ddd.png
六、常用语法
示例数据
export default {
data() {
return {
mobile: '1234',
password: '123',
datas: [{
text: 'xxxxxx'
}, {
text: 'xxxxxx'
}, {
text: 'xxxxxx'
}],
objects: {
a: 1,
b: 2,
c: 3
}
}
},
methods: {
submit: () => {
console.log('-----------提交')
}
}
}
1.集合遍历 v-for
<view>
<text v-for="(item,index) in datas">{{item.text}}</text>
</view>
2.集合遍历 map
<view>
<text v-for="(val,key) in objs">{{val}} {{key}}</text>
</view>
2.v-if 判断语句
<view>
<text v-for="(item,index) in datas" v-if="index==0">{{item.text}}</text>
</view>
3.:class 处理
<view>
<text v-for="(item,index) in datas" :class="index==0?'text-red':''">{{item.text}}</text>
</view>
4.事件绑定，在移动端使用tap触摸事件一般不使用click
<template>
<view class="padding flex flex-direction">
<button class="cu-btn bg-blue margin-tb-sm lg" @tap="submit">提交</button>
</view>
</template>
<script>
export default {
data() {return{}},
methods: {
submit: () => {
console.log('-----------提交')
}
}
}
</script>
4.表单提交
// xml代码
<template>
<form @submit="formSubmitConfirm">
<view class="cu-form-group margin-top">
<view class="title">手机号</view>
<input placeholder="手机号" name="mobile" :value="mobile"></input>
</view>
<view class="cu-form-group">
<view class="title">密码</view>
<input placeholder="密码" name="password" :value="password"></input>
</view>
<view class="padding flex flex-direction">
<button formType="submit" class="cu-btn bg-blue margin-tb-sm lg" @tap="submit">提交</button>
</view>
</form>
</template>
//js代码
<script>
export default {
data() {
return {
mobile: '15986391019',
password: '123456'
}
},
methods: {
formSubmitConfirm: (e) => {
//--------------提交数据逻辑-------
//获取表单数据对象
let formData = e.detail.value
console.log(formData.mobile) //15986391019
console.log(formData.password) //123456
let params = {
mobile: formData.mobile,
password: formData.password
}
http.login({}).then(res => {
//请求成功回调
})
}
}
}
</script>
七、数据请求
let params = {
Code: 'xxx',
Password: 'pwd'
};
http.login(params).then(res => {
uni.hideLoading();
if (res.statusCode !== 200) return;
if (res.data.code === "ok") {
setCurLoginPage();
uni.showToast({
title: "登录成功444"
});
// 储存用户信息到缓存
let adminWapUserInfo = res.data.data;
uni.setStorageSync("adminWapUserInfo", adminWapUserInfo);
// #ifdef APP-PLUS
this.updateDeviceInfo(adminWapUserInfo);
// #endif
// 跳转到首页
uni.switchTab({
url: "/pages/home/home"
});
} else {
uni.showModal({
content: res.data.msg
});
}
});
多个请求同时处理
let promise1 = new Promise((resolve, reject) => {
http.getList1({id:'xxx'}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
let promise2 = new Promise((resolve, reject) => {
http.getList2({id:'xxx'}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
Promise.all([promise1, promise2]).then(args => {
//请求成功逻辑，请求回来的数据在 args 数组中
}).catch(err=>{
//请求失败报错逻辑
})
七、消息弹窗
官网参考https://uniapp.dcloud.io/api/ui/prompt?id=showmodal
效果参考
uni.showToast({
title:'消息提示框'
})
image.png
uni.showLoading({
title:'加载中'
})
image.png
类似于标准 html 的消息框：alert、confirm。
uni.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
image.png
七、常用方法
页面路由跳转：https://uniapp.dcloud.io/api/router?id=navigateto
理解uniapp页面跳转-页面栈：https://uniapp.dcloud.io/frame?id=%e9%a1%b5%e9%9d%a2%e6%a0%88
主页面tabBar 切换：https://uniapp.dcloud.io/api/router?id=switchtab
常用组件：https://uniapp.dcloud.io/component/README
组件实际显示效果可新建项目--uni-app--Hello uni-app 项目运行查看效果
Hello uni-app
网友评论