UniApp Demo 学习笔记一

冷不防 2024-04-08 11:47 103阅读 0赞

![675f24e2fa1e4b6c8172fb421ff00003.png][]

![f5c547fdeef849be907e50e415fadb2b.png][]

![fc8e0f5c71b44bc9adf3ccdf77426ce5.png][]

![315731181b3245bab43bc989f8c55ad2.png][]

![dc7800f26047413aa3bf7c67ccb8030d.png][]

![509b4abd9d1e467dbdfb35e90478758b.png][]

![10a8e093f7d0449b8eb235401b153d7c.png][]

![d6efe0887865475f809169c9ca778a53.png][]

![42316827b6b3452d833ca799deaad0a7.png][]

home.vue
    
    <template>
        <view>
            
            <view class="box1">
                <text class="title">消息发送案例实践</text>
                
                <view class="flex margin">
                    <input v-model="msg" type="text" name="" id="">
                    <button type="default" @tap="handleSend">发送</button>
                </view>
                <view class="margin text-center" v-if="msglist.length==0">
                    暂无消息
                </view>
                <view class="">
                    <view v-for="(item,index) in msglist" class="boxx active margin">
                        {
       {item}}
                    </view>
                </view>
                
            </view>
            
            
            
            <view class="box1">
                <text class="title">事件修饰符,应用场景</text>
                <view class="" @tap="isShow=true">
                    显示遮罩层
                </view>
                <view class="cover" v-if="isShow" @tap="isShow=false">
                    <view class="pop" @tap.stop>
                        <input type="text" value="" placeholder="input place holder">
                        <button type="default" @tap="isShow=false">关闭</button>
                    </view>
                    
                </view>
            </view>
            
            <view class="box1">
                
                <text class="title">事件修饰符,的基本使用</text>
                <view class="box1-1" @tap="handleAlert">
                    <view class="box1-1" @tap="handleAlert">
                        <view class="box1-1" @tap.stop="handleAlert">
                            事件修饰符stop,阻止父元素冒泡事件,及其应用场景,
                        </view>
                    </view>
                </view>
                
            </view>
            
            
            
            
            
            <view class="box1">
                <text class="title">v-model 数据双向绑定 及 form 表单使用</text>
                
                
                
                <view class="">
                    {
       {msg}}
                </view>
                
                <input type="text" :value="msg">
                
                <input type="text" v-model="msg">
                <textarea v-model="msg" placeholder="" />
                
                <checkbox-group @change="handleChange">
                    <label><checkbox value="basketball" /><text>篮球</text></label>
                    <label><checkbox value="football" /><text>足球</text></label>
                </checkbox-group>
                <button type="primary" @tap="handleSubmit1">提交</button>
                <view class="">
                    {
       {hobby}}
                </view>
                
                
                <form @submit="handleSubmit2">
                    <input type="text" name="username" />
                    <checkbox-group name="hobby">
                        <label><checkbox value="basketball" /><text>篮球</text></label>
                        <label><checkbox value="football" /><text>足球</text></label>
                    </checkbox-group>
                    <button form-type="submit">提交</button>
                </form>
                
                
                <button type="default" class="margin" @tap="haddleEdit">编辑</button>
            </view>
            
            
            <view class="box1">
                <text class="title">运用 computed 实现学员成绩筛选</text>
                <view class="uni-flex">
                    <view class="boxx margin-left active" @tap="statuss = 0">全部</view>
                    <view class="boxx margin-left" @tap="statuss = 1">及格</view>
                    <view class="boxx margin-left" @tap="statuss = 2">不及格</view>            
                </view>
                <view class="boxxx margin" v-for="(item,index) in filterStu">
                    姓名:{
       {item.name}}  分数:{
       {item.score}}
                </view>
                
                
                
                <view class="boxx margin">
                    不使用computed反转 {
       {msg.split('').reverse().join('')}}
                </view>
                
                <view class="boxx margin">
                    使用computed反转 {
       {reMsg}}
                </view>
            </view>
                
            
            <view class="box1">
                <text class="title">菜单切换案例实践与拓展</text>
                
                <view class="uni-flex">
                    <view 
                        v-for="(item,index) in tabsArr" 
                        :class="['boxxx','margin-left',{'active':index==tabIdx}]" 
                        @tap="tabIdx=index"
                    >
                        {
       {item}}
                    </view>
                </view>
                <view 
                    v-for="(item,index) in tabsArr"
                    class="boxx margin" 
                    v-show="index==tabIdx"
                >
                    这是 {
       {item}} 的内容
                </view>
            </view>
            
            
            <view class="box1">
                <text class="title">基本菜单</text>
                <view class="uni-flex">
                    <view :class="['boxxx',{'active':isActive}]" @tap="haddleTab(true)">
                        菜单1
                    </view>
                    <view :class="['boxxx',{'active':!isActive}]" @tap="haddleTab(false)">
                        菜单2
                    </view>
                </view>
                <view class="boxx margin" v-if="isActive">
                    内容1
                </view>
                <view class="boxx margin" v-if="!isActive">
                    内容2
                </view>
            </view>
            
            
            
            <view class="box1">
                <text class="title">v-for 循环嵌套使用</text>
                <view v-for="(item,index) in wulin">
                    <view @tap="skillIdx = index" class="boxxx active margin">
                        门派:{
       {item.title}} 代表:{
       {item.represent}}
                    </view>
                    <view v-if="skillIdx == index">
                        <view v-for="(itm,idx) in item.skill" class="boxxx margin">
                            {
       {itm}}
                        </view>
                    </view>
                </view>
            </view>
                
            
            
            <view class="box1">
                <text class="title">v-for 循环嵌套使用</text>
                <view v-for="(item,index) in list" v-bind:key="item" class="boxxx active margin">
                    <checkbox/>
                    {
       {item}}
                    <text @tap="haddleDel(index)" class="margin-left">删除</text>
                </view>
            </view>
            
            
            
            <view class="box1">
                <text class="title">列表渲染 v-for 的使用</text>
                
                <button @tap="haddleAdd" type="primary" class="margin">新增学员</button>
                <view v-for="(item,index) in students" class="boxxx margin">
                    序号:{
       {index+1}}, 姓名:{
       {item.name}}, 分数:{
       {item.score}}
                </view>
                
                <view v-for="(value,key) in status" class="boxxx active margin">
                    {
       {key}} 代表 {
       {value}} 状态
                </view>
            </view>
            
            
            <view class="box1">
                <text class="title">v-if v-show 实现条件渲染</text>
                <button v-on:tap="handleShow" type="primary" class="margin">控制元素显示</button>
                <view v-if="isShow" class="boxx margin">
                    v-if 通过控制dom节点实现条件渲染
                </view>
                <view v-else class="boxx margin">
                    v-else 实现条件渲染
                </view>
                <view v-show="isShow" class="boxx margin">
                    v-show 条件渲染 通过控制样式实现
                </view>
            </view>
            
            
            
            
            <view class="box1">
                <text class="title">v-ontap 事件基础以及事件兼容</text>
                <button v-on:tap="haddleBg" type="primary" class="margin">v-on:tap控制激活</button>
                <view :class="['boxx','margin',{'active':isActive}]"></view>
                
                <button @click="haddleBg" type="primary" class="margin">@click 控制激活</button>
            </view>
            
            
            <view class="box1">
                <text class="title">MVVM模式与数据驱动</text>
                
                <view class="fs-30 color-9b9b">
                    uniapp 开发学习Demo1
                </view>
                <view class="fs-28 color-8d8d">
                    uniapp 使用数据来驱动视图
                </view>
                <view class="fs-16">
                    
                    <input type="text" class="feedback-input" v-model="msg">
                </view>
                <text class="iconfont icon--fuwu"></text>
                <view class="title">
                    {
       {msg}}
                </view>            
            </view>
            
            
            <view class="box1">
                <text class="title">属性动态控制:class value style</text>
                
                <view class="box" v-bind:class="isActive?'active':''"></view>
                
                <view v-bind:class="['box',isActive?'active':'']"></view>
                
                <view v-bind:class="['box',{'active':isActive}]"></view>
            </view>
            
            
            <view class="box1">
                <text class="title">图片src绑定</text>
                <image v-bind:src="isLogin?'../../static/logo.png':'../../static/logo1.png'" mode=""></image>
                <image v-bind:src="imgs[loginstate]" mode=""></image>
                
                <image :src="imgs[loginstate]" mode=""></image>
            </view>
        </view>
    </template>
    
    <script>
        export default {
            data() { // Model 数据层
                return {
                    msglist:[],
                    hobby:[],
                    tabsArr:[
                        '首页',
                        '新闻',
                        '产品',
                        '联系我们',
                        '招聘'
                    ],
                    tabIdx:0,
                    wulin:[
                        {
                            title:'少林寺',
                            represent:'扫地僧',
                            skill:[
                                '三十六路拳脚',
                                "七十二绝技",
                                "易筋经",
                                "金钟罩"
                            ]
                        },{
                            title:'武当',
                            represent:'张三丰',
                            skill:[
                                '梯云纵',
                                "太极拳法",
                                "乾坤大挪移"
                            ]
                        }
                    ],
                    skillIdx:-1,
                    list:[
                      '白日依山尽',  
                      '黄河入海流',  
                      '欲穷千里目',  
                      '更上一层楼'  
                    ],
                    status:{
                        "0":"成功",
                        "1":"警告",
                        "2":"失败"
                    },
                    students:[
                        {name:'铁拐李',score:100},
                        {name:'汉钟离',score:88},
                        {name:'张果老',score:58},
                        {name:'吕洞宾',score:50},
                        {name:'何仙姑',score:65},
                        {name:'蓝采和',score:70},
                        {name:'韩湘子',score:96},
                        {name:'曹国舅',score:56},
                    ],
                    statuss:0,
                    msg:"hello uni-app",
                    isActive:false,
                    isLogin:true,
                    imgs:[
                        '../../static/logo.png',
                        '../../static/logo1.png'
                    ],
                    loginstate:1,
                    isShow:false
                }
            },
            methods: {
                handleSend(){
                    this.msglist.push(this.msg);
                    this.msg='';
                },
                handleAlert(){
                    alert(123)
                },
                handleChange(ev){
                    console.log(ev);
                    this.hobby = ev.detail.value
                },
                handleSubmit1(){
                    let {msg,hobby} = this;
                    console.log({msg,hobby});
                },
                handleSubmit2(ev){
                    console.log(ev.detail.value);
                },
                haddleTab(bool){
                    this.isActive=bool
                },
                haddleDel(idx){
                    this.list.splice(idx,1)
                },
                haddleAdd(){
                    this.students.push({name:'王母奶奶',score:76})
                },
                haddleEdit(){
                    this.students[0].name = '李斯';
                },
                haddleBg(){
                    this.isActive = !this.isActive
                },
                handleShow(){
                    this.isShow = !this.isShow
                }
                
            },
            computed:{
                filterStu(){
                    let {statuss,students} = this
                    switch (statuss){
                        case 1://及格
                            return students.filter((item)=>{
                                return item.score>=60
                            })
                        case 2://不及格
                            return students.filter((item)=>{
                                return item.score<60
                            })
                        default://全部
                            return students
                    }
                },
                reMsg(){ //计算属性
                    // 自定义的灵活的运算 
                    return this.msg.split('').reverse().join('')
                }
            },
            watch:{
                /* students(){ // 浅监听
                    console.log('检测到students的变化');
                    // 实现 students变化所引发的相关逻辑代码
                    // 例如:将最新的students数据包存到本地存储
                    uni.setStorage({
                        key:'stu',
                        data:this.students
                    })
                } */
                
                students:{//深监听
                    handler(){
                        console.log('检测到students的变化');
                        // 实现 students变化所引发的相关逻辑代码
                        // 例如:将最新的students数据包存到本地存储
                        uni.setStorage({
                            key:'stu',
                            data:this.students
                        })
                    },
                    deep:true
                    
                }
            }
        }
    </script>
    
    <style lang="scss">
    
    .text-center{
        text-align: center;
    }
    input{
        height: 100upx;
        border: 1upx solid #9ba7bf;
        flex: 1;
    }
    .flex{
        display: flex;
        justify-content: center;
    }
        
        
    .cover{
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
    }
    .pop{
        margin: 100upx 30upx;
        background-color: #fff;
        height: 200upx;
    }
    
    
    .box1-1{
        padding: 50upx;
        border: 1px solid #333;
    }
    
    .margin-left{
        margin-left: 20upx;
    }
    
    .margin{
        margin: 10upx;
    }
    .boxx{
        height: 200upx;
        background-color: #9ba7bf;
        text-align: center;
        color: #fff;
        font-size: 40upx;
        line-height: 200upx;
    }
    
    .boxxx{
        height: 80upx;
        background-color: #9ba7bf;
        text-align: center;
        color: #fff;
        font-size: 32upx;
        line-height: 80upx;
    }
    
    .title{
        color: red;
    }
    .icon--fuwu{
        font-size: 100upx;
        color: blueviolet;
    }
    
    .box{
        height: 100upx;
        width: 100upx;
        border:1upx solid red;
        border-radius: 20upx;
    }
    .active{
        background-color: #3f536e;
    }
    image{
        width: 100upx;
        height: 100upx;
    }
    .box1{
        height: 100%;
        width: 710upx;
        border:1upx solid red;
        border-radius: 20upx;
        margin: 10upx;
        padding: 10upx;
    }
    /* 稿定在线PS ps.gaoding.com */
    </style>

uniscss

/* 字体大小控制 */
    .fs-30{font-size: 30upx !important;}
    .fs-28{font-size: 28upx !important;}
    .fs-26{font-size: 26upx !important;}
    .fs-24{font-size: 24upx !important;}
    .fs-22{font-size: 22upx !important;}
    .fs-20{font-size: 20upx !important;}
    .fs-18{font-size: 18upx !important;}
    .fs-16{font-size: 16upx !important;}
    .fs-14{font-size: 14upx !important;}
    .fs-12{font-size: 12upx !important;}
    /* 文字颜色控制 */
    .color-9b9b{color: #9b9b9b !important;}
    .color-8d8d{color: #8d8d8d !important;}
    .color-111{color: #111 !important;}
    .color-9292{color: #929292 !important;}
    .color-9898{color: #989898 !important;}
    
    
    /* 字体图标 */
    @import '@/static/font/iconfont.css';

iconfont.css

@font-face {
      font-family: "iconfont"; /* Project id 3599881 */
      src: url('@/static/font/iconfont.woff2?t=1660902218891') format('woff2'),
           url('@/static/font/iconfont.woff?t=1660902218891') format('woff'),
           url('@/static/font/iconfont.ttf?t=1660902218891') format('truetype');
    }

page.json

{
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{
                "path" : "pages/home/home",
                "style" :                                                                                    
                {
                    "navigationBarTitleText": "测试demo",
                    "enablePullDownRefresh": false
                }  
            },
            {
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "test 测试APP首页",
                    "navigationBarBackgroundColor": "#eee",
                    "navigationBarTextStyle": "black"
    			}
    		},{
                "path" : "pages/info/info",
                "style" :                                                                                    
                {
                    "navigationBarTitleText": "新闻详情页",
                    "enablePullDownRefresh": false
                }
            }
        ],
    	"globalStyle": {
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#F8F8F8",
    		"backgroundColor": "#F8F8F8"
    	},
        "tabBar": {
            "color": "#d8d8d8",
            "selectedColor": "#444",
            "list": [
                {
                    "text": "首页",
                    "pagePath": "pages/index/index",
                    "iconPath": "static/logo.png",
                    "selectedIconPath": "static/logo.png"
                },{
                    "text": "Home",
                    "pagePath": "pages/home/home",
                    "iconPath": "static/logo.png",
                    "selectedIconPath": "static/logo.png"
                }
            ]
        }
    }

index.vue

<template>
    	<view class="content">
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
    		
            
            <view class="uni-list">
                <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="openinfo" :data-newsid="item.post_id">
                    <view class="uni-media-list">
                        <image class="uni-media-list-logo" :src="item.author_avatar"></image>
                        <view class="uni-media-list-body">
                            <view class="uni-media-list-text-top">{
       {item.title}}</view>
                            <view class="uni-media-list-text-bottom uni-ellipsis">{
       {item.created_at}}</view>
                        </view>
                    </view>
                </view>
            </view>
            
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				// title: 'uni-app 第一个测试程序'
                    news : []
    			}
    		},
    		onLoad() {
    			uni.showLoading({
    				title:"加载中...."
    			})
                
                uni.request({
                    url: 'https://unidemo.dcloud.net.cn/api/news',
                    method: 'GET',
                    data: {},
                    success: res => {
    					this.news = res.data;
    					uni.hideLoading();
                    },
                    fail: () => {},
                    complete: () => {}
                });
    
    		},
    		methods: {
    			openinfo(e) {
    				var newsid = e.currentTarget.dataset.newsid;
                    // console.log(newsid);
    				uni.navigateTo({
    					url: '../info/info?newsid='+newsid
    				});
    			}
    
    		}
    	}
    </script>
    
    <style>
    	/* .content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo {
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area {
    		display: flex;
    		justify-content: center;
    	}
    
    	.title {
    		font-size: 36rpx;
    		color: #8f8f94;
    	} */
        
        .uni-media-list-body{height: auto;}
        .uni-media-list-text-top{line-height:1.6em;}
    </style>

info.vue

<template>
    	<view class="content">
    		<view class="title">{
       {title}}...</view>
    		<view class="art-content">
    			<rich-text class="richText" :nodes="strings"></rich-text>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: '',
    				strings : ''
    			}
    		},
    		onLoad:function(e){
    			console.log(e.newsid);
    			uni.request({
    				url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+e.newsid,
    				method: 'GET',
    				data: {},
    				success: res => {
    					// console.log(res);
    					this.title = res.data.title;
    					this.strings = res.data.content;
    				},
    				fail: () => {},
    				complete: () => {}
    			});
    		}
    	}
    </script>
    
    <style>
    .content{padding:10upx 2%; width: 96%; flex-wrap:wrap;}
    .title{line-height:2em; font-weight:700; font-size:38upx;}
    .art-content{line-height:2em;}
    </style>

**目录结构**

![c72778e3192d473e836296565ee265ce.png][]

[675f24e2fa1e4b6c8172fb421ff00003.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/61fff82aa8a742ac816349f84b7c811f.png
[f5c547fdeef849be907e50e415fadb2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/f9767b75e13f427ebd673d6185491ecb.png
[fc8e0f5c71b44bc9adf3ccdf77426ce5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/644a803680fc48c1af2e2b351d93bbe4.png
[315731181b3245bab43bc989f8c55ad2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ea224d2ed86f49e5be7993d05b4eacd9.png
[dc7800f26047413aa3bf7c67ccb8030d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/30e4c531dd464ec89551d6f29992d844.png
[509b4abd9d1e467dbdfb35e90478758b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/a0c0538466e541d9a8453935c949d98a.png
[10a8e093f7d0449b8eb235401b153d7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/a0a4474a990d4a0e90af463c4646cd9f.png
[d6efe0887865475f809169c9ca778a53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c9a48a41f22c45aa8d39cace025fdd79.png
[42316827b6b3452d833ca799deaad0a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/aa7488df5fce4b148a9c9afa3a41911c.png
[c72778e3192d473e836296565ee265ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/f0e73b477d1945e59c006c1dad961d08.png