容桂网站智能推广新闻,网站seo怎样做,郑州市的实惠推广网站,做照片模板下载网站好前言#xff1a; 这篇文章主要写的是uniapp的基础知识#xff0c;可以让大家快速上手uniapp#xff0c;同时避掉一些可能踩到的坑。 一. 什么是uniapp
uniapp是由dcloud 公司开发的多端融合框架。uniapp的出现让我们的开发更为方便#xff0c;一次开发#xff0c;多端运行… 前言 这篇文章主要写的是uniapp的基础知识可以让大家快速上手uniapp同时避掉一些可能踩到的坑。 一. 什么是uniapp
uniapp是由dcloud 公司开发的多端融合框架。uniapp的出现让我们的开发更为方便一次开发多端运行。更重要的是学习成本不会很大因为uniapp主要是Vue语法加上小程序的api学过vue和小程序再学uniapp会更加得心应手。介绍一下端 端分为App端HTML nvue原生viewnative.js(js原生沟通的桥梁) weex内置ios/安卓的模块使用H5端(h5专用api),各种小程序微信为主
二. uniapp应用
1.准备工具
我们在开发uniapp项目之前需要做如下准备首先就是开发与编译工具Hbuilderx 最好是用它毕竟官方推荐使用起来更加方便。还有用来微信小程序预览测试工具微信小程序开发工具。第三个就是安卓模拟器/真机用来运行app。这里大家可以使用mumu模拟器或者雷电模拟器。
2. 创建我们的第一个uniapp项目 3. uniapp项目组成
我们创建一个项目之后发现里面主要由以下几部分组成
pages页面index首页index.vue首页代码static静态资源App.vue根节点index.html模板文件H5main.js项目入口manifest.json项目配置uni.css样式表
4. 如何运行到多端
H5 点击运行到内资浏览器即可APP 01 打开模拟器或者手机 02 配置模拟器端口 03 运行到模拟器 这里给大家写一下常见模拟器的端口号 夜神模拟器端口号62001 海马模拟器端口号26944 逍遥模拟器端口号21503 MuMu模拟器端口号7555 天天模拟器端口号6555 雷电模拟器5554 微信小程序 01 打开开发工具的服务端口 02 HBuilder X配置 微信开发工具地址 03 配置微信小程序id 04 运行到微信小程序 Tips: hbuilder可能需要下载对应的插件 运行到安卓模拟器有视图差别 运行可能需要一定的时间,大家要耐心等待哦 三. uniapp语法
1. uni-app页面
我们新建一个页面然后进行页面配置。页面配置在pages.json。我们可以配置全局样式globalStyle。默认页面的样式会应用全局样式页面写了style 配置那么用的配置覆盖全局的配置pages页面有path页面路径和style 页面样式。
2. Vue语法
文本渲染 {{表达式}} v-text“表达式” 表达式 简单的js运算 js方法调用 3元运算符 v-html 富文本 条件渲染 v-if v-else-if v-else v-show 通过三元运算符 列表选项 字符串数字列表对象都可以遍历 view v-for(item,index) in list :keyindex{{index1}} {{item}}/view 一定要保证兄弟元素间的key值是唯一 属性绑定(v-bind ,也可以简写为:) button v-bind:disabled“true” button :disabledtrue
表单绑定 默认 :value“单向绑定” input v-model“双向绑定” change“$event.detail.value”事件 事件的值$event.detail.value 事件 事件绑定 view v-on:click“响应” 简写绑定view click“事件响应” 事件行内处理 view click“num” 事件响应函数 (函数在methods定义) view click“say” 事件传参 不写参数 clicksay 等同于 click“say()” 等同于 click“say($event)” $event 是一个固定写法 代表事件对象 事件对象 $event/e function say(e){ } 其中 target目标对象 dataSet 组件传参 view :data-titletitle clicksay function say(e){ e.target.dataset.title } 3. vue选项 data 数据 methods 方法 computed 计算 watch监听 directive指令 filter过滤 4 .uni-app的生命周期
Vue的生命周期 创建 beforeCreate created 挂载 beforeMount mounted 更新 beforeUpdate updated 卸载 beforeDestroy destroyed 小程序的生命周期 onLoad 加载 能够获取页面的参数 开启ajax定时器事件监听 像vue的created onShow 显示 播放媒体 onReady准备 获取节点信息 像vue的mounted onHide 后台运行 停止播放媒体 onUnload 卸载 停止事件监听与定时器 小程序的全局方法 onPullDownRefresh 下拉刷新 onReachBottom() 触底更新 onShareAppMessage右上角分享 onPageScroll 页面滚动 onShareTimeline 分享到朋友圈 app的全局方法 onBackPress 手机的返回键被点击 onNavigationBarButtonTap 导航栏按钮被点击 5.表单 button 按钮 type 类型primary主要 warn警告 default 默认 size“mini” disabled 是否可用 input value值 v-model对表单双向绑定 change“$event.detail.value” placeholder 提示文本 picker mode 模式 time时间 date 日期 region地区 value值 change“$event.detail.value” slider 滑块 value 值 max 最大 min 最小 change“$event.detail.value” 6.组件传参
自定义组件使用easycom方式使用方式较vue简便了很多。组件定义完以后可以不用import 导入不用在components中注册直接使用。
组件传参
1. 父组件向子组件传参通过属性的方式进行传递
steper :valued1/steper
2. 子组件通过props来接收
props:{ value:{ type:Number, default:1 } }
3. 子组件向父组件传参
子组件通过this.$emit(事件名,传递的参数)详细文章请看往期传送门 uniapp基础 uniapp进阶
