uniapp-糗事百科案例

一、信息模块

　　图文信息

　　视频信息

　　会员发布

　　分享

　　　　-微信分享

　　　　-微博分享

　　　　-QQ分享

二、话题模块

　　话题分类

　　话题列表

　　话题详情

三、搜索模块

　　搜索信息

　　搜索好友

　　搜索话题

四、会员模块

　　第三方登录

　　　　-微信登录

　　　　-微博登录

　　　　-QQ登录

　　账号密码登录

　　验证码登录

　　修改密码

　　修改资料

　　绑定邮箱

　　关注粉丝

　　管理好友

　　个人空间

五、在线聊天模块

　　会员聊天

　　实时通知

　　会员反馈

　　清除所有

六、广告位模块

　　图片广告

　　轮播图广告

七、其他模块

　　APP热更新

　　缓存管理

　　动画效果优化

　　兼容处理

投屏软件：慕享投屏

 

 

八、代码更新

　　

vue代码块 

    "uList": {
        "body": [
"<view class=\"uni-list\">",
            "\t<view class=\"uni-list-cell\">",
            "\t\t<view class=\"uni-list-cell-navigate uni-navigate-right\">",
            
                "$1",
            
            "\t\t</view>",
        "\t</view>",
    "</view>"        
        ],
        "prefix": "ulist",
        "project": "uni-app",
        "scope": "source.vue.html"
    }
    

 

引入官网css库

 

在所在项目里创建common文件夹。 并且复制uni.css文件

 

 

 

 

 

在所在项目的 跟目录app.vue 里导入样式文件

 

 

 

引入自定义图标库

https://www.iconfont.cn/

选好图标库，然后把需要的统一加入购物车，下载到本地

引入相关的css文件

 

 

 

 

 导入iconfont.css  然后想引入哪个效果，可以打开下载的图标库（demo.html），复制相关的class调用代码即可。

 

引入css3动画库 

https://animate.style/

下载库https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css

 

页面跳转：

        <navigator url="../ceshi/ceshi">
            <button>页面跳转</button>
        </navigator>

 

 底部导航开发

先要创建pages页面。 然后 在配置tabBar，不然页面重新生成pages.json的时候从新赋值 ， tabBar都白写。

"tabBar": {
        "color": "#ADADAD",
        "selectedColor": "#FEE42A",
        "backgroundColor": "#FFFFFF",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "我的",
                "iconPath": "static/tabbar/index.png",
                "selectedIconPath": "static/tabbar/indexed.png"
            },{
                "pagePath": "pages/news/news",
                "text": "动态",
                "iconPath": "static/tabbar/news.png",
                "selectedIconPath": "static/tabbar/newsed.png"
            },{
                "pagePath": "pages/paper/paper",
                "text": "小纸条",
                "iconPath": "static/tabbar/paper.png",
                "selectedIconPath": "static/tabbar/papered.png"
            },{
                "pagePath": "pages/home/home",
                "text": "我的",
                "iconPath": "static/tabbar/home.png",
                "selectedIconPath": "static/tabbar/homeed.png"
            }
        ]
    }

 

监听属性：watch：

1、普通监听（无法监听到第一次绑定的变化）

<input type="text" v-model="userName"/>  
//监听   当userName值发生变化时触发
watch: {
    userName (newName, oldName) {
        console.log(newName)
    }
}

 

2、普通监听（可监听到第一次绑定的变化）
第一种方式有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，，只有当值改变的时候 才会执行，如果想在第一次绑定的时候执行此监听函数，则需要设置 immediate为true，

<input type="text" v-model="userName"/>  
watch: {
    userName: {
        handler (newName, oldName) {
            console.log(newName)
        },
        immediate: true
    }
}

 

3、深度监听（可监听对象内属性变化）

<input type="text" v-model="cityName.name" />
data (){
    return {
        cityName: {name:'北京'}
    }
},
watch: {
    cityName: {
        handler(newName, oldName) {
            console.log(newName)
        },
        immediate: true,
        deep: true
    }
}