Uni-app基础
一、Uni-app是什么?
uni-app是一个使用Vue.js开发跨平台应用的前端框架;开发者编写一套代码,uni-app将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。
二、使用步骤
1.推荐使用软件Hbuilder X
下载地址:HBuilderX-高效极客技巧
2.创建项目及初始化步骤
(1)启动小程序
(2)启动小程序
1.微信公众平台查看自己的小程序id 开发 → 开发管理 → 开发设置 → 找到appid
2.在uniapp 中进行配置 目录下的manifest.json → 微信小程序配置 → 填写小程序appid
(3)目录结构
├── pages # 页面 (每个页面可以作为一个文件)
├── static # 静态资源 (图片、音视频)
├── unpackage # 打包文件
├── App.vue # 主文件(可以定义全局方法、样式、变量)
├── main.js # 入口 (引入插件)
├── pages.json # 页面路由
├── package.json # npm相关文件
└── uni.scss # 常用于定义全局样式变量、第三方ui库的样式(插件)
四、一个.vue文件 和 .html文件的区别
可看见的区别:
1.uniapp里不使用div 使用 view 替换
2.html里面使用 img uniapp里使用 image
3.script 跟我们平常写的格式不一样了
其他区别:
1.vue里的template 只能有一个 根标签 如果多个会报错
2.js 定义变量 : var a = 3; vue里面 存放在data里 不需要声明
3.js里的this 指向 window vue里面 指向当前的vue实例
4.想要获取变量、方法 要使用 this.
5.js修改元素的值 需要document. 获取再赋值 vue里直接使用变量就可以了 总结 减少操作DOM
vue:
1.插值表达式(胡子表达式)
{{ 变量、判断条件(三元)}} 如果里面想使用字符串加引号
2.data
定义初始数据用的
data() {
return {
键:值
}
},
3.methods 方法
作用:写一些我们自己定义的方法(函数)
<template>
<!-- template 模板的意思 -->
<view class="content">
<view class="text-area">
<text class="title">{{title}}</text>
</view> -->
</view>
</template>
<script>
export default {
data() {
return {
title : 'Hello',
title1:'hello world'
}
},
onLoad() {
console.log(12);
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
html:文章来源:https://www.toymoban.com/news/detail-404054.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
</script>
</body>
</html>
总结
以上就是今天要讲的内容,本文仅仅简单介绍了利用Hbuilderx开发Uni-app和部分页面内容的使用。文章来源地址https://www.toymoban.com/news/detail-404054.html
到了这里,关于Uni-app基础的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!