uniapp1-创建项目&uniapp的异同

拜可肖
149 阅读3分钟

uniapp.dcloud.net.cn/quickstart-…

插件
  • eslint-plugin-vue vue语法校验
  • scss/sass 编译scss为css
  • 若安装失败可以使用 命令行安装
新建项目
  • 创建项目 建议默认模板 uni-app
  • App.vue 根组件 对应的一些方法
  • main.js 入口文件 实力vue对象 挂载到元素上
  • mainfest.json 配置sdk appid 应用标识 描述 模块 启动图
  • pages.json 跟微信小程序很像
  • uni.scss 默认的css样式
运行项目
  • 运行方式3种：浏览器运行 真机运行 开发者工具运行
  • 1.浏览器：点击运行配置配置web服务器 找到浏览器配置找到chrome的路径点击 chrome.exe
  • 2.真机或模拟器：要链接设备
    • 代码里会出现一个unpackage 说明打包好了 将内容已经运行出来了
  • 3.开发者工具：比如微信开发者工具，
    • 记得配置微信开发者工具的路径， image.png
    • 记得开启微信开发者工具里的端口 image.png
    • 打开会出现一个unpackage
    image.png
1.页面结构
<template>
	<view>
	注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。
	</view>
</template>

<script>
	export default {
		
	}
</script>

<style>

</style>
2.引入变化
  • 组件引入
<template>
    <view>
        <!--3.使用组件-->
        <uni-badge text="abc" :inverted="true"></uni-badge>
    </view>
</template>
<script>
//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
import uniBadge from "../../../components/uni-badge.vue";
export default {
    data() {
	return {
				
		}
	},
    components: {
       //2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
       uniBadge 
    }
}
</script>
  • 引入js

vue

<script>
  var util = require('../../../common/util.js');  //require这个js模块
  var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>

util.js

function formatTime(time) {
	return time;//这里没写逻辑
}

module.exports = {
	formatTime: formatTime
}
  • 引入css
<style>
    @import "./common/uni.css";
    
    .uni-hello-text{
        color:#7A7E83;
    }
</style>
3.标签变化
  • 修改的标签
  • a -> navigator
  • input 输入框
  • radio
  • checkbox
  • slect -> picker 普通 多列 时间 日期 省市区 选择器
  • uni.chooseImage 图片选择
  • uni.chooseVideo 视频选择
  • uni.chooseFile 文件选择
  • form button label textarea canvas video 还在
  • iframe -> web-view
  • ul li -> uList组件

  • 新增的标签

  • srcoll-view 可视区滚动视图容器
  • swiper 可滑动区域视图容器
  • icon 图标
  • rich-text 富文本（不可执行js，但可如渲染各种文字格式和图片）
  • progress 进度条
  • slider 滑块指示器
  • switch 开关选择器
  • camera 相机
  • live-player 直播
  • map 地图
  • cover-view 可覆盖原生组件的视图容器 (uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，则需要使用cover-view组件)
js的变化
  • onload()
    • 在普通vue页面里叫页面生命周期
    • 在根目录app.vue文件中叫应用生命周期
<template>
	<view>
            <!-- 这里演示了组件值的绑定 -->
            <text>{{textvalue}}</text>
            <button :type="buttontype" @click="changetextvalue()">修改为789</button>
            <!-- 这里演示了属性和事件的绑定 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textvalue:"123",
				buttontype:"primary"
			};
		},
		onLoad() {
                    //这里修改textvalue的值，其实123都来不及显示就变成了456
                    this.textvalue="456"
		},
		methods: {
                    changetextvalue() {
                        //这里修改textvalue的值，页面自动刷新为789
			this.textvalue="789"
                    }
		}
	}
</script>
  • ref 类似给dom设置id
<template>
  <view>
    <view ref="testview">11111</view>
    <button @click="getTest">获取test节点</button>
  </view>
</template>

<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.testview)
    }
  }
};
</script>
4.弹框

uniapp.dcloud.net.cn/api/ui/prom…

  • 显示消息提示框 uni.showToast
uni.showToast({
	title: '标题',
	duration: 2000
});
  • 隐藏消息提示框 uni.hideToast
uni.hideToast();
  • 显示loading 提示框 uni.showLoading, 需主动调用 uni.hideLoading 才能关闭提示框
uni.showLoading({
	title: '加载中'
});
setTimeout(function () {
	uni.hideLoading();
}, 2000);
  • 显示模态框 uni.showModal
uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});
  • 底部向上弹出操作菜单 uni.showActionSheet
uni.showActionSheet({
	itemList: ['A', 'B', 'C'],
	success: function (res) {
		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
	},
	fail: function (res) {
		console.log(res.errMsg);
	}
});
5.发请求 uni.request

uniapp.dcloud.net.cn/api/request…

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});
6.存储 uni.storage

uniapp.dcloud.net.cn/api/storage…

  • 异步存
uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});
  • 异步取
uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});
  • 同步存
try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}
  • 同步取
try {
	const value = uni.getStorageSync('storage_key');
	if (value) {
		console.log(value);
	}
} catch (e) {
	// error
}
  • H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
  • App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
  • 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
  • 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
7. css

注意css里背景图和字体文件，尽量不要大于40k，因为会影响性能。在小程序端，如果要大于40k，需放到服务器侧远程引用或base64后引入，不能放到本地作为独立文件引用

8. 工程

uniapp.dcloud.net.cn/tutorial/pr…

image.png

avatar
文章
阅读
粉丝