公司上班工作日志

最新推荐文章于 2024-09-26 01:42:12 发布

tanxiaomi

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量90

点赞数

文章标签：开发语言 javascript

本文链接：https://blog.csdn.net/lfeishumomol/article/details/130441261

版权

最近刚开始实习,入手的是公司的php(lavarel)项目 + uniapp(H5,微信小程序,APP端)的项目,最近刚刚完结,记录一下。

解决真机APP中iconfont不显示的问题

问题：iconfont图标在H5里是正常显示了，但是当在真机app上调试时却发现icon显示不成功。

原因是App 端是file协议

/* #ifdef APP-PLUS */
@font-face {
    font-family: 'iconfont';
    src: url('https://at.alicdn.com/t/font_1729183_8611dvcnqyf.ttf') format('truetype');
}
/* #endif */
/* #ifndef APP-PLUS */
@font-face {
    font-family: 'iconfont';
    src: url('//at.alicdn.com/t/font_1729183_8611dvcnqyf.ttf') format('truetype');
}
/* #endif */

H5端微信开发平台授权

步骤1

通过用户输入的手机号码发送验证码,这个时候先存入后端传过来的 key 用来对应验证码教师端需要携带from:1

步骤2

根据验证码和 key 获取获取学校

步骤3

情况1:数据库中还没有微信开放平台授权的记录:

通过学校,mobile,key,code 获得cache_id ,前往后端的登录接口,当h5 所在的地址是因为开放平台对应的位置即在cookie 中种下 token,通过document.cookie 拿到,在请求头中携带即可

        getThirdOauth(mode) {
            // #ifdef H5
            let reg = /^.*?\/#\//
            let str = window.location.href
            let route = str.match(reg)['0']

            if (this.from == 1) {
                route += 'pagesTeacher/index/index'
            }
            
            var authurl = 'https://xxxxx/' + 'api/wechat/' +                                        uni.getStorageSync('school_id') +
                '/' + uni.getStorageSync('cache_id') + '?callback=' +
                encodeURIComponent(str.match(reg)['0'])
            console.log(authurl);
            window.location.href = authurl
            // #endif
        },

情况2:数据库已经有了微信开放平台授权的记录:

通过学校,mobile,key,code 获得 token,存入本地,在请求头中携带即可

微信小程序登录

当前版本微信小程序需要点击特定的按钮才能弹出手机号码授权窗口

// 获取 code
uni.getUserInfo({
    provider: 'weixin',
    success: (res) => {
        console.log(res);
        uni.setStorageSync('iv', res.iv)
        uni.setStorageSync('encryptedData', res.encryptedData)
    }
})

<button class="wechatBtn" @click="getUserInfo" type="primary" open-type="getPhoneNumber"          @getphonenumber="getPhoneNumber">
    <image class="wxImg" src="../../../static/images/weChat.png" mode="aspectFill"></image>一键获取手机号码
</button>

通过在页面刚加载的时候通过getUserInfo获取到的code 在后台用appid 和 appsecrept 换取换取到 openId 和 session_key (openId 可以用于消息推送之类的操作),并且后端返回一个cache_id 用来验证身份，注意getUserInfo 获取到的iv,和encryptedData 主要是头像和名字等信息,第三步用得上
通过用户触发getphonenumber 获取到encryptedData和iv(手机号码信息)，再通过 cache_id,session_key，encryptedData，iv 换取到用户手机号
通过cache_id(验证客户端身份),iv,和encryptedData(头像和名字信息),school_id,mobile,from(1为教师端,0为家长端) 获取token存入本地,在请求头中携带即可

App端

步骤1

通过uni.login 弹出微信第三方授权窗口(当授权过一次后,不再弹窗,立刻获取)获取用户信息

uni.login({
    provider: 'weixin', //使用微信登录
    success: (loginRes) => {
        let authData = loginRes.authResult
        this.access_token = authData.access_token
        this.expires_in = authData.expires_in
        this.openid = authData.openid
        this.unionid = authData.unionid
        console.log(authData);
        console.log('access_token', this.access_token);
    },
    fail: (err) => {
        // console.log(err);
        uni.showToast({
            icon: 'none',
            title: '用户取消授权,请授权后登录'
        });
    }
});