uniapp开发ios端初次安装页面空白

 

 

 

 

 

 

 

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>
            <!-- v-model 数据双向绑定 及 form 表单使用 -->
            
            <!-- 通过数据绑定的方式,获取表单值 -->
            <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表单的方式,获取表单值 -->
            <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>
        
        <!-- 运用 computed 实现学员成绩筛选 -->
        <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>
            
            <!-- computed 基本使用 -->
            <!-- 不使用computed -->
            <view class="boxx margin">
                不使用computed反转 {{msg.split('').reverse().join('')}}
            </view>
            <!-- 使用computed -->
            <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>
        
        
        <!-- v-for 循环嵌套使用 -->
        <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>
            
        
        <!-- v-bind key 实现 for循环组件的唯一性,避免dom复用时组件不更新,key值要保证唯一性 -->
        <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>
        
        
        <!-- 列表渲染 v-for 的使用 -->
        <view class="box1">
            <text class="title">列表渲染 v-for 的使用</text>
            <!-- v-for 遍历数组 -->
            <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>
            <!-- v-for 遍历对象 -->
            <view v-for="(value,key) in status" class="boxxx active margin">
                {{key}} 代表 {{value}} 状态
            </view>
        </view>
        
        <!-- v-if v-show 实现条件渲染 -->
        <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>
        
        
        
        <!-- v-ontap 事件基础以及事件兼容 -->
        <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>
            <!-- uni-app 中可以将vue语法中的v-on简写 -->
            <button @click="haddleBg" type="primary" class="margin">@click 控制激活</button>
        </view>
        
        <!-- MVVM模式与数据驱动 -->
        <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>
        
        <!-- 属性动态控制:class value style -->
        <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>
        
        <!-- 图片src绑定 -->
        <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>
            <!-- uni-app 中可以省略 vue语法中的v-bind,作为简写 -->
            <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">
        <!-- #ifdef MP-WEIXIN -->
        
        <!-- <image class="logo" src="../../static/logo.png" mode="widthFix"></image> -->
        <!-- <text>微信小程序 选择编译</text> -->
        <!-- #endif -->
        
        <!-- #ifdef APP-PLUS -->
        <!-- <image class="logo" src="../../static/logo.png" mode="widthFix"></image> -->
        <!-- <text>APP 选择编译</text> -->
        <!-- #endif -->
        
        <!-- #ifdef H5 -->
        <!-- <image class="logo" src="../../static/logo.png" mode="widthFix"></image> -->
        <!-- <text>H5 选择编译</text> -->
        <!-- #endif -->
		<!-- <view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
        
        <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>

目录结构