首页 › uni-app论坛 › uni-app学习（二）

扬升 發表於 2019-6-15 22:04:00

uni-app学习（二）

<h1 id="1-uni-app学习二">1. uni-app学习（二）</h1>
<h2 id="11-好用css记录">1.1. 好用css记录</h2>
<ol>
<li>一定透明度的背景色<code>background: rgba(255,255,255,.6);</code></li>
</ol>
<h2 id="12-好用的代码段">1.2. 好用的代码段</h2>
<ol>
<li>store（用户登录）</li>
</ol>
<pre><code>export default {
        state: {
                hasLogin: false, //登陆状态
                loginProvider: "", //登陆方式 如 微信
                openid: null, //应用id
                address: {}, //收货地址
                userinfo: {
                        nickName: "未登录",
                        headimg: "../../static/image/logo.png",
                        user_id: "123",
                        individuality: "爱你一万年",
                        address: "北京市西城区中南海大院1号",
                        sex: "男",
                        area: "北京-北京-东城区"
                } //用户信息
        },
        getters: {
                userinfo(state) {
                        return state.userinfo;
                },
                login(state) {
                        return state.hasLogin;
                },
                address(state) {
                        return state.address;
                }
        },
        mutations: {
                login(state, provider) {
                        state.hasLogin = true;
                        state.loginProvider = provider;
                },
                logout(state) {
                        state.hasLogin = false
                        state.openid = null
                },
                setOpenid(state, openid) {
                        state.openid = openid
                },
                setAddress(state, address) {
                        state.address = address;
                },
                setUserinfo(state, userinfo) {
                        state.userinfo = userinfo;
                }
        },
        actions: {
                isLogin: async function(context) {
                        return await new Promise((resolve, reject) =&gt; {
                                var hasLogin = context.state.hasLogin;
                                console.log(context)
                                if (!hasLogin) {
                                        uni.showModal({
                                                title: "您还未登陆,立即登陆?",
                                                content: "请登陆后进行访问",
                                                success(e) {
                                                        if (e.confirm) {
                                                                //登陆
                                                                uni.navigateTo({
                                                                        url: '../login/login'
                                                                })
                                                        } else {
                                                                context.commit('logout', "退出")
                                                                console.log(context.state)
                                                                console.log("放弃登陆")
                                                        }
                                                }
                                        })
                                        resolve(false)
                                } else {
                                        resolve(true)
                                }
                        })

                }
        }
}

</code></pre>
<ol start="2">
<li>窗口宽高</li>
</ol>
<pre><code>export default{
                state: {
                        screen:{
                                mode:true,//窗口宽度比高度 长
                                height:0,//窗口高度
                                width:0,//窗口宽度
                        }
                },getters:{
                        screen(state){
                                        return state.screen;
                        }
                },mutations: {
                        screen(state,screen){
                                var width=screen.width || 720;
                                var height=screen.height || 1440;
                                var mode=true;
                                if(width&lt;height){
                                        mode=false;
                                }
                                state.screen={
                                        mode,
                                        width,
                                        height
                                };
                        }
                       
                },actions: {

                }
}
</code></pre>
<pre><code>// 监听窗口宽高变化
(function screenListener(){
        uni.onWindowResize((res) =&gt; {
                that.$store.commit('screen',{width:res.size.windowWidth,height:res.size.windowHeight});
//                                         console.log('变化后的窗口宽度=' + res.size.windowWidth)
//                                         console.log('变化后的窗口高度=' + res.size.windowHeight)
})
})()
</code></pre>
<ol start="3">
<li>store汇总 <code>index.js</code></li>
</ol>
<pre><code>import Vue from 'vue'
import Vuex from 'vuex'
import user from "./store.js"
import win from "./win.js"
Vue.use(Vuex)

const store = new Vuex.Store({
          modules:{
                   user:user,
                   win:win
                  
      }
})

export default store

</code></pre>
<h2 id="13-storage封装">1.3. storage封装</h2>
<pre><code>var Storage={
        /**
       * 异步存入缓存 可对象可数组
       * k                 string                                 键
       * val                 array|object|string        缓存的内容
       * expires        int                                        有效期
       */
        set(k,val,expires){
                var type= typeof val;
                var expires=expires || 300;
                return uni.setStorage({key:k,data:{data:val,expires:expires+(Date.parse(new Date())/1000),type:type},success: function () {
                        console.log('保存成功')
                }})
        },get(k,Func=function(){}){
                try{
                        uni.getStorage({key: k,
                        success: function (res) {
                                var data=res.data;
                                if(data.expires){
                                        if(data.expires&gt; (Date.parse(new Date())/1000)){
                                                Func(data.data)
                                                return data.data;
                                        }
                                        // uni.removeStorage(k);
                                        try {
                                                uni.removeStorage(k);
                                                } catch (e) {
                                                                // error
                                        }
                                }
                        }})
                       
                }catch(e){
                        console.log(e)
                        return false;
                        //TODO handle the exception
                }
                        return false;
               
        },remove(k){
                uni.removeStorage(k);
        },reset(){
                // 获取本地说有缓存信息 删除过期的，超长的，净化系统
                uni.getStorageInfo({       
                          success: function (res) {
                                console.log(res.keys);
                                console.log(res.currentSize);
                                console.log(res.limitSize);
                          }
                        });       
        }
}

var Sync={
        set(k,val,expires){
                var expires=expires || 300;
                var type= typeof val;
                if(type==='object'){
                        val =JSON.stringify(val)
                }
                return uni.setStorageSync(k,{data:val,expires:expires+(Date.parse(new Date())/1000),type:type})
        },get(k){
                try{
                        var data= uni.getStorageSync(k) || {};
                        // console.log(data)
                        if(data.expires){
                                if(data.expires&gt; (Date.parse(new Date())/1000)){
                                        if(data.type==='object'){
                                                returnJSON.parse(data.data)
                                        }
                                        return data.data;
                                }
                                uni.removeStorageSync(k);
                                try {
                                                        uni.removeStorageSync(k);
                                        } catch (e) {
                                                        // error
                                        }
                        }
                }catch(e){
                        console.log(e)
                        return false;
                        //TODO handle the exception
                }
       
                        return false;
               
        },reset(){
                // 获取本地说有缓存信息 删除过期的，超长的，净化系统
                try {
                        const res = uni.getStorageInfoSync();
                        console.log(res.keys);
                        console.log(res.currentSize);
                        console.log(res.limitSize);
                } catch (e) {
                        // error
                }
        }
}
export default {
    // CusBASE64: __BASE64,
        set:Storage.set,//异步
        get:Storage.get,
        reset:Storage.reset,
        setSync:Sync.set,//同步
        getSync:Sync.get,
        resetSync:Sync.reset
        // encoder:base64decode
}
</code></pre>
<p>引入</p>
<pre><code>import Storage from '@/common/utils/Storage.js'
</code></pre>
<h2 id="14-节点布局交叉状态">1.4. 节点布局交叉状态</h2>
<ol>
<li>uni.createIntersectionObserver，地址</li>
<li>作用：可以用来推断某些节点是否可以被用户看见、有多大比例可以被用户看见</li>
</ol>
<h2 id="15-tabbar操作">1.5. TabBar操作</h2>
<ol>
<li>uni.hideTabBar()</li>
<li>作用：隐藏TabBar，还有很多TabBar相关操作，参看这里</li>
<li>可以进行红点显示，角标显示等等</li>
</ol>
<h2 id="16-uni的节点选择器">1.6. uni的节点选择器</h2>
<ol>
<li>uni.createSelectorQuery()，可以用来选择特定节点进行操作，参看这里，用于懒加载图片</li>
<li>例子</li>
</ol>
<pre><code>uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images) =&gt; {
                                        images.forEach((image, index) =&gt; {
                                                if (image.top &lt;= this.windowHeight) {
                                                        this.list.show = true;
                                                }
                                        })
                                }).exec()
</code></pre>
<ol start="3">
<li>当然图片自身有个属性可以设置懒加载，只是有一定局限性，参考这里，使用<code>lazy-load</code>属性为true能达到同样的效果</li>
</ol>
<h2 id="17-布局上遇到的问题">1.7. 布局上遇到的问题</h2>
<ol>
<li>想实现类似饿了吗的悬浮框效果，即上移过程中，中间的某个组件框到顶部后不再上移，呈类似置顶效果</li>
<li>参考这个</li>
</ol>


</div>
<div id="MySignature" role="contentinfo">
    <div class="autograph">
<p> <span style="display: none"> 如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【<strong>推荐</strong>】按钮。<br>
    </span> 如果，您希望更容易地发现我的新博客，不妨点击一下【<strong>关注我</strong>】。</p>
</div>
<p>我的写作热情也离不开您的肯定支持，感谢您的阅读，我是【<strong>老梁</strong>】！</p><br><br>
来源：https://www.cnblogs.com/sky-chen/p/11029047.html

查看完整版本: uni-app学习（二）