UniApp Demo 学习笔记一

最新推荐文章于 2023-09-19 22:35:52 发布
最新推荐文章于 2023-09-19 22:35:52 发布
阅读量667 收藏 2
点赞数
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gixome/article/details/126504248
版权

 

 

 

 

 

 

 

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>

目录结构

 

 

ggome
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
探索 Uni-App Demo：跨平台应用开发的新里程
gitblog_00061的博客
04-20 238
探索 Uni-App Demo：跨平台应用开发的新里程 项目地址:https://gitcode.com/zhouwei1994/uni-app-demo 项目简介 在快速发展的移动互联网时代，开发者们常常需要面对多端适配的挑战。Uni-App Demo 是一个基于 HBuilderX 和 Uni-App 的示例项目，它展示了如何利用这些工具和技术实现一次编写，多端运行的能力，覆盖了iOS、An...
uniapp使用的入坑笔记及demo
wzq2011的博客
01-13 656
uniapp 使用demo
Uniapp演示Demo
04-05
Uniapp演示Demo
使用环信提供的uni-app Demo，快速实现一对一单聊
huan132456765的博客
07-01 2616
如何利用环信提供的uni-app Demo，快速实现一对一单聊？真真保姆级别教程！
Uniapp学习之从零开始写一个简单的小程序demo（新建页面，通过导航切换页面，发送请求）
weixin_56039103的博客
09-05 2130
先把官网文档摆在这，后面会用到的。
uniapp的简单demo
wanglei的博客
08-10 4428
index.html: <template> <view class="content"> <view class="content-space"> <view> <page-head></page-head> </view> <view class="wrapper"> <view class="avar"> <image class.
uniapp分包demo
11-03
uniapp多页面配置效果，项目代码subPackages 里的pages的路径是 root 下的相对路径，不是全路径。 微信、百度小程序每个分包的大小是2M，总体积一共不能超过8M。 支付宝小程序每个分包的大小是2M，总体积一共不能...
uniAPP使用sqlite数据库demo
最新发布
04-01
总结，这个“uniAPP使用sqlite数据库demo”项目是学习和实践如何在uniAPP中利用SQLite存储和管理本地数据的宝贵资源。通过深入理解上述知识点，开发者能够有效地在uniAPP应用中构建自己的数据库管理系统，满足各种...
a uniapp demo for vant-weapp示例.zip
02-04
1. **UniApp 使用**：学习如何配置 UniApp 项目，创建页面结构，管理数据，以及如何使用 UniApp 的生命周期函数和组件。理解 Vue.js 风格的模板语法和指令，如 v-if、v-for、v-bind 等。 2. **Vant WeApp 组件使用*...
uniapp demo演示安卓包
01-03
uniapp demo演示安卓包
demo介绍：uni-app统合--各类大转盘demo介绍
林恒的博客
06-08 1061
这里给大家介绍下我做的一个uni-app的demo：抽奖系统 废话不多说直接上效果图： 线上案例： 首页： 大转盘抽奖页面： 轮播机抽奖页面： 九宫格抽奖页面： 翻牌抽奖页面： 奖品列表页面： 抽奖的思路大家可以参考我的另一篇解析大转盘的文章： 点击这里前往 这里给大家分享下template内容： <view class="container"> <...
uniappdemo.zip
06-21
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。本demo仅作入门使用，使用平台现有组件，进行简单构建
uni-app 安卓版应用源码
01-11
网上下载了一个200多兆的源码包居然是个假的，没有vue页面也不能启动，好在找了一会找了了源码，可以对着下载的app看对应的代码，描述如下： uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。
第01讲：基于UniAPP的小程序跨端开发--demo01
04-07
第01讲：基于UniAPP的小程序跨端开发--demo01
uni-app实战项目，跟着做完你就可以独立作战了（四）
CSDN凉宸
06-29 1719
标签页实现 新建home-label页面 pages.json中设置 我们在tab中设置点击事件跳转到标签管理页 页面布局 效果： 实现： 我们去数据库动态获取标签 在这个云函数中做一个改造 通过变量来判断是显示编辑还是完成，是否显示❌ true为完成、❌ false为编辑，不显示❌ 页面显示效果 我们先获取数据 循环显示到页面中 事件处理 添加两个单击事件（此时还没有连接数据库哦） 点击推荐内容就放到我的里面 点击我的里面的❌放到推荐中 并且自己的删除掉 这个方法也可以哦 加
uniApp中form表单的小案例
2301_79413719的博客
09-19 360
form表单提交介绍表单组件
uni-app入门及练手项目
tian_98的博客
06-10 3445
1多端的介绍 pc：web,桌面应用 移动端：移动端–web app（android,ios） — 小程序（微信小程序，百度小程序，支付宝小程序，头条小程序，qq小程序，360小程序，华为小程序） 1.1原生app 使用原生的技术开发的手机端app Android系统（java android） ios–app(object-C)，京东，腾讯视屏，支付宝 优点： 功能比h5较多， 运行速度快， 用户体验好 缺点: 需要下载，占存储容量 开发成本比较高。 1.2混合app
uni-app 表单组件-button demo
crazyo2jam的博客
01-01 2725
官网详解 主要使用 loding 等待 plain镂空 disabled 禁用 三种方式 包括微信小程序open-type开放能力 (博客内后续更新) <template> <view> <view class="uni-padding-wrap uni-common-mt"> <button ty...
uniapp demo
03-31
As an AI language model, I am not able to provide a demo of Uniapp. However, I can provide you with some information about Uniapp. Uniapp is a framework that allows developers to build cross-platform...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值