1、HbuilderX下載 V
https://www.onlinedown.net/soft/1217175.htm
2、項目創建 V
http://www.lxweimin.com/p/a2f57d00ae60
3、運行 V
https://blog.csdn.net/hzh2031015/article/details/116945881
4、uview引入 V
http://www.lxweimin.com/p/d2900005b32a
5、注意事項 *
http://www.lxweimin.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判斷）
http://www.lxweimin.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
http://www.lxweimin.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
