分类 uniapp 下的文章

uniapp中引入 iconfont


先到 https://www.iconfont.cn/ 添加项目,加入想要的图标

下载图标

在项目下添加common公共文件

把解压的iconfont.css 文件放在common目录下

在common目录下创建font文件,把加压的除了iconfont.css 文件放进去(不要放文件夹)

在APP.vue 中引入iconfont.css(这样就不用在页面中单独引入了)

<style>
  import "~@/common/iconfont.css";
</style>

期间注意iconfont.css 文件,在路径前面都加上 ~@/common/font/ 处理后效果如下

@font-face {font-family: "iconfont";
  src: url('~@/common/font/iconfont.eot?t=1595143705861'); /* IE9 */
  src: url('~@/common/font/iconfont.eot?t=1595143705861#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,base64编码文件') format('woff2'),
  url('~@/common/font/iconfont.woff?t=1595143705861') format('woff'),
  url('~@/common/font/iconfont.ttf?t=1595143705861') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/common/font/iconfont.svg?t=1595143705861#iconfont') format('svg'); /* iOS 4.1- */
}

uniapp 跳转不到首页


uniapp 跳转不到首页可能有两种情况
第一种,可能写错
第二种
我们先看一下
uniapp有三种跳转形式
1种是标签跳转

<navigator url="/pages/index/index"> 跳转到首页面 </navigator>

2种是脚本导航

uni.navigateTo({
    url:"/pages/index/index"
})

3种就是

uni.switchTab({
    url:"/pages/index/index
})

有三种,标签一种,脚本一种,有什么不同呢

uni.switchTab只能有用选项卡跳转,什么意识呢,只有配置选项卡的页面才能也只能使用这个进行跳转

如果你没有写错,那就是就是遇到上面这种情况了


uniapp swiper 自身切换,条件不满足则回退


<swiper class="swiper-box" :autoplay="false" :current="current" @change="swiperChange">
    <swiper-item class="swiper-box-item" v-for="(list,n) in questionList" :data-current="n">

变化current 值可以切换

change会自动切换,
但在change里面更改current值可能不改变
var index = e.target.current || e.detail.current;
thisApp.current = index - 1;

what???

后来我才发现
最开始current默认为1,变化值为1时,它就不切换了
就是为什么呢?
当第一个页面切换到第2时,判断不成立,又把current的值切换成index-1,这样导致current的值就没有变化,这样就没有切换,但真实的已经被切换了。

后面就这样,把值变化一下又变化回来,但中间需要延迟才能解决
thisApp.current = index;
thisApp.current = index - 1;


uniapp 用微信进行第三方登录


{"errcode":40001,"errmsg":"invalid credential, access_token is invalid or not latest, hints: [ req_id: SiLDHzyFe-4YxG9a ]"}

这个错误提示很明显吧,提示说token 错误或失效

我研究了研究,没问题呀
得到openid 和 access_token这两个值,就判断用户是否真的登录了,这两个值也是立马得到立马拿去验证了,不会吧
地址:

https://api.weixin.qq.com/sns/auth

处理:

$params = "access_token=".$access_token."&openid=".$openid."&lang=zh_CN";
        $url = "https://api.weixin.qq.com/sns/auth?".$params;

应该也没有问题呀!
那问题是出在哪呢!这可急死人了,找了一大堆
改了地址:https://api.weixin.qq.com/sns/userinfo(获取用户详细信息)
其实都一样的,我都拿到了openid,只需要验证一下就好了

最后忙了一个下午,才发现,我是封装了一个办法,把$access_token,$openid这两个参数传反了

最后附上代码
api代码(PHP)

public static function weixinUserCheck($openid,$access_token){

    $params = "access_token=".$access_token."&openid=".$openid."&lang=zh_CN";
    $url = "https://api.weixin.qq.com/sns/auth?".$params;

    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true) ;
    curl_setopt($curl, CURLOPT_BINARYTRANSFER, true) ;
    curl_setopt($curl, CURLINFO_HEADER_OUT, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
    // 执行
    $data = curl_exec($curl);
    curl_close($curl);

    return json_decode($data,true);
}

app端代码

getuserinfoh5appwx: function(){
    let thisApp = this;
    uni.showLoading({
        title: '数据加载中',
        mask: false
    });
    uni.login({
        success:function(loginRes){
            console.log(1,loginRes);
            
            uni.getUserInfo({
                success:function(res){
                     
                     let user = res.userInfo;
                     let data = {};
                     
                     data.avatar = user.avatarUrl;
                     data.name = user.nickName;
                     data.sex = user.gender;
                     data.access_token = loginRes.authResult.access_token;
                     data.openid = loginRes.authResult.openid;
                     data.appToken = "weixinApp";
                     
                     util.request('login',function(user){
                        thisApp.$Storage.setSelfUser(user,function(){
                            uni.hideLoading();
                            uni.switchTab({
                                url: '/pages/person/person'
                            });
                        });
                    },'post',data);
                }
            })
            
        },
    });
},