使用uni-app制作支持小程序，H5及移动端app的个人简历

Posted 2023-05-10

参考技术A         的技术文章已经一年之久没有更新了，一方面是因为自己比较懒且工作忙的时候疲于开发项目，另一方面也是之前的项目并没有运用到新的一些技术栈感觉没什么好记录的，慢慢的从一个热爱前端的小白技术变成了一个接口调用员心里却是有点难受，不过最近辞了职在找新工作，所以简历方面便是必不可少的环节了，如果作为一个前端还要给boss看word简历的话心里多少是有些过意不去的便想到了使用uni-app制作一个可以支持多端的个人简历，下面进入正题

        我花了一晚上时间做的这个简历，基本上没有什么样式，也只是抛砖引玉的给各位提供一些思路，源码的话最后我会传到github上供大家参考，因为个人简历可能只是一个单纯的个人信息的展示，并没有那么多复杂的功能。所以比较简单。我在这里只讲两个问题吧，其他的自己可以去参考源码

问题1：

        当我们的个人简历通过小程序展示给boss的时候联系方式的部分我希望可以有个直接可以点击复制的功能，这样可以方便boss们更快速的联系自己，所以用到了剪贴板功能增加了clipBoard.js。直接引入调用就好没有遇到什么太大的阻碍

问题2：

        大家应该都知道小程序如果想跳转外部网站是做不到的（最多加webview嵌套还要配置域名），所以我针对小程序和H5做了变动在H5上增加了小站跳转部分。大家可以去github上查看源码

附上github地址： 任建堃的github

附上个人简历地址:  任建堃个人简历

最后附上小程序码，大家可以去预览一下，希望各位大神轻喷。小弟在此只是抛砖引玉而已

uni-app关于小程序及app端第三方微信登陆问题

1.第一次做第三方微信登陆，所以在这方面话太多时间了，主要是在获取code的时候感觉头痛，uni-app没有说明如何获取code,后来在网上搜索诸多信息后终于解决了问题

uni-app在app端第三方微信登陆时要获取code再传给后端，后端根据code向微信发送登陆请求：

// #ifdef APP-PLUS
        login() 
            var it=this;
            var  getAppid = plus.runtime.appid;
            console.log(‘app端登陆‘)
            uni.login(
              provider: ‘weixin‘,
              success: function (loginRes) 
                console.log(JSON.stringify(loginRes.authResult));
                uni.showModal(
                    content: JSON.stringify(loginRes.authResult),
                    cancelText: "我再想想",
                    cancelColor: "#999",
                    confirmText: "转让",
                    confirmColor: "#DEC17C",
                    success: function(res) 
                        
                    
                )
              
            );
            var weixinService = null;
            // http://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.getServices
            plus.oauth.getServices(function(services) 
                console.log(312589340656548)
                console.log(services)
                if (services && services.length) 
                    for (var i = 0, len = services.length; i < len; i++) 
                        if (services[i].id === ‘weixin‘) 
                            weixinService = services[i];
                            console.log(‘授权对象‘)
                            console.log(weixinService)
                            break;
                        
                    
                    if (!weixinService) 
                        console.log(‘没有微信登录授权服务‘);
                        return;
                    
                    // http://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.AuthService.authorize
                    weixinService.authorize(function(event)   //此处获取code的关键
                        console.log(event)
                        console.log(event.code,‘这次是真的授权后返回的code‘)
                        it.weixinCode = event.code; //用户换取 access_token 的 code
                        // it.requestLogin();
                        let data=code: it.weixinCode;
                        it.$api.user.login.getWeiXinCode(data).then(function(userInfo) 
                            console.log(‘是否走到这里‘)
                                console.log(‘第三方登录授权‘,it.weixinCode)
                                console.log(‘第三方登录授权1111‘,userInfo)
                                it.$store.commit(‘isLogged‘, true);
                                it.$store.commit(‘user‘, );
                                it.$store.commit(‘user‘, userInfo.data);
                                uni.navigateBack()
                            ).catch(res => 
                            console.log(res)        
                                );
                        
                    , function(error) 
                        console.error(‘authorize fail:‘ + JSON.stringify(error));
                    , 
                        // http://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.AuthOptions
                        appid: getAppid, //开放平台的应用标识。暂时填个假的充数，仅做演示。
                    );
                 else 
                    console.log(‘无可用的登录授权服务‘);
                
            , function(error) 
                console.error(‘getServices fail:‘ + JSON.stringify(error));
            );
        ,
        // #endif

2. 微信小程序登陆方式 ：

// #ifdef MP-WEIXIN
        getUserInfo(v) 
            let vm = this;
            uni.login(
                provider: ‘weixin‘,
                success: function(loginRes) 
                    uni.getUserInfo(
                        success: function(res) 
                            vm.$api.user.login.weChatAppletLogin(loginRes.code,res.encryptedData,res.iv)
                                .then(function(userInfo) 
                                    vm.$store.commit(‘isLogged‘, true);
                                    vm.$store.commit(‘user‘, );
                                    vm.$store.commit(‘user‘, userInfo.data);
                                    uni.navigateBack()
                                ).catch(res => 
                                );
                        ,
                        fail: function(res) 
                            vm.$store.commit(‘isLogged‘, false);
                        
                    );
                ,
                fail: function(res) 
                
            );
        
        // #endif