diff --git a/App.vue b/App.vue index e7c79a75058db6be3d34e7325fdd976074a80341..baa7332ec48ee594cc44859d45ab2bea2bacf5c0 100644 --- a/App.vue +++ b/App.vue @@ -1,75 +1,114 @@ - - - diff --git a/baseapp.config.js b/baseapp.config.js index 467b0d6ef3977958f727f1b4a0a88087cc989bb7..b642c10c3fcd692ef5d47f99fca57fab63642adf 100644 --- a/baseapp.config.js +++ b/baseapp.config.js @@ -1,40 +1,39 @@ -module.exports = { - "h5":{ - "url":"https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com",// 前端网页托管的域名 - "openApp":{ // 在h5端全局悬浮引导用户下载app的功能 更多自定义要求在/common/openApp.js中修改 - "openUrl":'https://sj.qq.com/myapp/detail.htm?apkName=com.tencent.android.qqdownloader&info=6646FD239A6EBA9E2DEE5DFC7E18D867', - "appname": 'base-app', - "logo": './static/logo.png', - } - }, - "mp":{ - "weixin":{ - "id":"gh_33446d7f7a26" - } - }, - "router":{ - "needLogin":[ //配置需要路由拦截的页面地址，在打开这些页面之前会自动检查（不联网）uni_id_token的值是否存在/过期等 - "/uni_modules/uni-id-users/pages/uni-id-users/edit", - "/uni_modules/uni-news-favorite/pages/uni-news-favorite/list", - "/pages/ucenter/edit/uploadCutImageToUnicloud" - ], - "login":["univerify","smsCode","username","weixin","apple"] //默认就是短信验证码登陆 - }, - "about":{ - "appName":"base-app", - "logo":"/static/logo.png", - "company":"数字天堂（北京）网络技术有限公司", - "slogan":"为开发而生", - "agreements":[ - { - "title":"用户服务协议", - "url":"https://ask.dcloud.net.cn/protocol.html" - }, - { - "title":"隐私政策", - "url":"https://ask.dcloud.net.cn/protocol.html" - } - ], - "download":"https://m3w.cn/uniapp" - } -} \ No newline at end of file +module.exports = { + "h5": { + "url": "https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com", // 前端网页托管的域名 + "openApp": { // 在h5端全局悬浮引导用户下载app的功能 更多自定义要求在/common/openApp.js中修改 + "openUrl": 'https://sj.qq.com/myapp/detail.htm?apkName=com.tencent.android.qqdownloader&info=6646FD239A6EBA9E2DEE5DFC7E18D867', + "appname": 'base-app', + "logo": './static/logo.png', + } + }, + "mp": { + "weixin": { + "id": "gh_33446d7f7a26" + } + }, + "router": { + "needLogin": [ //配置需要路由拦截的页面地址，在打开这些页面之前会自动检查（不联网）uni_id_token的值是否存在/过期等 + "/pages/ucenter/edit/edit", + "/uni_modules/uni-news-favorite/pages/uni-news-favorite/list", + "/pages/ucenter/edit/uploadCutImageToUnicloud" + ], + "login": ["univerify", "smsCode", "username", "weixin", "apple"] //默认就是短信验证码登陆 + }, + "about": { + "appName": "base-app", + "logo": "/static/logo.png", + "company": "数字天堂（北京）网络技术有限公司", + "slogan": "为开发而生", + "agreements": [{ + "title": "用户服务协议", + "url": "https://ask.dcloud.net.cn/protocol.html" + }, + { + "title": "隐私政策", + "url": "https://ask.dcloud.net.cn/protocol.html" + } + ], + "download": "https://m3w.cn/uniapp" + } +} diff --git a/common/appInit.js b/common/appInit.js index 7b5c233889bbb512ae5c036b50827f737106a8af..ef3362fac5bccb28e7095803ac97147ea36b0229 100644 --- a/common/appInit.js +++ b/common/appInit.js @@ -31,12 +31,12 @@ export default function() { icon: 'none' }) uni.navigateTo({ - url: "/uni_modules/uni-login-page/pages/index/index" + url: "/pages/ucenter/login-page/index/index" }) return false } //控制登陆优先级 - if (url == '/uni_modules/uni-login-page/pages/index/index') { + if (url == '/pages/ucenter/login-page/index/index') { //一键登录（univerify）、密码登陆（username）、快捷登录&验证码登陆（!univerify&password） if (login[0] == 'univerify') { // console.log(e.url,url); @@ -45,7 +45,7 @@ export default function() { } e.url += "univerify_first=true" } else if (login[0] == 'username') { - e.url = "/uni_modules/uni-login-page/pages/pwd-login/pwd-login" + e.url = "/pages/ucenter/login-page/pwd-login/pwd-login" } else { //默认即是 } @@ -62,40 +62,40 @@ export default function() { uni.addInterceptor('chooseImage', { fail(e) { // 失败回调拦截 console.log(e); - if ( - e.errCode === 11 && uni.getSystemInfoSync().platform == "android" || - e.errCode === 2 && uni.getSystemInfoSync().platform == "ios" - ){ - uni.showModal({ - title:"无法访问摄像头", - content: "当前无摄像头访问权限，建议前往设置", - confirmText: "前往设置", - success(e) { - if (e.confirm) { - openAppPermissionSetting() - } - } - }); - } - if(e.errCode === 12 && uni.getSystemInfoSync().platform == "android"){ - uni.showModal({ - title:"无法访问相册", - content: "当前无系统相册访问权限，建议前往设置", - confirmText: "前往设置", - success(e) { - if (e.confirm) { - openAppPermissionSetting() - } - } - }); - } + if ( + e.errCode === 11 && uni.getSystemInfoSync().platform == "android" || + e.errCode === 2 && uni.getSystemInfoSync().platform == "ios" + ){ + uni.showModal({ + title:"无法访问摄像头", + content: "当前无摄像头访问权限，建议前往设置", + confirmText: "前往设置", + success(e) { + if (e.confirm) { + openAppPermissionSetting() + } + } + }); + } + if(e.errCode === 12 && uni.getSystemInfoSync().platform == "android"){ + uni.showModal({ + title:"无法访问相册", + content: "当前无系统相册访问权限，建议前往设置", + confirmText: "前往设置", + success(e) { + if (e.confirm) { + openAppPermissionSetting() + } + } + }); + } } - }) - -// #ifdef APP-PLUS + }) + +// #ifdef APP-PLUS // 设备网络状态变化事件 - eventListenerNetwork() -// #endif + eventListenerNetwork() +// #endif } /** @@ -132,83 +132,85 @@ function initAppVersion() { // 设备网络状态变化事件 function eventListenerNetwork() { - //网络掉线 - uni.getNetworkType({ - success:res=>{ - console.log(res); - if(res.networkType=='none'){ - showNetworkErrPage() - } - uni.showToast({ - title:'当前网络类型：'+res.networkType, - icon:'none', - duration:3000 - }) - } - }); - //监听网络变化 - uni.onNetworkStatusChange(res=> { - console.log(res.isConnected); - console.log(res.networkType); - if(res.networkType!='none'){ - uni.showToast({ - title:'当前网络类型：'+res.networkType, - icon:'none', - duration:3000 - }) - }else{ - showNetworkErrPage() - uni.showToast({ - title:'网络类型：'+res.networkType, - icon:'none', - duration:3000 - }) - } - }); - - function showNetworkErrPage(){ - let pages = getCurrentPages(); - console.log('pages.length',pages.length); - if(pages.length===0|| pages[pages.length - 1].route!='/pages/networkErr/networkErr.vue'){ - uni.navigateTo({ - url:'/pages/networkErr/networkErr' - }) - }else{ - console.log('已经打开'); - } - } +/* + //网络掉线 + uni.getNetworkType({ + success:res=>{ + console.log(res); + if(res.networkType=='none'){ + showNetworkErrPage() + } + uni.showToast({ + title:'当前网络类型：'+res.networkType, + icon:'none', + duration:3000 + }) + } + }); + //监听网络变化 + uni.onNetworkStatusChange(res=> { + console.log(res.isConnected); + console.log(res.networkType); + if(res.networkType!='none'){ + uni.showToast({ + title:'当前网络类型：'+res.networkType, + icon:'none', + duration:3000 + }) + }else{ + showNetworkErrPage() + uni.showToast({ + title:'网络类型：'+res.networkType, + icon:'none', + duration:3000 + }) + } + }); + + function showNetworkErrPage(){ + let pages = getCurrentPages(); + console.log('pages.length',pages.length); + if(pages.length===0 || pages[pages.length - 1].route!='/pages/networkErr/networkErr.vue'){ + uni.navigateTo({ + url:'/pages/networkErr/networkErr' + }) + }else{ + console.log('已经打开'); + } + } -} - -function openAppPermissionSetting(){ - // 跳转到**应用**的权限页面 - if (uni.getSystemInfoSync().platform == "ios") { - var UIApplication = plus.ios.import("UIApplication"); - var application2 = UIApplication.sharedApplication(); - var NSURL2 = plus.ios.import("NSURL"); - // var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES"); - var setting2 = NSURL2.URLWithString("app-settings:"); - application2.openURL(setting2); - plus.ios.deleteObject(setting2); - plus.ios.deleteObject(NSURL2); - plus.ios.deleteObject(application2); - } else { - // console.log(plus.device.vendor); - var Intent = plus.android.importClass("android.content.Intent"); - var Settings = plus.android.importClass("android.provider.Settings"); - var Uri = plus.android.importClass("android.net.Uri"); - var mainActivity = plus.android.runtimeMainActivity(); - var intent = new Intent(); - intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS); - var uri = Uri.fromParts("package", mainActivity.getPackageName(), null); - intent.setData(uri); - mainActivity.startActivity(intent); - } -} -/* +} + +function openAppPermissionSetting(){ + // 跳转到**应用**的权限页面 + if (uni.getSystemInfoSync().platform == "ios") { + var UIApplication = plus.ios.import("UIApplication"); + var application2 = UIApplication.sharedApplication(); + var NSURL2 = plus.ios.import("NSURL"); + // var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES"); + var setting2 = NSURL2.URLWithString("app-settings:"); + application2.openURL(setting2); + plus.ios.deleteObject(setting2); + plus.ios.deleteObject(NSURL2); + plus.ios.deleteObject(application2); + } else { + // console.log(plus.device.vendor); + var Intent = plus.android.importClass("android.content.Intent"); + var Settings = plus.android.importClass("android.provider.Settings"); + var Uri = plus.android.importClass("android.net.Uri"); + var mainActivity = plus.android.runtimeMainActivity(); + var intent = new Intent(); + intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS); + var uri = Uri.fromParts("package", mainActivity.getPackageName(), null); + intent.setData(uri); + mainActivity.startActivity(intent); + } +*/ +} +/* uni.addInterceptor(item, { - invoke(e) { // 调用前拦截 - }, + invoke(e) { // 调用前拦截 + }, success() { // 成功回调拦截 }, fail(err) { // 失败回调拦截 @@ -219,5 +221,5 @@ function openAppPermissionSetting(){ }, returnValue() { // 返回结果拦截 } - }) // 移除拦截器API removeInterceptor('request') + }) // 移除拦截器API removeInterceptor('request') */ \ No newline at end of file diff --git a/uni_modules/uni-login-page/components/auth-btn/auth-btn.vue b/components/auth-btn/auth-btn.vue similarity index 100% rename from uni_modules/uni-login-page/components/auth-btn/auth-btn.vue rename to components/auth-btn/auth-btn.vue diff --git a/uni_modules/uni-login-page/components/login-action-sheet/login-action-sheet.vue b/components/login-action-sheet/login-action-sheet.vue similarity index 100% rename from uni_modules/uni-login-page/components/login-action-sheet/login-action-sheet.vue rename to components/login-action-sheet/login-action-sheet.vue diff --git a/uni_modules/uni-login-page/components/login-ikonw/login-ikonw.vue b/components/login-ikonw/login-ikonw.vue similarity index 100% rename from uni_modules/uni-login-page/components/login-ikonw/login-ikonw.vue rename to components/login-ikonw/login-ikonw.vue diff --git a/uni_modules/uni-login-page/components/login-short-code/login-short-code.vue b/components/login-short-code/login-short-code.vue similarity index 100% rename from uni_modules/uni-login-page/components/login-short-code/login-short-code.vue rename to components/login-short-code/login-short-code.vue diff --git a/components/uni-quick-login/uni-quick-login.vue b/components/uni-quick-login/uni-quick-login.vue new file mode 100644 index 0000000000000000000000000000000000000000..077a8df41ed09212d2793e068196b16624098b1d --- /dev/null +++ b/components/uni-quick-login/uni-quick-login.vue @@ -0,0 +1,273 @@ + + + + diff --git a/js_sdk/request.js b/js_sdk/request.js index 003edb5aec9a3d80bd4d29c07d278ff26b16ab32..74fe3e60cbb259f26587a7cd4666e3045a1cb755 100644 --- a/js_sdk/request.js +++ b/js_sdk/request.js @@ -20,20 +20,20 @@ export default function request(name,params,callback=false,{showLoading=false,lo return new Promise((resolve,reject)=>{ uniCloud.callFunction({name,data:{action,params}, success(e){ - // console.log(e); + console.log(e); const {result:{data,code}} = e console.log(data,code); - if (code === 0 ) { - resolve(e) - return callback(data,e.result,e) - } - if(debug){ - uni.showModal({ - content: JSON.stringify(e), - showCancel: false, - confirmText: '知道了' - }) + if (code != 0 ) { + if(debug){ + uni.showModal({ + content: JSON.stringify(e), + showCancel: false, + confirmText: '知道了' + }) + } } + resolve(e) + return callback(data,e.result,e) }, fail(err){ reject(err) diff --git a/pages.json b/pages.json index 4cfd79f14d8e55498649631394bd8bc37387c422..f93fd4b1abec2c701135ce9f37bbf63a3e8e08ef 100644 --- a/pages.json +++ b/pages.json @@ -7,30 +7,16 @@ //#endif "enablePullDownRefresh": true } - }, - // #ifdef APP-PLUS - { - "path": "pages/networkErr/networkErr", - "style": { - "navigationStyle": "custom", - "backgroundColor": "transparent", - "app-plus": { - "animationType": "fade-in", - "background": "transparent", - "popGesture": "none" - } - } - }, - // #endif - { - "path": "pages/list/news-list", - "style": { - //#ifndef MP - "navigationStyle": "custom", - //#endif - "enablePullDownRefresh": true - } - }, + }, + { + "path": "pages/list/news-list", + "style": { + //#ifndef MP + "navigationStyle": "custom", + //#endif + "enablePullDownRefresh": true + } + }, { "path": "pages/grid/grid", "style": { @@ -39,7 +25,7 @@ //#endif } }, { - "path": "uni_modules/uni-login-page/pages/index/index", + "path": "pages/ucenter/login-page/index/index", "style": { "navigationBarTitleText": "", "app-plus": { @@ -73,13 +59,18 @@ }, "navigationBarTitleText": "文章详情" } - }, { - "path": "pages/ucenter/ucenter", + "path": "pages/ucenter/edit/bind-mobile/bind-mobile", "style": { "navigationStyle": "custom" } - }, { + }, + { + "path": "pages/ucenter/ucenter", + "style": { + "navigationStyle": "custom" + } + },{ "path": "uni_modules/uni-feedback/pages/opendb-feedback/list", "style": { "navigationBarTitleText": "常见问题" @@ -144,10 +135,10 @@ } } }, { - "path": "uni_modules/uni-agree/pages/uni-agree/uni-agree", - "style": { - "navigationStyle": "custom", - "app-plus":{"popGesture": "none"} + "path": "uni_modules/uni-agree/pages/uni-agree/uni-agree", + "style": { + "navigationStyle": "custom", + "app-plus":{"popGesture": "none"} } }, { "path": "pages/ucenter/settings/settings", @@ -156,9 +147,9 @@ } }, { - "path": "uni_modules/uni-id-users/pages/uni-id-users/edit", + "path": "pages/ucenter/edit/edit", "style": { - "navigationBarTitleText": "编辑资料" + "navigationBarTitleText": "个人资料" } }, { "path": "pages/ucenter/edit/uploadCutImageToUnicloud", @@ -166,17 +157,17 @@ "navigationStyle": "custom" } }, { - "path": "uni_modules/uni-login-page/pages/pwd-login/pwd-login", + "path": "pages/ucenter/login-page/pwd-login/pwd-login", "style": { "navigationBarTitleText": "" } }, { - "path": "uni_modules/uni-login-page/pages/pwd-retrieve/pwd-retrieve", + "path": "pages/ucenter/login-page/pwd-retrieve/pwd-retrieve", "style": { "navigationBarTitleText": "" } }, { - "path": "uni_modules/uni-login-page/pages/phone-code/phone-code", + "path": "pages/ucenter/login-page/phone-code/phone-code", "style": { "navigationBarTitleText": "" } @@ -196,19 +187,19 @@ } }, { - "path": "uni_modules/uni-login-page/pages/register/register", + "path": "pages/ucenter/login-page/register/register", "style": { "navigationBarTitleText": "注册", "enablePullDownRefresh": false } - }, - { - "path":"uni_modules/uni-news-favorite/pages/uni-news-favorite/list", - "style":{ - "navigationBarTitleText": "阅读记录", - "enablePullDownRefresh": false - } + }, + { + "path":"uni_modules/uni-news-favorite/pages/uni-news-favorite/list", + "style":{ + "navigationBarTitleText": "阅读记录", + "enablePullDownRefresh": false + } } ], "globalStyle": { @@ -222,7 +213,7 @@ "path": "pages/list/list" }, { - "path": "uni_modules/uni-login-page/pages/index/index" + "path": "pages/ucenter/login-page/index/index" }, { "path": "pages/test/test" @@ -255,4 +246,4 @@ "text": "我的" }] } -} +} diff --git a/pages/list/detail.vue b/pages/list/detail.vue index 722315c288846a6aeb508679e722d71d00ce88b7..f0b12e48451efa4f29b44c981d3db6bea1f64039 100644 --- a/pages/list/detail.vue +++ b/pages/list/detail.vue @@ -53,7 +53,7 @@ import uParse from '@/components/u-parse/parse.vue'; const db = uniCloud.database(); - const dbCollectionName = 'opendb-news-favorite'; + const newsFavoriteTable = db.collection('opendb-news-favorite') import { mapGetters } from 'vuex'; export default { components: { @@ -80,7 +80,8 @@ return `_id =="${this.id}"` }, ...mapGetters({ - 'userInfo':'user/info' + 'userInfo':'user/info', + 'hasLogin':'user/hasLogin' }) }, onLoad(event) { @@ -114,8 +115,8 @@ }, methods: { setFavorite(){ - if(!this.userInfo)return - db.collection(dbCollectionName).where({ + if(!this.has)return + newsFavoriteTable.where({ article_id:this.id, user_id:this.userInfo._id }) @@ -128,9 +129,9 @@ update_date:Date.now() } if(res.result.data.length == 0){ - return db.collection(dbCollectionName).add(value) + return newsFavoriteTable.add(value) } else { - return db.collection(dbCollectionName).where({ + return newsFavoriteTable.where({ article_id:this.id, user_id:this.userInfo._id }) diff --git a/pages/networkErr/networkErr.vue b/pages/networkErr/networkErr.vue deleted file mode 100644 index 6c594f52bd018a6a7f8932af36d253a43b14c879..0000000000000000000000000000000000000000 --- a/pages/networkErr/networkErr.vue +++ /dev/null @@ -1,68 +0,0 @@ - - - - - diff --git a/pages/test/test.vue b/pages/test/test.vue index 83eb34dc29fd45630bf0efd7136b72f557cddfc8..355faab5b4a7c242ef792a525a5cf5dc96520fbe 100644 --- a/pages/test/test.vue +++ b/pages/test/test.vue @@ -8,22 +8,26 @@ 应用相关权限 --> - + + - + + diff --git a/pages/ucenter/edit/edit.vue b/pages/ucenter/edit/edit.vue new file mode 100644 index 0000000000000000000000000000000000000000..fbc18fd0aec798cefd8105c27b429e232476d4ae --- /dev/null +++ b/pages/ucenter/edit/edit.vue @@ -0,0 +1,195 @@ + + + diff --git a/uni_modules/uni-login-page/common/loginPage.css b/pages/ucenter/login-page/common/loginPage.css similarity index 94% rename from uni_modules/uni-login-page/common/loginPage.css rename to pages/ucenter/login-page/common/loginPage.css index 21fc2bbd4e781daf4ca68e5238005ba4619a35f2..bf95a2ff1d3e3cd7479930a0bcbd6212fa86f481 100644 --- a/uni_modules/uni-login-page/common/loginPage.css +++ b/pages/ucenter/login-page/common/loginPage.css @@ -5,7 +5,6 @@ page { flex: 1; height: 100%; } - /* #endif */ .wrap { /* #ifndef APP-NVUE */ diff --git a/uni_modules/uni-login-page/common/loginPage.mixin.js b/pages/ucenter/login-page/common/loginPage.mixin.js similarity index 100% rename from uni_modules/uni-login-page/common/loginPage.mixin.js rename to pages/ucenter/login-page/common/loginPage.mixin.js diff --git a/uni_modules/uni-login-page/common/loginSuccess.js b/pages/ucenter/login-page/common/loginSuccess.js similarity index 100% rename from uni_modules/uni-login-page/common/loginSuccess.js rename to pages/ucenter/login-page/common/loginSuccess.js diff --git a/uni_modules/uni-login-page/pages/index/index.vue b/pages/ucenter/login-page/index/index.vue similarity index 94% rename from uni_modules/uni-login-page/pages/index/index.vue rename to pages/ucenter/login-page/index/index.vue index 0ecb84ba7adeef8be74d1932af27214d7c4f0b30..46860591632117d323fdb1cbed8ebca42739b01a 100644 --- a/uni_modules/uni-login-page/pages/index/index.vue +++ b/pages/ucenter/login-page/index/index.vue @@ -41,7 +41,7 @@ + diff --git a/pages/ucenter/ucenter.vue b/pages/ucenter/ucenter.vue index dfca1dbd12370778c4cd61ff4994708797e741e8..f15a88d288b4dbc5c43a8b138cf2ee451276f23c 100644 --- a/pages/ucenter/ucenter.vue +++ b/pages/ucenter/ucenter.vue @@ -1,9 +1,9 @@ @@ -83,16 +83,17 @@ }, { title: '设置', to: '/pages/ucenter/settings/settings' - }, { + }], + [{ title: '关于', to: '/pages/ucenter/about/about' }] ] } }, - onLoad() { + onLoad() { //#ifdef APP-PLUS - this.ucenterList[this.ucenterList.length - 1].unshift({ + this.ucenterList[this.ucenterList.length - 2].unshift({ title: '检查更新', rightText: this.appVersion.version + '-' + this.appVersion.versionCode, event: 'checkVersion', @@ -106,14 +107,15 @@ login: 'user/hasLogin' }) // #ifdef APP-PLUS - ,appVersion() { + , + appVersion() { return getApp().appVersion } // #endif }, - methods: { - ...mapMutations({ - setUserInfo: 'user/login' + methods: { + ...mapMutations({ + setUserInfo: 'user/login' }), toSettings() { uni.navigateTo({ @@ -129,64 +131,20 @@ } }, async checkVersion() { - let res = await callCheckVersion() - console.log(res); - if(res.result.code == 0){ - uni.showToast({ - title: res.result.message, - icon: 'none' - }); + let res = await callCheckVersion() + console.log(res); + if (res.result.code == 0) { + uni.showToast({ + title: res.result.message, + icon: 'none' + }); } checkUpdate() }, - toEdit() { - console.log('点击编辑信息'); - // uni.navigateTo({ - // url: '/uni_modules/uni-id-users/pages/uni-id-users/edit' - // }) - const token = uni.getStorageSync('uni_id_token') - if(token){ - uni.chooseImage({ - count:1, - success:(res)=> { - // 头像剪裁尺寸 - let options = { - width:600, - height:600 - } - // 剪裁并上传头像 - uni.navigateTo({ - url:'/pages/ucenter/edit/uploadCutImageToUnicloud?path=' + res.tempFilePaths[0] + `&options=${JSON.stringify(options)}`, - animationType:"fade-in", - events:{ - uploadAvatarAfter:({url})=>{ - console.log(url); - // 使用 clientDB 提交数据 - db.collection('uni-id-users').where('_id==$env.uid').update({avatar:url}).then((res) => { - console.log(res); - uni.showToast({ - icon: 'none', - title: '修改成功' - }) - this.setUserInfo({avatar:url}); - }).catch((err) => { - uni.showModal({ - content: err.message || '请求服务失败', - showCancel: false - }) - }).finally(() => { - uni.hideLoading() - }) - } - } - }); - } - }) - }else{ - uni.navigateTo({ - url:'/uni_modules/uni-login-page/pages/index/index' - }) - } + toUserInfo() { + uni.navigateTo({ + url: '/pages/ucenter/edit/edit' + }) }, tapGrid(index) { uni.showToast({ @@ -233,11 +191,6 @@ title: msg, icon: 'none' }); - }).catch((err) => { - uni.showModal({ - content: err.message || '请求服务失败', - showCancel: false - }) }).finally(() => { uni.hideLoading() }) @@ -254,11 +207,9 @@ font-style: normal; src: url('~@/static/text-icon.ttf') format('truetype'); } - page { background-color: #f8f8f8; } - /* #endif*/ /* 解决头条小程序字体图标不显示问题，因为头条运行时自动插入了span标签，且有全局字体 */ @@ -266,15 +217,12 @@ text :not(view) { font-family: texticons; } - /* #endif */ - .center { flex: 1; flex-direction: column; background-color: #f8f8f8; } - .userInfo { width: 750rpx; padding: 20rpx; @@ -283,25 +231,18 @@ flex-direction: column; align-items: center; } - - /* .logo-hover { - opacity: 0.8; - } */ - .logo-img { width: 150rpx; height: 150rpx; border-radius: 150rpx; border: solid 1px #FFFFFF; } - .logo-title { height: 150rpx; flex: 1; align-items: center; justify-content: space-between; flex-direction: row; - margin-left: 20rpx; } .uer-name { @@ -383,6 +324,6 @@ /* #ifdef APP-NVUE */ border-radius: 10rpx; /* #endif */ - background-color: #DD524D; + background-color: #DD524D; } - + diff --git a/static/uni-quick-login/apple.png b/static/uni-quick-login/apple.png new file mode 100644 index 0000000000000000000000000000000000000000..1d4b1334ff3c1ee81488d9c8cb05df232ec3b652 Binary files /dev/null and b/static/uni-quick-login/apple.png differ diff --git a/static/uni-quick-login/sms.png b/static/uni-quick-login/sms.png new file mode 100644 index 0000000000000000000000000000000000000000..fee8760911f91afc987871b6229af321c7433630 Binary files /dev/null and b/static/uni-quick-login/sms.png differ diff --git a/static/uni-quick-login/univerify.png b/static/uni-quick-login/univerify.png new file mode 100644 index 0000000000000000000000000000000000000000..00909a84976e151fdfcb7b000e52ed46dc2c6e33 Binary files /dev/null and b/static/uni-quick-login/univerify.png differ diff --git a/static/uni-quick-login/user.png b/static/uni-quick-login/user.png new file mode 100644 index 0000000000000000000000000000000000000000..57153d320f4eec453d8cb7ffe042a95e81347622 Binary files /dev/null and b/static/uni-quick-login/user.png differ diff --git a/static/uni-quick-login/wechat.png b/static/uni-quick-login/wechat.png new file mode 100644 index 0000000000000000000000000000000000000000..a16c17dc7156118c7780558a47706cbb7cae45ce Binary files /dev/null and b/static/uni-quick-login/wechat.png differ diff --git a/store/modules/user.js b/store/modules/user.js index 66f102b247222b43ba108a86addaab269519450e..3f15a9ba5f3075895b77460e38b354bc8c15c614 100644 --- a/store/modules/user.js +++ b/store/modules/user.js @@ -1,10 +1,8 @@ // 上次启动时的用户信息 -let userHistory = uni.getStorageSync('userInfo') || null; +let userHistory = uni.getStorageSync('userInfo') || {}; let state = { - /** - * 是否需要强制登录 - */ + /* 是否需要强制登录 */ forcedLogin: false, hasLogin: Boolean(userHistory), info: userHistory @@ -22,20 +20,18 @@ let state = { let _info = state.info; state.info = Object.assign({}, _info, info); state.hasLogin = true; - uni.setStorageSync('userInfo', info); + uni.setStorageSync('userInfo', state.info); }, logout(state) { - state.info = null; + state.info = {}; state.hasLogin = false; - uni.setStorageSync('userInfo', null); + uni.setStorageSync('userInfo', {}); uni.setStorageSync('uni_id_token', ''); } }, actions = { } - - export default { state, getters, diff --git a/uni_modules/uni-login-page/uniCloud/cloudfunctions/user-center/index.js b/uniCloud-aliyun/cloudfunctions/user-center/index.js similarity index 81% rename from uni_modules/uni-login-page/uniCloud/cloudfunctions/user-center/index.js rename to uniCloud-aliyun/cloudfunctions/user-center/index.js index 0918d7de6d80c5575f878d3cbab2917eed4ac926..f07c82c88ca716139deddc2190069a886293277c 100644 --- a/uni_modules/uni-login-page/uniCloud/cloudfunctions/user-center/index.js +++ b/uniCloud-aliyun/cloudfunctions/user-center/index.js @@ -1,6 +1,10 @@ 'use strict'; let uniID = require('uni-id') const uniCaptcha = require('uni-captcha') +const createConfig = require('uni-config-center') +const uniIdConfig = createConfig({ + pluginId: 'uni-id' +})._config const db = uniCloud.database() const dbCmd = db.command exports.main = async (event, context) => { @@ -84,8 +88,8 @@ exports.main = async (event, context) => { } : { state: 0 }) - if(res.type == 'register'){ - await registerSuccess(res.uid) + if (res.type == 'register') { + await registerSuccess(res.uid) } return await uniIdLogCollection.add(logData) } @@ -94,6 +98,46 @@ exports.main = async (event, context) => { let res = {} switch (event.action) { + case 'bind_mobile_by_univerify': + let { + appid, apiKey, apiSecret + } = uniIdConfig.service.univerify + let univerifyRes = await uniCloud.getPhoneNumber({ + provider: 'univerify', + appid, + apiKey, + apiSecret, + access_token: params.access_token, + openid: params.openid + }) + if (univerifyRes.code === 0) { + res = await uniID.bindMobile({ + uid: params.uid, + mobile: univerifyRes.phoneNumber + }) + res.mobile = univerifyRes.phoneNumber + } + break; + case 'bind_mobile_by_sms': + console.log({ + uid: params.uid, + mobile: params.mobile, + code: params.code + }); + let verifyCode = await uniID.verifyCode({ + mobile: params.mobile, + code: params.code + }) + if (verifyCode.code === 0) { + res = await uniID.bindMobile({ + uid: params.uid, + mobile: params.mobile + }) + } else { + res = verifyCode + } + console.log(res, verifyCode); + break; case 'register': let { username, password, gender, nickname @@ -164,7 +208,15 @@ exports.main = async (event, context) => { case 'logout': res = await uniID.logout(event.uniIdToken) break; - case 'sendSmsCode': + case 'sendSmsCode': + + //123546 + return uniID.setVerifyCode({ + mobile: params.mobile, + code:'123456' + }) + + // 简单限制一下客户端调用频率 const ipLimit = await db.collection('uni-verify').where({ ip: context.CLIENTIP, diff --git a/uniCloud-aliyun/cloudfunctions/user-center/package-lock.json b/uniCloud-aliyun/cloudfunctions/user-center/package-lock.json new file mode 100644 index 0000000000000000000000000000000000000000..bcc23fb807bfa545cdf5b4049d7918cf3114a1b6 --- /dev/null +++ b/uniCloud-aliyun/cloudfunctions/user-center/package-lock.json @@ -0,0 +1,58 @@ +{ + "name": "user-center", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "uni-captcha": "file:../../../uni_modules/uni-captcha/uniCloud/cloudfunctions/common/uni-captcha", + "uni-config-center": "file:../../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center", + "uni-id": "file:../../../uni_modules/uni-id/uniCloud/cloudfunctions/common/uni-id" + } + }, + "../../../uni_modules/uni-captcha/uniCloud/cloudfunctions/common/uni-captcha": { + "version": "0.1.0", + "license": "Apache-2.0" + }, + "../../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center": { + "version": "0.0.2", + "license": "Apache-2.0" + }, + "../../../uni_modules/uni-id/uniCloud/cloudfunctions/common/uni-id": { + "version": "3.0.12", + "license": "Apache-2.0", + "dependencies": { + "uni-config-center": "file:../../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" + } + }, + "node_modules/uni-captcha": { + "resolved": "../../../uni_modules/uni-captcha/uniCloud/cloudfunctions/common/uni-captcha", + "link": true + }, + "node_modules/uni-config-center": { + "resolved": "../../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center", + "link": true + }, + "node_modules/uni-id": { + "resolved": "../../../uni_modules/uni-id/uniCloud/cloudfunctions/common/uni-id", + "link": true + } + }, + "dependencies": { + "uni-captcha": { + "version": "file:../../../uni_modules/uni-captcha/uniCloud/cloudfunctions/common/uni-captcha" + }, + "uni-config-center": { + "version": "file:../../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" + }, + "uni-id": { + "version": "file:../../../uni_modules/uni-id/uniCloud/cloudfunctions/common/uni-id", + "requires": { + "uni-config-center": "file:../../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" + } + } + } +} diff --git a/uniCloud-aliyun/cloudfunctions/user-center/package.json b/uniCloud-aliyun/cloudfunctions/user-center/package.json new file mode 100644 index 0000000000000000000000000000000000000000..927edab70d05b8494a745a16a70144f613b2859f --- /dev/null +++ b/uniCloud-aliyun/cloudfunctions/user-center/package.json @@ -0,0 +1,16 @@ +{ + "name": "user-center", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "uni-captcha": "file:../../../uni_modules/uni-captcha/uniCloud/cloudfunctions/common/uni-captcha", + "uni-config-center": "file:../../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center", + "uni-id": "file:../../../uni_modules/uni-id/uniCloud/cloudfunctions/common/uni-id" + } +} diff --git a/uni_modules/uni-login-page/uniCloud/cloudfunctions/user/index.js b/uniCloud-aliyun/cloudfunctions/user/index.js similarity index 100% rename from uni_modules/uni-login-page/uniCloud/cloudfunctions/user/index.js rename to uniCloud-aliyun/cloudfunctions/user/index.js diff --git a/uniCloud-aliyun/cloudfunctions/user/package-lock.json b/uniCloud-aliyun/cloudfunctions/user/package-lock.json new file mode 100644 index 0000000000000000000000000000000000000000..7764eaf69433fa450df3f4d7243786adbbf49161 --- /dev/null +++ b/uniCloud-aliyun/cloudfunctions/user/package-lock.json @@ -0,0 +1,59 @@ +{ + "name": "user", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "uni-captcha": "file:../../../../uni-captcha/uniCloud/cloudfunctions/common/uni-captcha", + "uni-config-center": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center", + "uni-id": "file:../../../../uni-id/uniCloud/cloudfunctions/common/uni-id" + } + }, + "../../../../uni-captcha/uniCloud/cloudfunctions/common/uni-captcha": {}, + "../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center": {}, + "../../../../uni-id/uniCloud/cloudfunctions/common/uni-id": { + "dependencies": { + "uni-config-center": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" + } + }, + "../../../../uni-id/uniCloud/cloudfunctions/common/uni-id/node_modules/uni-config-center": { + "resolved": "../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center", + "link": true + }, + "node_modules/uni-captcha": { + "resolved": "../../../../uni-captcha/uniCloud/cloudfunctions/common/uni-captcha", + "link": true + }, + "node_modules/uni-config-center": { + "resolved": "../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center", + "link": true + }, + "node_modules/uni-id": { + "resolved": "../../../../uni-id/uniCloud/cloudfunctions/common/uni-id", + "link": true + } + }, + "dependencies": { + "uni-captcha": { + "version": "file:../../../../uni-captcha/uniCloud/cloudfunctions/common/uni-captcha" + }, + "uni-config-center": { + "version": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" + }, + "uni-id": { + "version": "file:../../../../uni-id/uniCloud/cloudfunctions/common/uni-id", + "requires": { + "uni-config-center": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" + }, + "dependencies": { + "uni-config-center": { + "version": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" + } + } + } + } +} diff --git a/uni_modules/uni-login-page/uniCloud/cloudfunctions/user/package.json b/uniCloud-aliyun/cloudfunctions/user/package.json similarity index 100% rename from uni_modules/uni-login-page/uniCloud/cloudfunctions/user/package.json rename to uniCloud-aliyun/cloudfunctions/user/package.json diff --git a/uni_modules/uni-login-page/uniCloud/cloudfunctions/user/user.param.json b/uniCloud-aliyun/cloudfunctions/user/user.param.json similarity index 100% rename from uni_modules/uni-login-page/uniCloud/cloudfunctions/user/user.param.json rename to uniCloud-aliyun/cloudfunctions/user/user.param.json diff --git a/uniCloud-aliyun/database/opendb-news-articles.schema.json b/uniCloud-aliyun/database/opendb-news-articles.schema.json index 74d18a4208db33db998819c41e8ed1cbed761e17..fd6ffff6818ff6d62e99d84bcb6a5d477af63c52 100644 --- a/uniCloud-aliyun/database/opendb-news-articles.schema.json +++ b/uniCloud-aliyun/database/opendb-news-articles.schema.json @@ -2,7 +2,7 @@ "bsonType": "object", "required": ["user_id", "title", "content"], "permission": { - "read": "doc.uid == auth.uid && doc.article_status == 0 || doc.article_status == 1", + "read": "doc.article_status == 0 || doc.article_status == 1", "create": "auth.uid != null", "update": "doc.uid == auth.uid", "delete": "doc.uid == auth.uid" diff --git a/uni_modules/uni-id-users/pages/uni-id-users/edit.vue b/uni_modules/uni-id-users/pages/uni-id-users/edit.vue index 1493cc5ca1c40f6fd00d266bd64d88c370e2def2..14d7c7d3c8101a6aeee29ce2e4a352c3cd172cb3 100644 --- a/uni_modules/uni-id-users/pages/uni-id-users/edit.vue +++ b/uni_modules/uni-id-users/pages/uni-id-users/edit.vue @@ -8,9 +8,9 @@ - + diff --git a/uni_modules/uni-login-page/changelog.md b/uni_modules/uni-login-page/changelog.md deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/uni_modules/uni-login-page/components/uni-quick-login/uni-quick-login.vue b/uni_modules/uni-login-page/components/uni-quick-login/uni-quick-login.vue deleted file mode 100644 index aa2864cace516d0b9c38f1f2822da0e469ed84a2..0000000000000000000000000000000000000000 --- a/uni_modules/uni-login-page/components/uni-quick-login/uni-quick-login.vue +++ /dev/null @@ -1,237 +0,0 @@ - - - - \ No newline at end of file diff --git a/uni_modules/uni-login-page/package.json b/uni_modules/uni-login-page/package.json deleted file mode 100644 index 1c5fbf552aafd7e6465aca1eb1b3f78a61f12800..0000000000000000000000000000000000000000 --- a/uni_modules/uni-login-page/package.json +++ /dev/null @@ -1,76 +0,0 @@ -{ - "id": "uni-login-page", - "displayName": "uni-login-page", - "version": "1.0.0", - "description": "uni-login-page", - "keywords": [ - "uni-login-page" -], - "repository": "", - "engines": { - "HBuilderX": "^3.1.0" - }, - "dcloudext": { - "category": [ - "前端页面模板", - "前端页面模板" - ], - "sale": { - "regular": { - "price": "0.00" - }, - "sourcecode": { - "price": "0.00" - } - }, - "contact": { - "qq": "" - }, - "declaration": { - "ads": "", - "data": "", - "permissions": "" - }, - "npmurl": "" - }, - "uni_modules": { - "dependencies": [], - "encrypt": [], - "platforms": { - "cloud": { - "tcb": "u", - "aliyun": "u" - }, - "client": { - "App": { - "app-vue": "u", - "app-nvue": "u" - }, - "H5-mobile": { - "Safari": "u", - "Android Browser": "u", - "微信浏览器(Android)": "u", - "QQ浏览器(Android)": "u" - }, - "H5-pc": { - "Chrome": "u", - "IE": "u", - "Edge": "u", - "Firefox": "u", - "Safari": "u" - }, - "小程序": { - "微信": "u", - "阿里": "u", - "百度": "u", - "字节跳动": "u", - "QQ": "u" - }, - "快应用": { - "华为": "u", - "联盟": "u" - } - } - } - } -} \ No newline at end of file diff --git a/uni_modules/uni-login-page/readme.md b/uni_modules/uni-login-page/readme.md deleted file mode 100644 index b97c7e2c1289791783e57700a7cc95901fe20b42..0000000000000000000000000000000000000000 --- a/uni_modules/uni-login-page/readme.md +++ /dev/null @@ -1 +0,0 @@ -# uni-login-page \ No newline at end of file diff --git a/uni_modules/uni-login-page/static/login/db.png b/uni_modules/uni-login-page/static/login/db.png deleted file mode 100644 index b6f5aa57d2d9f03d529271f1864cee010dc08328..0000000000000000000000000000000000000000 Binary files a/uni_modules/uni-login-page/static/login/db.png and /dev/null differ diff --git a/uni_modules/uni-login-page/static/login/qq.png b/uni_modules/uni-login-page/static/login/qq.png deleted file mode 100644 index 677195fff07b170a0d36ed9c574c79ba81939fdd..0000000000000000000000000000000000000000 Binary files a/uni_modules/uni-login-page/static/login/qq.png and /dev/null differ diff --git a/uni_modules/uni-login-page/static/login/smsCode.png b/uni_modules/uni-login-page/static/login/smsCode.png deleted file mode 100644 index fd5b859feb7db2d516bf024ae5a46cc82bbe6fd2..0000000000000000000000000000000000000000 Binary files a/uni_modules/uni-login-page/static/login/smsCode.png and /dev/null differ diff --git a/uni_modules/uni-login-page/static/login/univerify.png b/uni_modules/uni-login-page/static/login/univerify.png deleted file mode 100644 index d0cef6781adcfadee14ba7941c20ab717e1c1ee2..0000000000000000000000000000000000000000 Binary files a/uni_modules/uni-login-page/static/login/univerify.png and /dev/null differ diff --git a/uni_modules/uni-login-page/static/login/username.png b/uni_modules/uni-login-page/static/login/username.png deleted file mode 100644 index d7c0878c901bfb99b91895d956a98b858b1ec3d6..0000000000000000000000000000000000000000 Binary files a/uni_modules/uni-login-page/static/login/username.png and /dev/null differ diff --git a/uni_modules/uni-login-page/static/login/weibo.png b/uni_modules/uni-login-page/static/login/weibo.png deleted file mode 100644 index 0f9b46c974ba9ad6b16eac719ec5be6337d8e97f..0000000000000000000000000000000000000000 Binary files a/uni_modules/uni-login-page/static/login/weibo.png and /dev/null differ diff --git a/uni_modules/uni-login-page/static/login/weixin.png b/uni_modules/uni-login-page/static/login/weixin.png deleted file mode 100644 index f392b33485d14e6e125daf12789dc306a7c4b1e5..0000000000000000000000000000000000000000 Binary files a/uni_modules/uni-login-page/static/login/weixin.png and /dev/null differ diff --git a/uni_modules/uni-login-page/uniCloud/cloudfunctions/user-center/package-lock.json b/uni_modules/uni-login-page/uniCloud/cloudfunctions/user-center/package-lock.json deleted file mode 100644 index 6630381f378b01c73f31b005fb65621b9e9ac2a1..0000000000000000000000000000000000000000 --- a/uni_modules/uni-login-page/uniCloud/cloudfunctions/user-center/package-lock.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "user-center", - "version": "1.0.0", - "lockfileVersion": 1, - "requires": true, - "dependencies": { - "uni-captcha": { - "version": "file:../../../../uni-captcha/uniCloud/cloudfunctions/common/uni-captcha" - }, - "uni-config-center": { - "version": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" - }, - "uni-id": { - "version": "file:../../../../uni-id/uniCloud/cloudfunctions/common/uni-id", - "requires": { - "uni-config-center": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" - }, - "dependencies": { - "uni-config-center": { - "version": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" - } - } - } - } -} diff --git a/uni_modules/uni-login-page/uniCloud/cloudfunctions/user-center/package.json b/uni_modules/uni-login-page/uniCloud/cloudfunctions/user-center/package.json deleted file mode 100644 index 0d50d88175e3e3b187d207dea4f3380a851e72af..0000000000000000000000000000000000000000 --- a/uni_modules/uni-login-page/uniCloud/cloudfunctions/user-center/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "user-center", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "", - "license": "ISC", - "dependencies": { - "uni-captcha": "file:../../../../uni-captcha/uniCloud/cloudfunctions/common/uni-captcha", - "uni-config-center": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center", - "uni-id": "file:../../../../uni-id/uniCloud/cloudfunctions/common/uni-id" - } -} diff --git a/uni_modules/uni-login-page/uniCloud/cloudfunctions/user/package-lock.json b/uni_modules/uni-login-page/uniCloud/cloudfunctions/user/package-lock.json deleted file mode 100644 index d8a3cee346a99209a514046927298b116c2b0af8..0000000000000000000000000000000000000000 --- a/uni_modules/uni-login-page/uniCloud/cloudfunctions/user/package-lock.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "user", - "version": "1.0.0", - "lockfileVersion": 1, - "requires": true, - "dependencies": { - "uni-captcha": { - "version": "file:../../../../uni-captcha/uniCloud/cloudfunctions/common/uni-captcha" - }, - "uni-config-center": { - "version": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" - }, - "uni-id": { - "version": "file:../../../../uni-id/uniCloud/cloudfunctions/common/uni-id", - "requires": { - "uni-config-center": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" - }, - "dependencies": { - "uni-config-center": { - "version": "file:../../../../uni-config-center/uniCloud/cloudfunctions/common/uni-config-center" - } - } - } - } -} diff --git a/uni_modules/uni-popup/changelog.md b/uni_modules/uni-popup/changelog.md index e508de0d4ae7110ede2acaf1fa67a4e9719ca4f4..4e14176e9a939d1af060ff982c4c0a954160f675 100644 --- a/uni_modules/uni-popup/changelog.md +++ b/uni_modules/uni-popup/changelog.md @@ -1,8 +1,10 @@ -## 1.2.9（2021-02-05） -- 优化 组件引用关系，通过uni_modules引用组件 -## 1.2.8（2021-02-05） -- 调整为uni_modules目录规范 -## 1.2.7（2021-02-05） -- 调整为uni_modules目录规范 -- 新增 支持 PC 端 -- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端 +## 1.3.0（2021-04-13） +修复某些情况下uni-popup-dialog输入框的值获取失败的问题 +## 1.2.9（2021-02-05） +- 优化 组件引用关系，通过uni_modules引用组件 +## 1.2.8（2021-02-05） +- 调整为uni_modules目录规范 +## 1.2.7（2021-02-05） +- 调整为uni_modules目录规范 +- 新增 支持 PC 端 +- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端 diff --git a/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js b/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js index 6ef26a26211ff28976e6fc835fbef5d2ea5b5b1e..a747b9fc8c0d3df87adc4e7ffa380beef7f42cbe 100644 --- a/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js +++ b/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js @@ -1,45 +1,45 @@ -// #ifdef H5 -export default { - name: 'Keypress', - props: { - disable: { - type: Boolean, - default: false - } - }, - mounted () { - const keyNames = { - esc: ['Esc', 'Escape'], - tab: 'Tab', - enter: 'Enter', - space: [' ', 'Spacebar'], - up: ['Up', 'ArrowUp'], - left: ['Left', 'ArrowLeft'], - right: ['Right', 'ArrowRight'], - down: ['Down', 'ArrowDown'], - delete: ['Backspace', 'Delete', 'Del'] - } - const listener = ($event) => { - if (this.disable) { - return - } - const keyName = Object.keys(keyNames).find(key => { - const keyName = $event.key - const value = keyNames[key] - return value === keyName || (Array.isArray(value) && value.includes(keyName)) - }) - if (keyName) { - // 避免和其他按键事件冲突 - setTimeout(() => { - this.$emit(keyName, {}) - }, 0) - } - } - document.addEventListener('keyup', listener) - this.$once('hook:beforeDestroy', () => { - document.removeEventListener('keyup', listener) - }) - }, - render: () => {} -} -// #endif +// #ifdef H5 +export default { + name: 'Keypress', + props: { + disable: { + type: Boolean, + default: false + } + }, + mounted () { + const keyNames = { + esc: ['Esc', 'Escape'], + tab: 'Tab', + enter: 'Enter', + space: [' ', 'Spacebar'], + up: ['Up', 'ArrowUp'], + left: ['Left', 'ArrowLeft'], + right: ['Right', 'ArrowRight'], + down: ['Down', 'ArrowDown'], + delete: ['Backspace', 'Delete', 'Del'] + } + const listener = ($event) => { + if (this.disable) { + return + } + const keyName = Object.keys(keyNames).find(key => { + const keyName = $event.key + const value = keyNames[key] + return value === keyName || (Array.isArray(value) && value.includes(keyName)) + }) + if (keyName) { + // 避免和其他按键事件冲突 + setTimeout(() => { + this.$emit(keyName, {}) + }, 0) + } + } + document.addEventListener('keyup', listener) + this.$once('hook:beforeDestroy', () => { + document.removeEventListener('keyup', listener) + }) + }, + render: () => {} +} +// #endif diff --git a/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue b/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue index 5163bec7026b4a76fe142cc1d55c92365fc6bacb..8932683d83c11d1148d65092135a274b08a0fda1 100644 --- a/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue +++ b/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue @@ -1,290 +1,244 @@ - - - - - + } + }, + /** + * 点击取消按钮 + */ + close() { + if (this.beforeClose) { + this.$emit('close', () => { + this.popup.close() + }) + return + } + this.popup.close() + } + } + } + + + \ No newline at end of file diff --git a/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue b/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue index 17b0211391a40658fc652bf01fa90b0928c20874..54f21a28b26f078eadcb402df56ddaf03a6803a7 100644 --- a/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue +++ b/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue @@ -1,138 +1,138 @@ - - - - + + + + diff --git a/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue b/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue index 7383a5c89197eb853dff9d7eb49b50b3c97ac20e..9926e2b2741b204881ac3ff8ac09ec73f1c855da 100644 --- a/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue +++ b/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue @@ -1,155 +1,165 @@ - - - - + + + + diff --git a/uni_modules/uni-popup/components/uni-popup/keypress.js b/uni_modules/uni-popup/components/uni-popup/keypress.js index 6ef26a26211ff28976e6fc835fbef5d2ea5b5b1e..a747b9fc8c0d3df87adc4e7ffa380beef7f42cbe 100644 --- a/uni_modules/uni-popup/components/uni-popup/keypress.js +++ b/uni_modules/uni-popup/components/uni-popup/keypress.js @@ -1,45 +1,45 @@ -// #ifdef H5 -export default { - name: 'Keypress', - props: { - disable: { - type: Boolean, - default: false - } - }, - mounted () { - const keyNames = { - esc: ['Esc', 'Escape'], - tab: 'Tab', - enter: 'Enter', - space: [' ', 'Spacebar'], - up: ['Up', 'ArrowUp'], - left: ['Left', 'ArrowLeft'], - right: ['Right', 'ArrowRight'], - down: ['Down', 'ArrowDown'], - delete: ['Backspace', 'Delete', 'Del'] - } - const listener = ($event) => { - if (this.disable) { - return - } - const keyName = Object.keys(keyNames).find(key => { - const keyName = $event.key - const value = keyNames[key] - return value === keyName || (Array.isArray(value) && value.includes(keyName)) - }) - if (keyName) { - // 避免和其他按键事件冲突 - setTimeout(() => { - this.$emit(keyName, {}) - }, 0) - } - } - document.addEventListener('keyup', listener) - this.$once('hook:beforeDestroy', () => { - document.removeEventListener('keyup', listener) - }) - }, - render: () => {} -} -// #endif +// #ifdef H5 +export default { + name: 'Keypress', + props: { + disable: { + type: Boolean, + default: false + } + }, + mounted () { + const keyNames = { + esc: ['Esc', 'Escape'], + tab: 'Tab', + enter: 'Enter', + space: [' ', 'Spacebar'], + up: ['Up', 'ArrowUp'], + left: ['Left', 'ArrowLeft'], + right: ['Right', 'ArrowRight'], + down: ['Down', 'ArrowDown'], + delete: ['Backspace', 'Delete', 'Del'] + } + const listener = ($event) => { + if (this.disable) { + return + } + const keyName = Object.keys(keyNames).find(key => { + const keyName = $event.key + const value = keyNames[key] + return value === keyName || (Array.isArray(value) && value.includes(keyName)) + }) + if (keyName) { + // 避免和其他按键事件冲突 + setTimeout(() => { + this.$emit(keyName, {}) + }, 0) + } + } + document.addEventListener('keyup', listener) + this.$once('hook:beforeDestroy', () => { + document.removeEventListener('keyup', listener) + }) + }, + render: () => {} +} +// #endif diff --git a/uni_modules/uni-popup/components/uni-popup/message.js b/uni_modules/uni-popup/components/uni-popup/message.js index 0ff9a0242c1a2ed1899a36629cf6067f13ed29df..0c0c88d0bdfb102dbe9301c5e2f1b12ce41ff2e6 100644 --- a/uni_modules/uni-popup/components/uni-popup/message.js +++ b/uni_modules/uni-popup/components/uni-popup/message.js @@ -1,22 +1,22 @@ -export default { - created() { - if (this.type === 'message') { - // 不显示遮罩 - this.maskShow = false - // 获取子组件对象 - this.childrenMsg = null - } - }, - methods: { - customOpen() { - if (this.childrenMsg) { - this.childrenMsg.open() - } - }, - customClose() { - if (this.childrenMsg) { - this.childrenMsg.close() - } - } - } -} +export default { + created() { + if (this.type === 'message') { + // 不显示遮罩 + this.maskShow = false + // 获取子组件对象 + this.childrenMsg = null + } + }, + methods: { + customOpen() { + if (this.childrenMsg) { + this.childrenMsg.open() + } + }, + customClose() { + if (this.childrenMsg) { + this.childrenMsg.close() + } + } + } +} diff --git a/uni_modules/uni-popup/components/uni-popup/popup.js b/uni_modules/uni-popup/components/uni-popup/popup.js index 8e02434e1daa59253aa6f555c12c22041c8de3ae..794954ce350fdbadac9db63b39d235849213a191 100644 --- a/uni_modules/uni-popup/components/uni-popup/popup.js +++ b/uni_modules/uni-popup/components/uni-popup/popup.js @@ -1,50 +1,50 @@ -import message from './message.js'; -// 定义 type 类型:弹出类型：top/bottom/center -const config = { - // 顶部弹出 - top: 'top', - // 底部弹出 - bottom: 'bottom', - // 居中弹出 - center: 'center', - // 消息提示 - message: 'top', - // 对话框 - dialog: 'center', - // 分享 - share: 'bottom', -} - -export default { - data() { - return { - config: config, - popupWidth: 0, - popupHeight: 0 - } - }, - mixins: [message], - computed: { - isDesktop() { - return this.popupWidth >= 500 && this.popupHeight >= 500 - } - }, - mounted() { - const fixSize = () => { - const { - windowWidth, - windowHeight, - windowTop - } = uni.getSystemInfoSync() - this.popupWidth = windowWidth - this.popupHeight = windowHeight + windowTop - } - fixSize() - // #ifdef H5 - window.addEventListener('resize', fixSize) - this.$once('hook:beforeDestroy', () => { - window.removeEventListener('resize', fixSize) - }) - // #endif - }, -} +import message from './message.js'; +// 定义 type 类型:弹出类型：top/bottom/center +const config = { + // 顶部弹出 + top: 'top', + // 底部弹出 + bottom: 'bottom', + // 居中弹出 + center: 'center', + // 消息提示 + message: 'top', + // 对话框 + dialog: 'center', + // 分享 + share: 'bottom', +} + +export default { + data() { + return { + config: config, + popupWidth: 0, + popupHeight: 0 + } + }, + mixins: [message], + computed: { + isDesktop() { + return this.popupWidth >= 500 && this.popupHeight >= 500 + } + }, + mounted() { + const fixSize = () => { + const { + windowWidth, + windowHeight, + windowTop + } = uni.getSystemInfoSync() + this.popupWidth = windowWidth + this.popupHeight = windowHeight + windowTop + } + fixSize() + // #ifdef H5 + window.addEventListener('resize', fixSize) + this.$once('hook:beforeDestroy', () => { + window.removeEventListener('resize', fixSize) + }) + // #endif + }, +} diff --git a/uni_modules/uni-popup/components/uni-popup/share.js b/uni_modules/uni-popup/components/uni-popup/share.js index 462bb83ab3cbf468e41f4faa3463e1a68d3d6941..930a6cfb51ff212cca314e5e08277f099714f5ac 100644 --- a/uni_modules/uni-popup/components/uni-popup/share.js +++ b/uni_modules/uni-popup/components/uni-popup/share.js @@ -1,16 +1,16 @@ -export default { - created() { - if (this.type === 'share') { - // 关闭点击 - this.mkclick = false - } - }, - methods: { - customOpen() { - console.log('share 打开了'); - }, - customClose() { - console.log('share 关闭了'); - } - } -} +export default { + created() { + if (this.type === 'share') { + // 关闭点击 + this.mkclick = false + } + }, + methods: { + customOpen() { + console.log('share 打开了'); + }, + customClose() { + console.log('share 关闭了'); + } + } +} diff --git a/uni_modules/uni-popup/components/uni-popup/uni-popup.vue b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue index e1e8d114d2eb1d86559c76d4fd2b860999e29bf4..0d0c81323e522ddedfe1a927bbba025acd385c8c 100644 --- a/uni_modules/uni-popup/components/uni-popup/uni-popup.vue +++ b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue @@ -1,321 +1,321 @@ - - - - + + + + diff --git a/uni_modules/uni-popup/package.json b/uni_modules/uni-popup/package.json index 31f711a0378a5f262948a4692db4ffb00746a5fc..c15c743839d5a74e6702367d3cf681b10ec2d5d2 100644 --- a/uni_modules/uni-popup/package.json +++ b/uni_modules/uni-popup/package.json @@ -1,84 +1,84 @@ -{ - "id": "uni-popup", - "displayName": "PopUp 弹出层", - "version": "1.2.9", - "description": " Popup 组件，提供常用的弹层", - "keywords": [ - "popup", - "uni-ui", - "弹出层", - "uni-popup" -], - "repository": "https://github.com/dcloudio/uni-ui", - "engines": { - "HBuilderX": "" - }, - "directories": { - "example": "../../temps/example_temps" - }, - "dcloudext": { - "category": [ - "前端组件", - "通用组件" - ], - "sale": { - "regular": { - "price": "0.00" - }, - "sourcecode": { - "price": "0.00" - } - }, - "contact": { - "qq": "" - }, - "declaration": { - "ads": "无", - "data": "无", - "permissions": "无" - }, - "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" - }, - "uni_modules": { - "dependencies": [ - "uni-transition" - ], - "encrypt": [], - "platforms": { - "cloud": { - "tcb": "y", - "aliyun": "y" - }, - "client": { - "App": { - "app-vue": "y", - "app-nvue": "y" - }, - "H5-mobile": { - "Safari": "y", - "Android Browser": "y", - "微信浏览器(Android)": "y", - "QQ浏览器(Android)": "y" - }, - "H5-pc": { - "Chrome": "y", - "IE": "y", - "Edge": "y", - "Firefox": "y", - "Safari": "y" - }, - "小程序": { - "微信": "y", - "阿里": "y", - "百度": "y", - "字节跳动": "y", - "QQ": "y" - }, - "快应用": { - "华为": "u", - "联盟": "u" - } - } - } - } +{ + "id": "uni-popup", + "displayName": "PopUp 弹出层", + "version": "1.3.0", + "description": " Popup 组件，提供常用的弹层", + "keywords": [ + "popup", + "uni-ui", + "弹出层", + "uni-popup" +], + "repository": "https://github.com/dcloudio/uni-ui", + "engines": { + "HBuilderX": "" + }, + "directories": { + "example": "../../temps/example_temps" + }, + "dcloudext": { + "category": [ + "前端组件", + "通用组件" + ], + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "无", + "data": "无", + "permissions": "无" + }, + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" + }, + "uni_modules": { + "dependencies": [ + "uni-transition" + ], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y" + }, + "client": { + "App": { + "app-vue": "y", + "app-nvue": "y" + }, + "H5-mobile": { + "Safari": "y", + "Android Browser": "y", + "微信浏览器(Android)": "y", + "QQ浏览器(Android)": "y" + }, + "H5-pc": { + "Chrome": "y", + "IE": "y", + "Edge": "y", + "Firefox": "y", + "Safari": "y" + }, + "小程序": { + "微信": "y", + "阿里": "y", + "百度": "y", + "字节跳动": "y", + "QQ": "y" + }, + "快应用": { + "华为": "u", + "联盟": "u" + } + } + } + } } \ No newline at end of file diff --git a/uni_modules/uni-popup/readme.md b/uni_modules/uni-popup/readme.md index 2a73557965711af38309bdf38c241b4efff206ee..85c5e4db12ccd9a7ccf331d20177e0446f579bf4 100644 --- a/uni_modules/uni-popup/readme.md +++ b/uni_modules/uni-popup/readme.md @@ -1,294 +1,294 @@ - - -## Popup 弹出层 -> 代码块： `uPopup` -> 关联组件：`uni-transition`,`uni-popup-dialog`,`uni-popup-message`,`uni-popup-share` - - -弹出层组件，在应用中弹出一个消息提示窗口、提示框等 - - -> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 -> - 组件需要依赖 `sass` 插件 ，请自行手动安装 -> - `uni-popup-message` 、 `uni-popup-dialog` 等扩展ui组件，需要和 `uni-popup` 配套使用，暂不支持单独使用 -> - `nvue` 中使用 `uni-popup` 时，尽量将组件置于其他元素后面，避免出现层级问题 -> - `uni-popup` 并不能完全阻止页面滚动，可在打开 `uni-popup` 的时候手动去做一些处理，禁止页面滚动 -> - 如果需要在子扩展组件内关闭 `uni-popup` ，请使用扩展（provide/inject）方式，其他方式可能会出现不可预知问题 -> - 如果想在页面渲染完毕后就打开 `uni-popup` ，请在 `onReady` 或 `mounted` 生命周期内调用，确保组件渲染完毕 -> - 在微信小程序开发者工具中，启用真机调试，popup 会延时出现，是因为 setTimeout 在真机调试中的延时问题导致的，预览和发布小程序不会出现此问题 -> - 使用 `npm` 方式引入组件，如果确认引用正确，但是提示未注册组件或显示不正常，请尝试重新编译项目 -> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容，可能会影响组件的性能，导致组件无法打开或者打开卡顿 -> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏 - - - -### 安装方式 - -本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 - -如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) - - -## 基本用法 - -```html - -底部弹出 Popup -``` - -```javascript -export default { - methods:{ - open(){ - // 通过组件定义的ref调用uni-popup方法 - this.$refs.popup.open() - } - } - -} - -``` - -## API - -### Popup Props - -| 属性名 | 类型 | 默认值 | 说明 | -| :-: | :-: | :-: | :-: | -| animation | Boolean |true | 是否开启动画 | -| type | String |center | 弹出方式 | -| maskClick | Boolean |true | 蒙版点击是否关闭弹窗 | - -#### Type Options - -| 属性名 | 说明 | -| :-: | :-: | -| top | 顶部弹出 | -| center | 居中弹出 | -| bottom | 底部弹出 | -| message | 预置样式 ：消息提示 | -| dialog | 预置样式 ：对话框 | -| share | 预置样式 ：底部弹出分享示例 | - - -### Popup Methods - -|方法称名 |说明 |参数| -|:-: |:-: |:-:| -|open |打开弹出层 |- | -|close |关闭弹出层 |- | - - -### Popup Events - -|事件称名 |说明 |返回值 | -|:-: |:-: |:-: | -|change |组件状态发生变化触发 |e={show: true｜false,type:当前模式} | - - -## 扩展组件说明 -`uni-popup` 其实并没有任何样式，只提供基础的动画效果，给用户一个弹出层解决方案，仅仅是这样并不能满足开发需求，所以我们提供了三种基础扩展样式 - -### uni-popup-message 提示信息 - -将 `uni-popup` 的`type`属性改为 `message`，并引入对应组件即可使用消息提示 ，*该组件不支持单独使用* - -**示例** - -```html - - - -``` - -### uni-popup-message 属性说明 - -| 属性名 | 类型 | 默认值 | 说明 | -| :-: | :-: | :-: | :-: | -| type | String |success| 消息提示主题，可选值： success/warn/info/error | -| message | String |- | 消息提示文字 | -| duration | Number |3000 | 消息显示时间，超过显示时间组件自动关闭，设置为0 将不会关闭，需手动调用 close 方法关闭 | - -### uni-popup-dialog 对话框 - -将 `uni-popup` 的`type`属性改为 `dialog`，并引入对应组件即可使用对话框 ，*该组件不支持单独使用* - -**示例** - -```html - - - -``` - -```javascript -export default { - methods:{ - /** - * 点击取消按钮触发 - * @param {Object} done - */ - close(done){ - // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框 - // ... - done() - }, - /** - * 点击确认按钮触发 - * @param {Object} done - * @param {Object} value - */ - confirm(done,value){ - // 输入框的值 - console.log(value) - // TODO 做一些其他的事情，手动执行 done 才会关闭对话框 - // ... - done() - } - } -} -``` - -### uni-popup-dialog 属性说明 - -| 属性名 | 类型 | 默认值 | 说明 | -| :-: | :-: | :-: | :-: | -| type | String |success| 对话框标题主题，可选值： success/warn/info/error | -| mode | String |base | 对话框模式，可选值：base（提示对话框）/input（可输入对话框） | -| title | String |- | 对话框标题 | -| content | String |- | 对话框内容，base模式下生效 | -| value | String\Number |- | 输入框默认值，input模式下生效 | -| placeholder | String |- | 输入框提示文字，input模式下生效 | -| before-close | Boolean |false | 是否拦截取消按钮，如为true，则不会关闭对话框，关闭需要监听 dialog 的 close 事件，并执行 done()| - -#### dialog 事件说明 - -|事件称名 |说明 |返回值 | -|:-: |:-: |:-: | -|close |点击dialog取消按钮触发 |done:执行关闭对话框 | -|confirm |点击dialog确定按钮触发 |done:执行关闭对话框：value：input模式下输入框的值 | - - -### uni-popup-share 分享示例 - -分享示例，不作为最终可使用的组件，将 `uni-popup` 的 `type` 属性改为 `share`，并引入对应组件即可使用 ，*该组件不支持单独使用* - -**示例** - -```html - - - -``` - -### uni-popup-share 属性说明 - -| 属性名| 类型 | 默认值 | 说明 | -| :-: | :-: | :-: | :-: | -| title | String | | 分享弹窗标题 | - -### uni-popup-share 事件说明 - -|事件称名 |说明 |返回值 | -|:-: |:-: |:-: | -|select |选择触发 |e = {item,index}：所选参数,done：执行关闭窗口 | - -**Tips** -- share 分享组件，只是作为一个扩展示例，如果需要修改数据源，请到组件内修改 - -## 如何扩展自己的 uni-popup 弹出层样式？ -`uni-popup` 组件内容是通过 `slot` 插槽的方式去实现的，所以这极大的方便了我们的扩展。 - -现在我们可以在不改动 `uni-popup` 组件主体的情况下，方便的去扩展我们自己的弹出层样式。 - -### 添加自定义类型 -如果要去扩展 `uni-popup`，我们需要把组件*引入本地*，才能去进行扩展。 - -组件放到本地后，在组件目录找到 `popup.js` ，在 `config` 变量中定义自己的类型，key 为当前要定义的类型，value 为弹出类型（top/bottom/center） -我们以 `uni-popup-share` 为例，看如何扩展一个`share` 底部分享的一个 `uni-popup` 子组件，代码参考 `uni-popup-share.vue`。 - -```javascript - -// popup.js -const config = { - // ... - // 分享 key:share 为我们定义的类型 value : 'bottom' 为弹出方向（top/bottom/center） - // 这样配置好之后，我们自定义的弹出层就会从底部弹出 - share:'bottom', -} - -``` - -### 创建扩展组件 - -在组件目录创建文件 ，例 `uni-popup-share/uni-popup-share.vue`，结构与其他组件没有区别。 - -在组件内直接编写样式逻辑即可，如需自定义效果更强，可以通过 props 接受页面参数。 - - -### 与父组件 `uni-popup` 进行通讯 - -组件通讯我们使用了 `provide/inject` ， 具体逻辑我们不需要关心，只要在子组件配置 `inject` ，即可获取父组件方法变量等。 - -```javascript - -// uni-popup-share.vue -export default { - name: 'UniPopupShare', - props: { - title: { - type: String, - default: '分享到' - } - }, - // 直接把下面这一行代码，放到自己的组件内 - inject: ['popup'], - // ... - methons:{ - /** - * 定义的选择事件，选择内容后触发 - */ - select(item, index) { - // 将事件发送到页面，在页面进行监听 - this.$emit('select', { - item, - index - }, () => { - // 延迟操作，执行父组件的close事件，关闭弹出层 - this.popup.close() - }) - }, - /** - * 关闭窗口 - */ - close() { - // 执行父组件的close事件，关闭弹出层 - this.popup.close() - } - } -} -``` - - -### 使用自定义组件 - -通过上面几个步骤 ，我们就可以使用这个组件了，只需要把我们自定义的组件放置到 `uni-popup` 组件内即可 ，指定 `uni-popup` 的 `type` 为我们第一步定义好的 `share` - -```html - - - -``` - -之后就可以按照 `uni-popup` 的使用方式去打开关闭弹出层了。更多细节可以参考 `uni-popup-message` 和 `uni-popup-dialog`。 - - -**Tips** -- 如果扩展组件目录名和组件名不一致，可能不会被 `easycom` 正确引用，请配置`easycom`规则或修改组件名称 - -### 分享你的组件 - -通过组件扩展，你可以扩展出更丰富的弹出层样式，如果您想让更多人使用你定制的组件，或者您有更好的点子或更好的实现方式，欢迎给我们提交 [PR](https://github.com/dcloudio/uni-ui/pulls)，如被采用，会合并到示例中。 - -在使用中如遇到无法解决的问题，请提 [Issues](https://github.com/dcloudio/uni-ui/issues) 给我们。 - + + +## Popup 弹出层 +> 代码块： `uPopup` +> 关联组件：`uni-transition`,`uni-popup-dialog`,`uni-popup-message`,`uni-popup-share` + + +弹出层组件，在应用中弹出一个消息提示窗口、提示框等 + + +> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 +> - 组件需要依赖 `sass` 插件 ，请自行手动安装 +> - `uni-popup-message` 、 `uni-popup-dialog` 等扩展ui组件，需要和 `uni-popup` 配套使用，暂不支持单独使用 +> - `nvue` 中使用 `uni-popup` 时，尽量将组件置于其他元素后面，避免出现层级问题 +> - `uni-popup` 并不能完全阻止页面滚动，可在打开 `uni-popup` 的时候手动去做一些处理，禁止页面滚动 +> - 如果需要在子扩展组件内关闭 `uni-popup` ，请使用扩展（provide/inject）方式，其他方式可能会出现不可预知问题 +> - 如果想在页面渲染完毕后就打开 `uni-popup` ，请在 `onReady` 或 `mounted` 生命周期内调用，确保组件渲染完毕 +> - 在微信小程序开发者工具中，启用真机调试，popup 会延时出现，是因为 setTimeout 在真机调试中的延时问题导致的，预览和发布小程序不会出现此问题 +> - 使用 `npm` 方式引入组件，如果确认引用正确，但是提示未注册组件或显示不正常，请尝试重新编译项目 +> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容，可能会影响组件的性能，导致组件无法打开或者打开卡顿 +> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏 + + + +### 安装方式 + +本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 + +如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) + + +## 基本用法 + +```html + +底部弹出 Popup +``` + +```javascript +export default { + methods:{ + open(){ + // 通过组件定义的ref调用uni-popup方法 + this.$refs.popup.open() + } + } + +} + +``` + +## API + +### Popup Props + +| 属性名 | 类型 | 默认值 | 说明 | +| :-: | :-: | :-: | :-: | +| animation | Boolean |true | 是否开启动画 | +| type | String |center | 弹出方式 | +| maskClick | Boolean |true | 蒙版点击是否关闭弹窗 | + +#### Type Options + +| 属性名 | 说明 | +| :-: | :-: | +| top | 顶部弹出 | +| center | 居中弹出 | +| bottom | 底部弹出 | +| message | 预置样式 ：消息提示 | +| dialog | 预置样式 ：对话框 | +| share | 预置样式 ：底部弹出分享示例 | + + +### Popup Methods + +|方法称名 |说明 |参数| +|:-: |:-: |:-:| +|open |打开弹出层 |- | +|close |关闭弹出层 |- | + + +### Popup Events + +|事件称名 |说明 |返回值 | +|:-: |:-: |:-: | +|change |组件状态发生变化触发 |e={show: true｜false,type:当前模式} | + + +## 扩展组件说明 +`uni-popup` 其实并没有任何样式，只提供基础的动画效果，给用户一个弹出层解决方案，仅仅是这样并不能满足开发需求，所以我们提供了三种基础扩展样式 + +### uni-popup-message 提示信息 + +将 `uni-popup` 的`type`属性改为 `message`，并引入对应组件即可使用消息提示 ，*该组件不支持单独使用* + +**示例** + +```html + + + +``` + +### uni-popup-message 属性说明 + +| 属性名 | 类型 | 默认值 | 说明 | +| :-: | :-: | :-: | :-: | +| type | String |success| 消息提示主题，可选值： success/warn/info/error | +| message | String |- | 消息提示文字 | +| duration | Number |3000 | 消息显示时间，超过显示时间组件自动关闭，设置为0 将不会关闭，需手动调用 close 方法关闭 | + +### uni-popup-dialog 对话框 + +将 `uni-popup` 的`type`属性改为 `dialog`，并引入对应组件即可使用对话框 ，*该组件不支持单独使用* + +**示例** + +```html + + + +``` + +```javascript +export default { + methods:{ + /** + * 点击取消按钮触发 + * @param {Object} done + */ + close(done){ + // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框 + // ... + done() + }, + /** + * 点击确认按钮触发 + * @param {Object} done + * @param {Object} value + */ + confirm(done,value){ + // 输入框的值 + console.log(value) + // TODO 做一些其他的事情，手动执行 done 才会关闭对话框 + // ... + done() + } + } +} +``` + +### uni-popup-dialog 属性说明 + +| 属性名 | 类型 | 默认值 | 说明 | +| :-: | :-: | :-: | :-: | +| type | String |success| 对话框标题主题，可选值： success/warn/info/error | +| mode | String |base | 对话框模式，可选值：base（提示对话框）/input（可输入对话框） | +| title | String |- | 对话框标题 | +| content | String |- | 对话框内容，base模式下生效 | +| value | String\Number |- | 输入框默认值，input模式下生效 | +| placeholder | String |- | 输入框提示文字，input模式下生效 | +| before-close | Boolean |false | 是否拦截取消按钮，如为true，则不会关闭对话框，关闭需要监听 dialog 的 close 事件，并执行 done()| + +#### dialog 事件说明 + +|事件称名 |说明 |返回值 | +|:-: |:-: |:-: | +|close |点击dialog取消按钮触发 |done:执行关闭对话框 | +|confirm |点击dialog确定按钮触发 |done:执行关闭对话框：value：input模式下输入框的值 | + + +### uni-popup-share 分享示例 + +分享示例，不作为最终可使用的组件，将 `uni-popup` 的 `type` 属性改为 `share`，并引入对应组件即可使用 ，*该组件不支持单独使用* + +**示例** + +```html + + + +``` + +### uni-popup-share 属性说明 + +| 属性名| 类型 | 默认值 | 说明 | +| :-: | :-: | :-: | :-: | +| title | String | | 分享弹窗标题 | + +### uni-popup-share 事件说明 + +|事件称名 |说明 |返回值 | +|:-: |:-: |:-: | +|select |选择触发 |e = {item,index}：所选参数,done：执行关闭窗口 | + +**Tips** +- share 分享组件，只是作为一个扩展示例，如果需要修改数据源，请到组件内修改 + +## 如何扩展自己的 uni-popup 弹出层样式？ +`uni-popup` 组件内容是通过 `slot` 插槽的方式去实现的，所以这极大的方便了我们的扩展。 + +现在我们可以在不改动 `uni-popup` 组件主体的情况下，方便的去扩展我们自己的弹出层样式。 + +### 添加自定义类型 +如果要去扩展 `uni-popup`，我们需要把组件*引入本地*，才能去进行扩展。 + +组件放到本地后，在组件目录找到 `popup.js` ，在 `config` 变量中定义自己的类型，key 为当前要定义的类型，value 为弹出类型（top/bottom/center） +我们以 `uni-popup-share` 为例，看如何扩展一个`share` 底部分享的一个 `uni-popup` 子组件，代码参考 `uni-popup-share.vue`。 + +```javascript + +// popup.js +const config = { + // ... + // 分享 key:share 为我们定义的类型 value : 'bottom' 为弹出方向（top/bottom/center） + // 这样配置好之后，我们自定义的弹出层就会从底部弹出 + share:'bottom', +} + +``` + +### 创建扩展组件 + +在组件目录创建文件 ，例 `uni-popup-share/uni-popup-share.vue`，结构与其他组件没有区别。 + +在组件内直接编写样式逻辑即可，如需自定义效果更强，可以通过 props 接受页面参数。 + + +### 与父组件 `uni-popup` 进行通讯 + +组件通讯我们使用了 `provide/inject` ， 具体逻辑我们不需要关心，只要在子组件配置 `inject` ，即可获取父组件方法变量等。 + +```javascript + +// uni-popup-share.vue +export default { + name: 'UniPopupShare', + props: { + title: { + type: String, + default: '分享到' + } + }, + // 直接把下面这一行代码，放到自己的组件内 + inject: ['popup'], + // ... + methons:{ + /** + * 定义的选择事件，选择内容后触发 + */ + select(item, index) { + // 将事件发送到页面，在页面进行监听 + this.$emit('select', { + item, + index + }, () => { + // 延迟操作，执行父组件的close事件，关闭弹出层 + this.popup.close() + }) + }, + /** + * 关闭窗口 + */ + close() { + // 执行父组件的close事件，关闭弹出层 + this.popup.close() + } + } +} +``` + + +### 使用自定义组件 + +通过上面几个步骤 ，我们就可以使用这个组件了，只需要把我们自定义的组件放置到 `uni-popup` 组件内即可 ，指定 `uni-popup` 的 `type` 为我们第一步定义好的 `share` + +```html + + + +``` + +之后就可以按照 `uni-popup` 的使用方式去打开关闭弹出层了。更多细节可以参考 `uni-popup-message` 和 `uni-popup-dialog`。 + + +**Tips** +- 如果扩展组件目录名和组件名不一致，可能不会被 `easycom` 正确引用，请配置`easycom`规则或修改组件名称 + +### 分享你的组件 + +通过组件扩展，你可以扩展出更丰富的弹出层样式，如果您想让更多人使用你定制的组件，或者您有更好的点子或更好的实现方式，欢迎给我们提交 [PR](https://github.com/dcloudio/uni-ui/pulls)，如被采用，会合并到示例中。 + +在使用中如遇到无法解决的问题，请提 [Issues](https://github.com/dcloudio/uni-ui/issues) 给我们。 + diff --git a/uni_modules/uni-transition/changelog.md b/uni_modules/uni-transition/changelog.md index 9274beff24643884fd35ad8e2bafba2efdb00c02..b9b64fe2104fbfb44dee0500095471670b981249 100644 --- a/uni_modules/uni-transition/changelog.md +++ b/uni_modules/uni-transition/changelog.md @@ -1,2 +1,8 @@ +## 1.1.0（2021-04-22） +- 新增 通过方法自定义动画 +- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式 +- 优化 动画触发逻辑，使动画更流畅 +- 优化 支持单独的动画类型 +- 优化 文档示例 ## 1.0.2（2021-02-05） - 调整为uni_modules目录规范 diff --git a/uni_modules/uni-transition/components/uni-transition/createAnimation.js b/uni_modules/uni-transition/components/uni-transition/createAnimation.js new file mode 100644 index 0000000000000000000000000000000000000000..3c5f05e4608efd2520f70bbaf9aea429e2d36ebe --- /dev/null +++ b/uni_modules/uni-transition/components/uni-transition/createAnimation.js @@ -0,0 +1,126 @@ +// const defaultOption = { +// duration: 300, +// timingFunction: 'linear', +// delay: 0, +// transformOrigin: '50% 50% 0' +// } +// #ifdef APP-NVUE +const nvueAnimation = uni.requireNativePlugin('animation') +// #endif +class MPAnimation { + constructor(options, _this) { + this.options = options + this.animation = uni.createAnimation(options) + this.currentStepAnimates = {} + this.next = 0 + this.$ = _this + + } + + _nvuePushAnimates(type, args) { + let aniObj = this.currentStepAnimates[this.next] + let styles = {} + if (!aniObj) { + styles = { + styles: {}, + config: {} + } + } else { + styles = aniObj + } + if (animateTypes1.includes(type)) { + if (!styles.styles.transform) { + styles.styles.transform = '' + } + let unit = '' + if(type === 'rotate'){ + unit = 'deg' + } + styles.styles.transform += `${type}(${args+unit}) ` + } else { + styles.styles[type] = `${args}` + } + this.currentStepAnimates[this.next] = styles + } + _animateRun(styles = {}, config = {}) { + let ref = this.$.$refs['ani'].ref + if (!ref) return + return new Promise((resolve, reject) => { + nvueAnimation.transition(ref, { + styles, + ...config + }, res => { + resolve() + }) + }) + } + + _nvueNextAnimate(animates, step = 0, fn) { + let obj = animates[step] + if (obj) { + let { + styles, + config + } = obj + this._animateRun(styles, config).then(() => { + step += 1 + this._nvueNextAnimate(animates, step, fn) + }) + } else { + this.currentStepAnimates = {} + typeof fn === 'function' && fn() + this.isEnd = true + } + } + + step(config = {}) { + // #ifndef APP-NVUE + this.animation.step(config) + // #endif + // #ifdef APP-NVUE + this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config) + this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin + this.next++ + // #endif + return this + } + + run(fn) { + // #ifndef APP-NVUE + this.$.animationData = this.animation.export() + this.$.timer = setTimeout(() => { + typeof fn === 'function' && fn() + }, this.$.durationTime) + // #endif + // #ifdef APP-NVUE + this.isEnd = false + this._nvueNextAnimate(this.currentStepAnimates, 0, fn) + this.next = 0 + // #endif + } +} + + +const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d', + 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY', + 'translateZ' +] +const animateTypes2 = ['opacity', 'backgroundColor'] +const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom'] +animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => { + MPAnimation.prototype[type] = function(...args) { + // #ifndef APP-NVUE + this.animation[type](...args) + // #endif + // #ifdef APP-NVUE + this._nvuePushAnimates(type, args) + // #endif + return this + } +}) + +export function createAnimation(option, _this) { + if(!_this) return + clearTimeout(_this.timer) + return new MPAnimation(option, _this) +} diff --git a/uni_modules/uni-transition/components/uni-transition/uni-transition.vue b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue index 1161634247e37b5f103754c2fd4711883c3df399..77d9a49968b30c0bc161f2682183a6a053965404 100644 --- a/uni_modules/uni-transition/components/uni-transition/uni-transition.vue +++ b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue @@ -1,280 +1,276 @@ - - - - - + customClass:{ + type: String, + default: '' + } + }, + data() { + return { + isShow: false, + transform: '', + opacity: 1, + animationData: {}, + durationTime: 300, + config: {} + } + }, + watch: { + show: { + handler(newVal) { + if (newVal) { + this.open() + } else { + // 避免上来就执行 close,导致动画错乱 + if (this.isShow) { + this.close() + } + } + }, + immediate: true + } + }, + computed: { + // 生成样式数据 + stylesObject() { + let styles = { + ...this.styles, + 'transition-duration': this.duration / 1000 + 's' + } + let transform = '' + for (let i in styles) { + let line = this.toLine(i) + transform += line + ':' + styles[i] + ';' + } + return transform + }, + // 初始化动画条件 + transformStyles() { + return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject + } + }, + created() { + // 动画默认配置 + this.config = { + duration: this.duration, + timingFunction: 'ease', + transformOrigin: '50% 50%', + delay: 0 + } + this.durationTime = this.duration + }, + methods: { + /** + * ref 触发 初始化动画 + */ + init(obj = {}) { + if (obj.duration) { + this.durationTime = obj.duration + } + this.animation = createAnimation(Object.assign(this.config, obj)) + }, + /** + * 点击组件触发回调 + */ + onClick() { + this.$emit('click', { + detail: this.isShow + }) + }, + /** + * ref 触发 动画分组 + * @param {Object} obj + */ + step(obj, config = {}) { + if (!this.animation) return + for (let i in obj) { + try { + if(typeof obj[i] === 'object'){ + this.animation[i](...obj[i]) + }else{ + this.animation[i](obj[i]) + } + } catch (e) { + console.error(`方法 ${i} 不存在`) + } + } + this.animation.step(config) + return this + }, + /** + * ref 触发 执行动画 + */ + run(fn) { + if (!this.animation) return + this.animation.run(fn) + }, + // 开始过度动画 + open() { + clearTimeout(this.timer) + this.transform = '' + this.isShow = true + let { opacity, transform } = this.styleInit(false) + if (typeof opacity !== 'undefined') { + this.opacity = opacity + } + this.transform = transform + // 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常 + this.$nextTick(() => { + // TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器 + this.timer = setTimeout(() => { + this.animation = createAnimation(this.config, this) + this.tranfromInit(false).step() + this.animation.run() + this.$emit('change', { + detail: this.isShow + }) + }, 20) + }) + }, + // 关闭过度动画 + close(type) { + if (!this.animation) return + this.tranfromInit(true) + .step() + .run(() => { + this.isShow = false + this.animationData = null + this.animation = null + let { opacity, transform } = this.styleInit(false) + this.opacity = opacity || 1 + this.transform = transform + this.$emit('change', { + detail: this.isShow + }) + }) + }, + // 处理动画开始前的默认样式 + styleInit(type) { + let styles = { + transform: '' + } + let buildStyle = (type, mode) => { + if (mode === 'fade') { + styles.opacity = this.animationType(type)[mode] + } else { + styles.transform += this.animationType(type)[mode] + ' ' + } + } + if (typeof this.modeClass === 'string') { + buildStyle(type, this.modeClass) + } else { + this.modeClass.forEach(mode => { + buildStyle(type, mode) + }) + } + return styles + }, + // 处理内置组合动画 + tranfromInit(type) { + let buildTranfrom = (type, mode) => { + let aniNum = null + if (mode === 'fade') { + aniNum = type ? 0 : 1 + } else { + aniNum = type ? '-100%' : '0' + if (mode === 'zoom-in') { + aniNum = type ? 0.8 : 1 + } + if (mode === 'zoom-out') { + aniNum = type ? 1.2 : 1 + } + if (mode === 'slide-right') { + aniNum = type ? '100%' : '0' + } + if (mode === 'slide-bottom') { + aniNum = type ? '100%' : '0' + } + } + this.animation[this.animationMode()[mode]](aniNum) + } + if (typeof this.modeClass === 'string') { + buildTranfrom(type, this.modeClass) + } else { + this.modeClass.forEach(mode => { + buildTranfrom(type, mode) + }) + } + + return this.animation + }, + animationType(type) { + return { + fade: type ? 1 : 0, + 'slide-top': `translateY(${type ? '0' : '-100%'})`, + 'slide-right': `translateX(${type ? '0' : '100%'})`, + 'slide-bottom': `translateY(${type ? '0' : '100%'})`, + 'slide-left': `translateX(${type ? '0' : '-100%'})`, + 'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`, + 'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})` + } + }, + // 内置动画类型与实际动画对应字典 + animationMode() { + return { + fade: 'opacity', + 'slide-top': 'translateY', + 'slide-right': 'translateX', + 'slide-bottom': 'translateY', + 'slide-left': 'translateX', + 'zoom-in': 'scale', + 'zoom-out': 'scale' + } + }, + // 驼峰转中横线 + toLine(name) { + return name.replace(/([A-Z])/g, '-$1').toLowerCase() + } + } +} + + + diff --git a/uni_modules/uni-transition/package.json b/uni_modules/uni-transition/package.json index 368bb85a1d852a5541e8486dd7f98ee6ca7c93a8..c0dca478b11cbbcae421b8576e0b6138ec399ed5 100644 --- a/uni_modules/uni-transition/package.json +++ b/uni_modules/uni-transition/package.json @@ -1,7 +1,7 @@ { "id": "uni-transition", "displayName": "Transition 过渡动画", - "version": "1.0.2", + "version": "1.1.0", "description": "元素的简单过渡动画", "keywords": [ "动画", diff --git a/uni_modules/uni-transition/readme.md b/uni_modules/uni-transition/readme.md index 2809bd00512ea6a93f0b2669f2423c6d87a86978..dbc48fde33aa2d2ec872bea32364d045d1ca9ea9 100644 --- a/uni_modules/uni-transition/readme.md +++ b/uni_modules/uni-transition/readme.md @@ -1,10 +1,21 @@ ## Transition 过渡动画 +> **组件名：uni-transition** > 代码块： `uTransition` -元素的简单过渡动画，组件名：`uni-transition` +元素过渡动画 + +> **注意事项** +> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 +> - 组件需要依赖 `sass` 插件 ，请自行手动安装 +> - rotate 旋转动画不需要填写 deg 单位，在小程序上填写单位动画不会执行 +> - NVUE 下修改宽高动画，不能定位到中心点 +> - 百度小程序下修改宽高 ，可能会影响其他动画，需注意 +> - nvue 不支持 costom-class , 请使用 styles +> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 + ### 安装方式 @@ -19,48 +30,156 @@ ```html -``` -``` javascript -import uniTransition from '@/components/uni-transition/uni-transition.vue' + +``` + +### 样式覆盖 + +**注意：`nvue` 不支持 `custom-class` 属性 ，需要使用 `styles` 属性进行兼容** + +使用 `custom-class` 属性绑定样式，可以自定义 `uni-transition` 的样式 + +```html + + + + +``` + + +如果使用 `styles` 注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red` + +```html + + +``` + +### 自定义动画 +当内置动画类型不能满足需求的时候 ，可以使用 `step()` 和 `run()` 自定义动画,入参以及具体用法参考下方属性说明 + +`init()` 方法可以覆盖默认配置 + + +```html + + + ``` + ## API ### Transition Props |属性名 |类型 |默认值 |说明 | |:-: |:-: |:-: |:-:| -|show |Boolean|false |控制组件显示或隐藏， | -|modeClass |Array |- |过渡动画类型 | -|duration |Number |300 |过渡动画持续时间 | -|styles |Object |- |组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red` | +|show |Boolean|false |控制组件显示或隐藏 | +|mode-class |Array/String |- |内置过渡动画类型 | +|custom-class |String |- |自定义类名 | +|duration |Number |300 |过渡动画持续时间 | +|styles |Object |- |组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red` | -#### modeClass 类型说明 -**格式为** ：`['fade','slide-top']` +#### mode-class 内置过渡动画类型说明 +**格式为** ：`'fade'` 或者 `['fade','slide-top']` |属性名 |说明 | |:-: |:-: | @@ -78,7 +197,211 @@ export default { ### Transition Events -|事件称名 |说明 |返回值 | -|:-: |:-: |:-: | +|事件名 |说明 |返回值 | +|:-: |:-: |:-: | |click |点击组件触发 |- | |change |过渡动画结束时触发 | e = {detail:true} | + +### Transition Methons + +|方法名|说明|参数| +|:-:|:-:|:-:| +|init()|手动初始化配置|Function(OBJECT:config)| +|step()|动画队列|Function(OBJECT:type,OBJECT:config)| +|run()|执行动画|Function(FUNCTION:callback) | + +### init(OBJECT:config) +**通过 ref 调用方法** + +手动设置动画配置，需要在页面渲染完毕后调用 + +```javascript +this.$refs.ani.init({ + duration: 1000, + timingFunction:'ease', + delay:500, + transformOrigin:'left center' +}) +``` + +### step(OBJECT:type,OBJECT:config) 动画队列 +**通过 ref 调用方法** + +调用 `step()` 来表示一组动画完成，`step` 第一个参数可以传入任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。`step` 第二个参数可以传入一个跟 `uni.createAnimation()` 一样的配置参数用于指定当前组动画的配置。 + +Tips +- 第一个参数支持的动画参考下面的 `支持的动画` +- 第二个参数参考下面的 `动画配置`，可省略，如果省略继承`init`的配置 + + +```javascript +this.$refs.ani.step({ + translateX: '100px' +},{ + duration: 1000, + timingFunction:'ease', + delay:500, + transformOrigin:'left center' +}) +``` + +### run(FUNCTION:callback) 执行动画 +**通过 ref 调用方法** + +在执行 `step()` 后，需要调用 `run()` 来运行动画 ，否则动画会一直等待 + +`run()` 方法可以传入一个 `callback` 函数 ，会在所有动画执行完毕后回调 + +```javascript +this.$refs.ani.step({ + translateX: '100px' +}) +this.$refs.ani.run(()=>{ + console.log('动画执行完毕') +}) + +``` + +### 动画配置 +动画配置 ， `init()` 与 `step()` 第二个参数配置相同 ，如果配置`step() `第二个参数，将会覆盖 `init()` 的配置 + +|属性名|值|必填|默认值|说明|平台差异| +|:-:|:-:|:-:|:-:|:-:|:-:| +|duration|Number|否|400|动画持续时间，单位ms|-| +|timingFunction|String|否|"linear"|定义动画的效果|-| +|delay|Number|否|0|动画延迟时间，单位 ms|-| +|needLayout|Boolean|否|false |动画执行是否影响布局|仅 nvue 支持| +|transformOrigin|String |否|"center center"|设置 [transform-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)|-| + + +### timingFunction 属性说明 + +|值|说明|平台差异| +|:-:|:-:|:-:| +|linear|动画从头到尾的速度是相同的|-| +|ease|动画以低速开始，然后加快，在结束前变慢|-| +|ease-in| 动画以低速开始|-| +|ease-in-out| 动画以低速开始和结束|-| +|ease-out|动画以低速结束|-| +|step-start|动画第一帧就跳至结束状态直到结束|nvue不支持| +|step-end|动画一直保持开始状态，最后一帧跳到结束状态|nvue不支持| + +```javascript +// init 配置 +this.$refs.ani.init({ + duration: 1000, + timingFunction:'ease', + delay:500, + transformOrigin:'left center' +}) +// step 配置 +this.$refs.ani.step({ + translateX: '100px' +},{ + duration: 1000, + timingFunction:'ease', + delay:500, + transformOrigin:'left center' +}) +``` + +### 支持的动画 +动画方法 + +如果同一个动画方法有多个值，多个值使用数组分隔 + +```javascript +this.$refs.ani.step({ + width:'100px', + scale: [1.2,0.8], +}) +``` + +**样式：** + +|属性名|值|说明|平台差异| +|:-:|:-:|:-:|:-:| +|opacity|value|透明度，参数范围 0~1|-| +|backgroundColor|color|颜色值|-| +|width|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|-| +|height|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|-| +|top|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持| +|left|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持| +|bottom|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持| +|right|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持| + +```javascript +this.$refs.ani.step({ + opacity: 1, + backgroundColor: '#ff5a5f', + widht:'100px', + height:'50rpx', +}) +``` + +**旋转：** + +旋转属性的值不需要填写单位 + +|属性名|值|说明|平台差异 | +|:-:|:-:|:-:|:-:| +|rotate|deg|deg的范围-180~180，从原点顺时针旋转一个deg角度 |-| +|rotateX|deg|deg的范围-180~180，在X轴旋转一个deg角度 |-| +|rotateY|deg|deg的范围-180~180，在Y轴旋转一个deg角度 |-| +|rotateZ|deg|deg的范围-180~180，在Z轴旋转一个deg角度 |nvue不支持| +|rotate3d|x,y,z,deg| 同 [transform-function rotate3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d()) |nvue不支持| + +```javascript +this.$refs.ani.step({ + rotateX: 45, + rotateY: 45 +}) +``` + +**缩放：** + +|属性名|值|说明|平台差异| +|:-:|:-:|:-: |:-:| +|scale|sx,[sy]|一个参数时，表示在X轴、Y轴同时缩放sx倍数；两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数|-| +|scaleX|sx|在X轴缩放sx倍数|-| +|scaleY|sy|在Y轴缩放sy倍数|-| +|scaleZ|sz|在Z轴缩放sy倍数|nvue不支持| +|scale3d|sx,sy,sz|在X轴缩放sx倍数，在Y轴缩放sy倍数，在Z轴缩放sz倍数|nvue不支持| + +```javascript +this.$refs.ani.step({ + scale: [1.2,0.8] +}) +``` + +**偏移：** + +|属性名|值|说明|平台差异| +|:-:|:-:|:-:|:-:| +|translate|tx,[ty]|一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。|-| +|translateX|tx| 在X轴偏移tx，单位px|-| +|translateY|ty| 在Y轴偏移tx，单位px|-| +|translateZ|tz| 在Z轴偏移tx，单位px|nvue不支持| +|translate3d|tx,ty,tz| 在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px|nvue不支持| + +```javascript +this.$refs.ani.step({ + translateX: '100px' +}) +``` + +**倾斜：** + +|属性名|值|说明|平台差异| +|:-:|:-:|:-:|:-:| +|skew|ax,[ay]|参数范围-180~180；一个参数时，Y轴坐标不变，X轴坐标延顺时针倾斜ax度；两个参数时，分别在X轴倾斜ax度，在Y轴倾斜ay度|nvue不支持| +|skewX|ax| 参数范围-180~180；Y轴坐标不变，X轴坐标延顺时针倾斜ax度|nvue不支持| +|skewY|ay| 参数范围-180~180；X轴坐标不变，Y轴坐标延顺时针倾斜ay度|nvue不支持| + + +**矩阵变形：** + +|属性名|值|说明|平台差异| +|:-:|:-:|:-:|:-:| +|matrix|(a,b,c,d,tx,ty)|同 [transform-function matrix](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix())|nvue不支持| +|matrix3d|同 [transform-function matrix3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d())|nvue不支持| \ No newline at end of file