目录结构
新建界面
// 新建页面之后如果在page.json中没有对应界面的声明 请在pages里面加上
{
"path": "pages/index/index",//页面的路径
"style": {
"navigationBarTitleText": "子女APP", //顶部title
"enablePullDownRefresh": false,//是否开启下拉刷新
"app-plus": {
"titleNView": false //不使用系统顶部导航栏
}
}
},
uniApp界面中的所有div都被替代成了view
uniapp页面支持的生命周期
这里截图只有一部分 具体可以去这里查看
https://uniapp.dcloud.io/collocation/frame/lifecycle?id=page
created 在vue中可以支持 但是在uniapp上只支持onload
界面跳转跟传值
//跟小程序相似
uni.navigateTo({
url: '/pages/index/index',
success: res => {},
fail: () => {},
complete: () => {}
});
//vue
this.$router.push('/pages/index/index')
//router跳转
this.$route({
url: 'pages/index/index'
})
界面传值 (跟小程序一毛一样)
uni.navigateTo({
//也可以在url中直接传值
url:'/pages/niceServeDetail/niceServeDetail?id=666',
//接收第二个界面传过来的值
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
},
success: (res) => {
//给第二个界面传值
res.eventChannel.emit("title","titleContent")
//第二界面给第一个界面传值
eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from second page'});
eventChannel.emit('someEvent', {data: 'data from second page for someEvent'});
}
})
//在第二界面中的onload中接收
onload(option){
console.log("这里是url传过来的值->",option.id);
// #ifdef APP-NVUE
const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
// #endif
// #ifndef APP-NVUE
const eventChannel = this.getOpenerEventChannel();
// #endif
eventChannel.on("title",(res)=>{
console.log("接收到的值->",res);
})
}
弹消息(跟小程序出奇的相似)
uni.showToast({
title: 'msg',
icon:'none',
mask:false,//类似透明遮罩效果,点击穿透不了
});
使用第三方依赖
跟vue是一样的
//比如添加依赖 uni-ui
npm i uni-ui -S
网络请求
uni.request({
url:"url",
data:"请求参数",
method:"GET",
success: (e) => {
//TODO
},
fail: (e) => {
}
})
上拉刷新 下拉加载
//下拉数据刷新 需要开启 "enablePullDownRefresh": true,
//下拉监听函数
onPullDownRefresh() {
},
//触底函数 也就是上拉监听 在vue界面中的生命周期函数同级
onReachBottom() {
}
底部导航栏设置
vuex的使用 vuex官网
在uniApp中内置了vuex 我们只要配置就行
//在index文件中
// 页面路径:store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);//vue的插件机制
//Vuex.Store 构造器选项
const store = new Vuex.Store({
state:{//存放状态
"username":"foo",
"age":18
}
})
export default store
### 在main.js文件中注入
// 页面路径:main.js
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.prototype.$store = store //设置全局$store对象
// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
const app = new Vue({
store,
...App
})
app.$mount()
使用
this.$store.state.username //即可获取
vuex中多module情况下state获取
//this.$store.state.仓库的名字.prop
this.$store.state.mineStore.isLogin
获取view的高度宽度啥的
var _this = this;
uni.createSelectorQuery()
.select('#scrollView')
.boundingClientRect(data => {
console.log(data);
})
.exec();
uniApp的打包
可直接选择在线打包
或者手动使用android studio打包
强行自定义表格
//定义号每个表格得高度 加特有得几个宽度
//tdWidth: 80,
//tdWidthMax: 120,
//tdheight: 40
//动态计算有多少行确定高度 根据有多少列动态计算表格宽度
//再根据列数得动态计算可以实现简单的单元格合并
//不到万不得已 不要轻易自己动手写 尽量使用现有的三方表格实现
<view class="dis-c" :style="{ width: tdWidthMax * 3 + tdWidth * 8 + 'px' }">
<view class="dis-r border-top">
<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">时间</view>
<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">姓名</view>
<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">年龄</view>
<view class="td-title textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">电话</view>
<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">方式</view>
<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">类型</view>
<view class="td-title textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">日期</view>
<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">送人</view>
<view class="td-title textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">联系电话</view>
<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">是否完成</view>
<view class="td-title textCenter border-left border-right" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">本单收入</view>
</view>
<view class="dis-r">
<view
class="td dis-r ver-c hor-c border-left border-top"
:style="{ width: tdWidth + 'px', height: tdheight + breakfastList.length * tdheight + 'px' }"
>
</view>
<!-- 这里是合并单元格的操作 -->
<view class="dis-c" :style="{ width: tdWidthMax * 3 + tdWidth * 7 + 'px' }">
<view class="td border-left border-top border-right" :style="{ width: 'calc(100% - 2px)', height: tdheight + 'px' }">
<view class="ml10 " style="width: 100%;">
共{{ breakfastList.length }}人,其中{{ tongJiBreakfast.tangshi }}人,需配{{ tongJiBreakfast.peisong }}人, 预计共计收入{{
tongJiBreakfast.shouru
}}元
</view>
</view>
<view class="dis-r border-top border-right" v-for="item in breakfastList">
<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fName }}</view>
<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fAge }}</view>
<view class="td textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">{{ item.fContact }}</view>
<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fEatWat }}</view>
<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fServiceObjectType }}</view>
<view class="td textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">{{ item.fOrderTime }}</view>
<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fDeliveryPerson }}</view>
<view class="td textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">{{ item.fContact }}</view>
<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fOrdersTatus }}</view>
<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">
{{ item.businessPercentagePrice }}
</view>
</view>
</view>
</view>
</view>
<script>
export default {
data(){
return {
tdWidth: 80,
tdWidthMax: 120,
tdheight: 40,
breakfastList: [],
tongJiBreakfast: {
sum: 0,
tangshi: 0,
peisong: 0,
shouru: 0
},
}
}
}
</script>
<style scoped lang="scss">
$table-border-color: #ebeef5;
.td {
color: #606266;
display: flex;
justify-content: center;
align-items: center;
}
.td-title {
font-weight: bold;
color: #909399;
display: flex;
justify-content: center;
align-items: center;
}
.border-left {
border-left: 1px $table-border-color solid;
}
.border-right {
border-right: 1px $table-border-color solid;
}
.border-top {
border-top: 1px $table-border-color solid;
}
.border-bottom {
border-bottom: 1px $table-border-color solid;
}
</style>
小程序分包
主包配置
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
}
}, {
"path": "pages/secondPage/secondPage",
......
}],
子包配置
"subPackages":[
{
"root":"index",
"pages":[
{
// 26-客户角度-已发起
"path": "pages/issued",
"style": {
"navigationBarTitleText": "已发起",
"enablePullDownRefresh": false
}
},
// ......
]
},
{
"root":"secondPage",
"pages":[
//......
]
],
uniapp适配状态栏方案
注意是(状态栏)不是(标题栏)
<template>
<view :style="{ width:'100%', height: height + 'px', background: bgc }"></view>
</template>
<script>
export default {
name: 'statusBar',
props: {
bgc: {
type: String,
default: 'rgba(0,0,0,0.1)'
},
height: {
type: Number,
default: 0
}
}
};
</script>
/**
每个界面引入组件即可
高度动态使用 uni.getSystemInfoSync().statusBarHeight 赋值
颜色自定义
*/