1、HbuilderX下载 V
https://www.onlinedown.net/soft/1217175.htm
2、项目创建 V
https://www.jianshu.com/p/a2f57d00ae60
3、运行 V
https://blog.csdn.net/hzh2031015/article/details/116945881
4、uview引入 V
https://www.jianshu.com/p/d2900005b32a
5、注意事项 *
https://www.jianshu.com/p/132a3de98238
6、标签 *
https://blog.csdn.net/weixin_44770377/article/details/101266746
7、uni-app官网
https://uniapp.dcloud.io/component/image
8、uview官网
https://www.uviewui.com/layout/address.html
笔记
1、标签修改
https://blog.csdn.net/weixin_44770377/article/details/101266746
2、在 uni-app 中使用 ts 开发
3、生命周期
建议使用 uni-app 的 onReady代替 vue 的 mounted
建议使用 uni-app 的 onLoad 代替 vue 的 created（子组件用created判断）
https://www.jianshu.com/p/132a3de98238
4、image
<image src="https://wx-idso.oss-cn-beijing.aliyuncs.com/resources/notice/GrowthPC.png" mode="widthFix"></image>
mode属性
aspectFit 缩放显示图片全部
aspectFill 缩放填满容器，但是图片可能显示不全
widthFix 以宽度为基准，等比缩放长
heightFix 以高度为基准，等比缩放宽
https://blog.csdn.net/qq_42339350/article/details/118489491
5、提示框（uniapp）
- 1、uni.showToast
uni.showToast({
title: '请填写员工工号',
icon:'none',
duration: 2000
});
- 2、uni.showLoading
uni.showLoading({
title:'正在加载',
mask:true
})
- 3、uni.showModal（弹窗）
uni.showModal({
title: "操作提示",
content: "提交成功",
showCancel: false,
confirmColor: "#d15e43",
success:()=>{
console.log('点击确定')
}
})
https://blog.csdn.net/qq_36538012/article/details/107759510
https://uniapp.dcloud.io/api/ui/prompt?id=showmodal（官方文档）
6、布局适配方案（rpx、px、vw、vh）=> 微信小程序 V
- 区别：
vw和rpx用于解决以设备可视区的宽为基准的px动态换算
vh用于解决以设备可视区高的高为基准的px动态换算
- vw和vh是以百分比为单位，默认100 比如100vw为当前设备可视区宽的100%
100vw=设备可视区的宽的100%
100vh=设备可视区的高100%
https://blog.csdn.net/qq_38603437/article/details/89290019
- 了解
rpx是小程序中的尺寸单位：
a、小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此
b、1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px）
- 在不同设备上rpx与px的转换是不相同的，但是宽度的rpx却是固定的，所以可以使用rpx作为单位，来设置布局的宽高
vw、vh适配
vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用
小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh
- 在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局，但是一般情况下，百分比+rpx就已经足够使用了
.tips_img {
width: 750rpx;
text-align: center;
height: 70vh;
display: flex;
align-items: center;
justify-content: center;
image {
width: 750rpx;
}
}
https://blog.csdn.net/liyi1009365545/article/details/78542707
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html（官方rpx）
7、page（相当于body） V
/* 全局页面样式 */
page{
background: #fff !important;
}
8、findIndex(value, index, arr) 返回某个判断的值
computed: {
selectActiveIndex() {
const adminId = uni.getStorageSync("growth_adminId");
return [
this.clinicAdminList.findIndex((item) => {
return item.admin == adminId;
}),
];
},
},
https://www.runoob.com/jsref/jsref-findindex.html
https://www.cnblogs.com/kongxianghai/p/7527526.html
9、uni.$emit
本质上就是一个页面通知另一个面我发生了变化，你需要处理一下
- 监听事件（在我的页面监听事件）
uni.$on、uni.$off
事件监听是全局的，所以使用 uni.$on ，需要使用 uni.$off 移除全局的事件监听，避免重复监听
// 我的页面
onLoad(){
// 监听事件
uni.$on('login',(usnerinfo)=>{
this.usnerinfo = usnerinfo;
})
},
onUnload() {
// 移除监听事件
uni.$off('login');
},
- 触发事件（进入登陆页面，触发事件）
使用 uni.$emit 触发事件后，对应的 uni.$on 就会监听到事件触发，在回调中去执行相关的逻辑
// 登陆页面
uni.$emit('login', {
avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',
token: 'user123456',
userName: 'unier',
login: true
});
- 注意
如果页面没有打开，将不能注册监听事件 uni.$on 和 uni.$once 。
一次性的事件，直接使用 uni.$once 监听，不需要移除。
https://ask.dcloud.net.cn/article/36010
10、同步和异步
- 概念
- 同步：
同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。- 异步：
将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。
- 关系
同步和异步本身是相对的
同步就相当于是 当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。
异步就是，当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率。
- 异步的局限性
存在就有其道理 异步虽然好 但是有些问题是要用同步用来解决，比如有些东西我们需要的是拿到返回的数据在进行操作的，这些是异步所无法解决的。
https://www.cnblogs.com/sun-web/p/10967361.html
https://blog.csdn.net/qq_32930863/article/details/106153137
https://www.jianshu.com/p/4dc9288d1657
11、uni-simple-router（uni-app的router方案）V
- 安装
npm install uni-simple-router
npm install uni-read-pages
- vue.config.js（获取pages.json中的路由，定义
ROUTES）
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
ROUTES: webpack.DefinePlugin.runtimeValue(() => {
const tfPages = new TransformPages({
includes: ['path', 'name', 'aliasPath'] // 可定义配置项
});
return JSON.stringify(tfPages.routes)
}, true )
})
]
}
}
- router/index.js
import {RouterMount,createRouter} from 'uni-simple-router';
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routes: [...ROUTES]
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
console.log('跳转结束')
})
export {
router,
RouterMount
}
- main.js
import {router, RouterMount} from './router/index.js' // 路径自定义
Vue.use(router) // 不要和别的插件合并，否则会报错
...
// 写于结尾，app定义后
// #ifdef H5
RouterMount(app, router, '#app')
// #endif
// #ifndef H5
app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif
https://hhyang.cn/v2/start/quickstart.html
- 使用
router.push() 等同于 uni.navigateTo()
router.replace() 等同于 uni.redirectTo()
router.replaceAll() 等同于 uni.reLaunch()
router.pushTab() 等同于 uni.switchTab()
router.back(n) 等同于 uni.navigateBack()
- this.Router.push
// 字符串
this.$Router.push('/pages/router/router1')
// 对象
this.$Router.push({path:'/pages/router/router1'})
// 命名的路由
this.$Router.push({ name:'router1',params:{ userId:'123'}})
// 带查询参数，变成 /router1?plan=private
this.$Router.push({ path:'router1', query:{ plan:'private'}})
- 注意：name 时传递的参数必须为 params，相反 path 必须对应 query
- this.$Router.back
// 后退 2 步记录
this.$Router.back(2)
// 如果 history 记录不够用，那就默默地失败呗
this.$Router.back(100)
https://www.bookstack.cn/read/uni-simple-router/262386a7faea5aa0.md
12、底部导航配置 V
https://blog.csdn.net/weixin_44445363/article/details/113243937
网友评论