uni-app入门教程(7)第三方登录和分享

CuterCorley 等级 492 0 0

前言

本文主要介绍了APP开发的两大基本功能,即第三方登录登录和分享:包括登录通用配置,微信小程序和APP的第三方登录方式,和分享到聊天和朋友圈,使用uni-app实现有不同的接口和实现方式。

一、通用配置

因为小程序和APP登录接口不同,需要在前端进行跨端兼容处理,同时微信等平台的小程序一般只支持所属宿主程序的第三方登录,而无法包括其他的常见第三方登录方式,如微博、QQ等,因此需要与APP分开。

1.微信小程序端配置

微信小程序端必须配置appid,需要申请小程序开发者并获取appid及相关秘钥,支持个人开发者。 获取appid后编辑manifest.json,可以选择微信小程序配置完成,也可以选择源码视图填充,示意如下:

"mp-weixin" : {
    "appid" : "appid"
}

可点击https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html查看微信官方文档。

在使用HBuilder提供的测试AppID可能会报错,例如Cannot read property 'forceUpdate' of undefined,此时可以在微信公众平台https://developers.weixin.qq.com/community/welogin?redirect_url=%2Fsandbox中申请沙箱环境测试号的AppID和AppSecret信息,并用于项目测试,就不会再输出错误。

2.APP端配置

APP端支持微信、QQ、微博等多种第三方登录方式,都需要申请对应的开发者并获取对应的appid。 获取对应的appid后,编辑manifest.json,进行可视化操作,选择App模块配置,进行OAuth鉴权配置,选择所需要的登录方式,如QQ、微信等,如下: uni-app入门教程(7)第三方登录和分享

选择对应的登录方式后需要填写AppID等信息。

二、微信小程序第三方登录

1.判断是否登录

在微信小程序登录前需要判断是否登录,此时可以在App.vue中定义,因为App.vue中定义的变量和方法为全局变量和方法,可以在其他页面中可以调用,只需要用global关键字声明即可。

登录的一般原理为: 从本地缓存根据键获取到用户id和随机码等信息,再向服务端请求验证识别是否存在该用户。 随机码是为了提高数据接口的安全性建立的,除此之外也可以使用Redis、MemCache等实现安全保证。

先在App.vue中定义全局的判断是否登录的方法,如下:

<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
    global.isLogin = function() {
        try{
            var suid = uni.getStorageSync('suid');
            var srand = uni.getStorageSync('srand');
        }catch(e){
            //TODO handle the exception
        }
        if(suid == '' || srand == ''){
            return false;
        }
        else{
            return [suid, srand];
        }
    }
</script>

<style>
    /*每个页面公共css */
    .red{
        color:#ff0000;
    }
</style>

再在index.vue中调用全局方法,如下:

<template>
    <view>
        Index...
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
            var res = global.isLogin();
            if(!res){
                uni.showModal({
                    title: '登录提醒',
                    content: '请登录',
                    success:function(){
                        uni.navigateTo({
                            url: '/pages/login'
                        })
                    }
                })
            }
        },
        onShow() {
        },
        onHide() {
        },
        methods: {
        }
    }
</script>

<style>

</style>

同时在pages目录下新建login.vue页面,如下:

<template>
    <view>
        login...
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
        },
        onShow() {
        },
        onHide() {
        },
        methods: {
        }
    }
</script>

<style>

</style>

并将其添加进pages.json中,如下:

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "Uni Index",
                "backgroundColor": "#F0AD4E",
                "navigationBarTextStyle":"black"
            }
        },
        {
            "path": "pages/about/about",
            "style": {
                "navigationBarTitleText": "Uni About"
            }
        },
        {
            "path": "pages/news",
            "style": {
                "navigationBarTitleText": "Uni News",
                "navigationBarBackgroundColor":"#DD524D"
            }
        },
        {
            "path": "pages/login",
            "style": {
                "navigationBarTitleText": "Uni Login",
                "navigationBarBackgroundColor":"#00aaff"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "hello uniapp",
        "navigationBarBackgroundColor": "#ff557f",
        "backgroundColor": "#fffae8"
    },
    "tabBar": {
        "color":"#F0AD4E",
        "selectedColor":"#007AFF",
        "backgroundColor":"#FFFFFF",
        "list": [
            {
                "pagePath":"pages/index/index",
                "iconPath":"static/imgs/index_0.png",
                "selectedIconPath":"static/imgs/index_1.png",
                "text": "首页"
            },
            {
                "pagePath":"pages/about/about",
                "iconPath":"static/imgs/about_0.png",
                "selectedIconPath":"static/imgs/about_1.png",
                "text":"关于我们"
            }
        ]
    },
    "condition": { //模式配置,仅开发期间生效
        "current": 0, //当前激活的模式(list 的索引项)
        "list": [{
                "name": "index", //模式名称
                "path": "pages/index/index", //启动页面,必选
                "query": "interval=4000&autoplay=false" //启动参数,在页面的onLoad函数里面得到。
            },
            {
                "name": "about", //模式名称
                "path": "pages/about/about", //启动页面,必选
                "query": "interval=4000&autoplay=false" //启动参数,在页面的onLoad函数里面得到。
            }
        ]
    }
}

显示: uni-app入门教程(7)第三方登录和分享

显然,获取到了未登录的状态后,跳转到了登录页。

2.登录页面开发

登录需要判断所在平台、进行跨端开发,因此需要进行条件编译,login.vue如下:

<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
        <!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        onLoad() {},
        onShow() {},
        onHide() {},
        methods: {
            getuserinfo: function(res){
                console.log(res)
            }
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(7)第三方登录和分享

可以看到,在成功登录后,会返回用户的相关信息; 在清除缓存并重新编译后,之前的登录状态不存在,需要重新登录。

登录后查看返回值res包含了一些不加密的基础信息,detail属性下面有iv属性,是加密算法的初始向量,可以解密得到信息,还可以作为是否授权登录的判断标准; rawData,不包括敏感信息的原始数据字符串,用于计算签名。 其中不包含openid和session_key等信息,需要进一步获取: 先通过uni.login(OBJECT)获取到code,即用户登录凭证; 再携带code,通过uni.request(OBJECT)获取到openid和session_key。

login.vue如下:

<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
        <!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        onLoad() {},
        onShow() {},
        onHide() {},
        methods: {
            getuserinfo: function(res1) {
                console.log(res1)
                if (!res1.detail.iv) {
                    uni.showToast({
                        title: '您已取消授权,登录失败',
                        icon: "none"
                    })
                    return false;
                }
                uni.login({
                    provider: 'weixin',
                    success: function(res2) {
                        console.log(res2);
                        uni.request({
                            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code='+res2.code+'&grant_type=authorization_code',
                            success:function(res3){
                                // get the openid and seesion key
                                console.log(res3)
                            },
                            fail:function(res4){
                                console.log(re4)
                            }
                        })
                    },
                    fail:function(r){
                        console.log(r)
                    }
                });
            }
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(7)第三方登录和分享

显然,此时获取到了openidsession key。 此外还可以获取unionid,其在满一定条件的情况下才会返回。 获取到了openid和session key后,可以解密iv。 通过微信官方提供的SDK进行解密,可以实现解密的接口,如下: login.vue如下:

<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
        <!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        onLoad() {},
        onShow() {},
        onHide() {},
        methods: {
            getuserinfo: function(res1) {
                console.log(res1)
                if (!res1.detail.iv) {
                    uni.showToast({
                        title: '您已取消授权,登录失败',
                        icon: "none"
                    })
                    return false;
                }
                uni.login({
                    provider: 'weixin',
                    success: function(res2) {
                        console.log(res2);
                        uni.request({
                            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code='+res2.code+'&grant_type=authorization_code',
                            success:function(res3){
                                // get the openid and seesion key
                                console.log(res3)
                                // decrypt
                                uni.request({
                                    method: 'POST',
                                    url: 'https://hoa.hcoder.net/xcxencode/',
                                    header: {'content-type':'application/x-www-form-urlencoded'},
                                    data: {
                                        appid: 'wxd3d4ee5ed8017903',
                                        sessionKey: res3.data.session_key,
                                        iv: res1.detail.iv,
                                        encryptedData: res1.detail.encryptedData
                                    },
                                    success:function(res4){
                                        console.log(res4)
                                    }
                                })
                            },
                            fail:function(res5){
                                console.log(re5)
                            }
                        })
                    },
                    fail:function(r){
                        console.log(r)
                    }
                });
            }
        }
    }
</script>

<style>

</style>

小程序登录时,可以设置选择携带手机号。 从之前button组件的open-type属性中可以发现,getPhoneNumber属性可以获取用户手机号,可以从@getphonenumber回调中获取到用户信息。

三、APP第三方登录

实现APP登录也是通过条件编译实现。

login.vue如下:

<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <button type="primary" @click="appWxLoin" withCredentials="true">用微信登录</button>
        <!-- #endif -->
        <button style="margin-top:50px;">手机号码登录</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        onLoad() {},
        onShow() {},
        onHide() {},
        methods: {
            // miniprogram
            getuserinfo: function(res1) {
                console.log(res1)
                if (!res1.detail.iv) {
                    uni.showToast({
                        title: '您已取消授权,登录失败',
                        icon: "none"
                    })
                    return false;
                }
                uni.login({
                    provider: 'weixin',
                    success: function(res2) {
                        console.log(res2);
                        uni.request({
                            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code=' +
                                res2.code + '&grant_type=authorization_code',
                            success: function(res3) {
                                // get the openid and seesion key
                                console.log(res3)
                                // decrypt
                                uni.request({
                                    method: 'POST',
                                    url: 'https://hoa.hcoder.net/xcxencode/',
                                    header: {
                                        'content-type': 'application/x-www-form-urlencoded'
                                    },
                                    data: {
                                        appid: 'wxd3d4ee5ed8017903',
                                        sessionKey: res3.data.session_key,
                                        iv: res1.detail.iv,
                                        encryptedData: res1.detail.encryptedData
                                    },
                                    success: function(res4) {
                                        console.log(res4)
                                    }
                                })
                            },
                            fail: function(res5) {
                                console.log(re5)
                            }
                        })
                    },
                    fail: function(r) {
                        console.log(r)
                    }
                });
            },
            appWxLoin: function(){
                console.log('login...')
            }
        }
    }
</script>

<style>

</style>

此时不需要open-type等属性,只需要进行事件绑定就可以。

显示: uni-app入门教程(7)第三方登录和分享

手机端显示: uni-app入门教程(7)第三方登录和分享

显然,此时实现了条件编译,在不同的设备显示不同的按钮; 同时手机端点击时,控制台也输出信息。

先实现登录,需要获取服务商,判断是否安装微信,如果已安装则申请登录验证,如下:

<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <button type="primary" @click="appWxLogin" withCredentials="true">用微信登录</button>
        <!-- #endif -->
        <button style="margin-top:50px;">手机号码登录</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        onLoad() {},
        onShow() {},
        onHide() {},
        methods: {
            // miniprogram
            getuserinfo: function(res1) {
                console.log(res1)
                if (!res1.detail.iv) {
                    uni.showToast({
                        title: '您已取消授权,登录失败',
                        icon: "none"
                    })
                    return false;
                }
                uni.login({
                    provider: 'weixin',
                    success: function(res2) {
                        console.log(res2);
                        uni.request({
                            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code=' +
                                res2.code + '&grant_type=authorization_code',
                            success: function(res3) {
                                // get the openid and seesion key
                                console.log(res3)
                                // decrypt
                                uni.request({
                                    method: 'POST',
                                    url: 'https://hoa.hcoder.net/xcxencode/',
                                    header: {
                                        'content-type': 'application/x-www-form-urlencoded'
                                    },
                                    data: {
                                        appid: 'wxd3d4ee5ed8017903',
                                        sessionKey: res3.data.session_key,
                                        iv: res1.detail.iv,
                                        encryptedData: res1.detail.encryptedData
                                    },
                                    success: function(res4) {
                                        console.log(res4)
                                    }
                                })
                            },
                            fail: function(res5) {
                                console.log(re5)
                            }
                        })
                    },
                    fail: function(r) {
                        console.log(r)
                    }
                });
            },
            appWxLogin: function() {
                console.log('login...');
                uni.getProvider({
                    service: 'oauth',
                    success: function(res) {
                        console.log(res.provider)
                        if (~res.provider.indexOf('weixin')) {
                            uni.login({
                                provider: 'weixin',
                                success: function(loginRes) {
                                    console.log(JSON.stringify(loginRes));
                                    uni.getUserInfo({
                                        provider: 'weixin',
                                        success: function(infoRes) {
                                            console.log(JSON.stringify(infoRes));
                                            console.log('用户昵称为:' + infoRes.userInfo.nickName);
                                        }
                                    });
                                }
                            });
                        }
                    }
                });
            }
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(7)第三方登录和分享

手机端显示: uni-app入门教程(7)第三方登录和分享

显然,实现了在APP端调用微信登录; 登录后,输出了相应的信息。

四、分享接口

分享是一个很重要的功能。

1.小程序分享

小程序只支持分享到聊天界面(包括微信好友和微信群),不支持分享到朋友圈,是使用onShareAppMessage生命周期实现的。

index.vue如下:

<template>
    <view>
        Index...
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
            var res = global.isLogin();
            if(!res){
                uni.showModal({
                    title: '登录提醒',
                    content: '请登录',
                    success:function(){
                        uni.navigateTo({
                            url: '/pages/login'
                        })
                    }
                })
            }
        },
        onShow() {
        },
        onHide() {
        },
        onShareAppMessage:function(){
            return {
                title: 'Share test...',
                path: 'pages/index/index'
            }
        },
        methods: {
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(7)第三方登录和分享

可以看到,实现了分享功能。

2.APP分享

APP中要实现分享,需要在manifest.json中进行配置,如下: uni-app入门教程(7)第三方登录和分享

先实现分享纯文字,index.vue如下:

<template>
    <view>
        <!-- #ifdef APP-PLUS -->
        <button type="primary" @click="share">点击分享</button>
        <!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
        },
        onShow() {
        },
        onHide() {
        },
        onShareAppMessage:function(){
            return {
                title: 'Share test...',
                path: 'pages/index/index'
            }
        },
        methods: {
            share: function(){
                uni.share({
                    provider: "weixin",
                    scene: "WXSceneSession",
                    type: 1,
                    summary: "我正在参加CSDN年度博客之星活动,请点击链接 https://bss.csdn.net/m/topic/blog_star2020/detail?username=cufeecr 投一票吧,先在此谢过啦!!",
                    success: function (res) {
                        console.log("success:" + JSON.stringify(res));
                    },
                    fail: function (err) {
                        console.log("fail:" + JSON.stringify(err));
                    }
                });
            }
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(7)第三方登录和分享

手机端显示: uni-app入门教程(7)第三方登录和分享

显然,控制台输出了分享成功的信息; 同时,APP成功调用了微信分享。

再实现分享图文,如下:

<template>
    <view>
        <!-- #ifdef APP-PLUS -->
        <button type="primary" @click="share">点击分享</button>
        <!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
        },
        onShow() {
        },
        onHide() {
        },
        onShareAppMessage:function(){
            return {
                title: 'Share test...',
                path: 'pages/index/index'
            }
        },
        methods: {
            share: function(){
                uni.share({
                    provider: "weixin",
                    scene: "WXSceneSession",
                    type: 0,
                    href: "https://bss.csdn.net/m/topic/blog_star2020/detail?username=cufeecr",
                    title: "cufeecr年度博客之星评选",
                    summary: "我正在参加CSDN年度博客之星活动,请点击链接 https://bss.csdn.net/m/topic/blog_star2020/detail?username=cufeecr 投一票吧,先在此谢过啦!!",
                    imageUrl: "https://img-blog.csdnimg.cn/20210112093810423.png",
                    success: function (res) {
                        console.log("success:" + JSON.stringify(res));
                    },
                    fail: function (err) {
                        console.log("fail:" + JSON.stringify(err));
                    }
                });
            }
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(7)第三方登录和分享

手机端显示: uni-app入门教程(7)第三方登录和分享

显然,实现了分享图文到微信好友或微信群。

还可以分享到微信朋友圈,如下:

<template>
    <view>
        <!-- #ifdef APP-PLUS -->
        <button type="primary" @click="share">点击分享</button>
        <!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
        },
        onShow() {
        },
        onHide() {
        },
        onShareAppMessage:function(){
            return {
                title: 'Share test...',
                path: 'pages/index/index'
            }
        },
        methods: {
            share: function(){
                uni.share({
                    provider: "weixin",
                    scene: "WXSenceTimeline",
                    type: 2,
                    imageUrl: "https://img-blog.csdnimg.cn/20210112093810423.png",
                    success: function (res) {
                        console.log("success:" + JSON.stringify(res));
                    },
                    fail: function (err) {
                        console.log("fail:" + JSON.stringify(err));
                    }
                });
            }
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(7)第三方登录和分享

手机端显示: uni-app入门教程(7)第三方登录和分享

已经实现了分享消息到朋友圈。

总结

第三方登录和分享是APP和小程序的基本功能,对于APP和小程序有不同的实现方式,相比较而言,APP实现更简单,都是其他功能的基础和起步。

本文原文首发来自博客专栏移动应用开发,由本人转发至https://www.helloworld.net/p/JRolioRhkoCbB,其他平台均属侵权,可点击https://blog.csdn.net/CUFEECR/article/details/112537377查看原文,也可点击https://blog.csdn.net/CUFEECR浏览更多优质原创内容。

收藏
评论区

相关推荐

Swift 常见面试题解
基础 1、class 和 struct 的区别 2、不通过继承,代码复用(共享)的方式有哪些 3、Set 独有的方法有哪些? 4、实现一个 min 函数,返回两个元素较小的元素 5、map、filter、reduce 的作用 6、map 与 flatmap 的区别 7、什么是 copy on write 8、如何获取当前代码的函
Zip和7-zip谁更强,如何选择?
Zip和7zip谁更强,如何选择? 一. 7z rar zip之间的区别 mysql 7z一般对应的软件是7zip zip对应的是winzip rar对应的 winrar 只不过现在这几个软件基本互相支持。 7z压缩比率大些。zip次之,压缩比率越大,压缩的越小哦 zip格式比较常见,支持泛围广。windows操作系统不装任选第三方软件也
Android经典面试题,也可以提升综合能力
基础问题相关 1、接口的意义百度 2、抽象类的意义百度 3、内部类的作用乐视 4、Java 虚拟机的特性百度乐视 5、哪些情况下的对象会被垃圾回收机制处理掉美团小米 6、进程和线程的区别猎豹美团 7、java中和equals和hashCode的区别乐视 8、HashMap的实现原理美团 9、stringst
uni-app实战之社区交友APP(1)项目介绍和环境搭建
如需查看本项目实际运行效果,可点击uniapp实战之社区交友APP(1)项目介绍和环境搭建(https://blog.csdn.net/CUFEECR/article/details/112793245)(免费试读)进行浏览。 如需本项目完整前端uniapp代码和资源文件,可以点击https://download.csdn.net/downloa
微信小程序 - 路由实践
欢迎来到我博客阅读:1\. 前言在微信小程序由一个 App()实例,和众多Page()组成。而在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了所有页面,然后提供了以下 API 来进行路由之间的跳转:1. wx.navigateTo2. wx.redirectTo3. wx.navigateBack4.
python刷题-圆的面积
问题描述给定圆的半径r,求圆的面积。 输入格式输入包含一个整数r,表示圆的半径。 输出格式输出一行,包含一个实数,四舍五入保留小数点后7位,表示圆的面积。说明:在本题中,输入是一个整数,但是输出是一个实数。对于实数输出的问题,请一定看清楚实数输出的要求,比如本题中要求保留小数点后7位,则你的程序必须严格的输出7位小数,输出过多或者过少的小数位数都是不
uni-app入门教程(1)uni-app简介、部署和目录结构
@toc 前言本文主要介绍了uniapp的基本情况,并引导快速创建和运行第一个uniapp项目,同时对项目的目录结构和代码规范进行详细说明,适合uniapp零基础初学者。 一、uniapp介绍uniapp是DCloud官方推出的重要产品,是一个使用Vue.js开发跨平台应用的前端框架,官网是。开发者通过编写一套Vue.js代码,即可
uni-app入门教程(2)页面样式、配置文件和生命周期
前言本文先介绍uniapp的页面样式和布局,包括尺寸单位、样式导入、内联样式和选择器等;再介绍两个配置文件,即pages.json和manifest.json的配置项和基本使用;最后简要介绍了生命周期的基本使用。 一、页面样式与布局 1.尺寸单位uniapp框架目前仅支持长度单位px和%。与传统web页面不同,px是相对于基准宽度
uni-app入门教程(7)第三方登录和分享
前言本文主要介绍了APP开发的两大基本功能,即第三方登录登录和分享:包括登录通用配置,微信小程序和APP的第三方登录方式,和分享到聊天和朋友圈,使用uniapp实现有不同的接口和实现方式。 一、通用配置因为小程序和APP登录接口不同,需要在前端进行跨端兼容处理,同时微信等平台的小程序一般只支持所属宿主程序的第三方登录,而无法包括其他的
uni-app入门教程(9)字体库、自定义组件、打包和新闻实战
# 前言本文主要介绍了4方面内容:在uni-app项目中使用iconfont提供的图标字体库,美化页面;实现自定义组件,并且可以自定义属性和实现父子组件之间的消息传递;微信小程序预览和真机测试,APP端云打包和本地打包;新闻列表和详情实战练习。# 一、使用iconfont字体库uni-app中可以使用**iconfont**()提供的图标字体。大致过程如下:
uni-app开发 经验和技巧总结
## 前言uni-app 是一个基于 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等**多个平台**。在开发过程中可能会用到一些经验和技巧,可以加速开发,归纳如下。## 1.自定义组件模板在开发时,很多情况下需要自定义组件,在自
关于根据颜色刷选图像内容的问题
在CSDN本人博文《OpenCVPython图像处理:用inRange刷选图像中指定颜色对象案例》(请点击文章底部最下方的“阅读原文”跳转CSDN阅读原文)中介绍了根据颜色刷选图像内容相关的概念及实现,介绍了通过使用inRange在HSV颜色空间中识别制定颜色的图像内容,文中概要介绍了HSV颜色空间中进行制定颜色对象识别的要点,使用的inRange函数的语法
某站App签名算法解析(一)
一、目标我们来分析某站 App的sign签名算法,先搜索一下 游戏 ,抓包结果: 二、步骤 这个sign依然是32位的字符串都9020年了,这种规模用户的App应该是不会裸奔在java层了,我们就直接一点,在so里面搜索 sign可惜没有结果…… 藏起来的东西一定是重要的东西so层导出函数给java层调用,有两种方法,一种是静态注册,直接会体现在so的导出表
SCF构建小型服务端并结合uni-app
使用腾讯云SCF构建小型服务端并结合uniapp()小程序我们这里手写了一个nodejs环境下的用户体系使用了之前写的一个数据库连接插件dmhqmysqlpool比较垃圾 凑合用文档地址为 也使用了md5 npm install jsmd5这里使用邮箱发送验证码先在本地写好 再上传云函数 配置数据库连接安装 npm install dmhsqmysqlpo
gcc版本升级方式 | 一盏离愁孤灯伫立在窗口
>yum -y install centos-release-scl yum -y install devtoolset-7-gcc devtoolset-7-gcc-c++ devtoolset-7-binutils scl enable devtoo