网站架构布局,seo关键词排名优化费用,广汉网站,广州app软件开发公司目录
一、前期准备
1、项目认识
2、pages.json基本配置
3、创建页面 二、tabBar
1、获取图标
2、代码配置
三、基础认识
1、页面生命周期
2、App.vue应用生命周期
四、基础组件
1、scroll-view可滚动视图区域
2、提示框
3、swiper滑块视图容器
4、form表单组件 一…目录
一、前期准备
1、项目认识
2、pages.json基本配置
3、创建页面 二、tabBar
1、获取图标
2、代码配置
三、基础认识
1、页面生命周期
2、App.vue应用生命周期
四、基础组件
1、scroll-view可滚动视图区域
2、提示框
3、swiper滑块视图容器
4、form表单组件 一、前期准备
1、项目认识
1新建项目 2启动项目
①运行到浏览器上 ②运行到微信开发者工具 如果出现以下弹框选择已安装好的微信开发者工具路径确定即可 如果出现“工具的服务端口已关闭”是因为微信开发者工具设置问题 解决如下 随便打开微信开发者工具的一个工程》点击设置》通用设置》安全》打开服务端口 3中文解释 2、pages.json基本配置
1globalStyle全局配置
{globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: 全局,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8},
} 2局部页面的配置
{pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/index/index,style: {navigationBarTitleText: 首页}}],
} 3、创建页面
1右键pages文件夹》点击新建页面 2新页面配置
①如果没有自动生成需要手动添加配置
②注意与微信小程序一样配置时哪个页面放在前面就先显示哪个页面
{pages: [{path : pages/about/about,style : {navigationBarTitleText: 关于,enablePullDownRefresh: false}},{path: pages/index/index,style: {navigationBarTitleText: 首页}}],globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: 全局,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8},uniIdRouter: {}
}二、tabBar
1、获取图标
1小伙伴可以在iconfont选择需要的图标
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造设计和前端开发的便捷工具https://www.iconfont.cn/2将下载好的图标放到static文件夹中 2、代码配置
{pages: [{path : pages/about/about,style : {navigationBarTitleText: 关于,enablePullDownRefresh: false}},{path: pages/index/index,style: {navigationBarTitleText: 首页}}],globalStyle: {navigationBarTextStyle: white,navigationBarTitleText: 全局,navigationBarBackgroundColor: #000000,backgroundColor: #ffffff},tabBar: {color: #7A7E83,selectedColor: #1296db,borderStyle: black,backgroundColor: #000000,list: [{pagePath: pages/index/index,iconPath: /static/首页2.png,selectedIconPath: /static/首页.png,text: 首页}, {pagePath: pages/about/about,iconPath: /static/关于2.png,selectedIconPath: /static/关于.png,text: 关于}]},uniIdRouter: {}
}三、基础认识
1、页面生命周期
1onLoad 监听页面加载【类似于 vue2 生命周期中的 create】
此时响应式数据、计算属性、方法、侦听器、props、slots 已设置完成其参数为上个页面传递的数据参数类型为 Object
2、App.vue应用生命周期
1globalData 全局变量此处定义的变量可以在任何页面获取
①App.vue
scriptexport default {globalData: {text: text},onLaunch: function() {console.log(App Launch)},onShow: function() {console.log(App Show)},onHide: function() {console.log(App Hide)}}
/script
②index.vue
scriptexport default {data() {return {}},onLoad() {console.log(getApp().globalData);},}
/script 四、基础组件
1、scroll-view可滚动视图区域
templateviewview classuni-padding-wrap uni-common-mtview classuni-title uni-common-mtVertical Scrolltext\n纵向滚动/text/viewview!-- scroll-ytrue允许纵向滚动 --scroll-view :scroll-topscrollTop scroll-ytrue classscroll-Y scrolltoupperupperscrolltolowerlower scrollscrollview iddemo1 classscroll-view-item uni-bg-redA/viewview iddemo2 classscroll-view-item uni-bg-greenB/viewview iddemo3 classscroll-view-item uni-bg-blueC/view/scroll-view/viewview tapgoTop classuni-link uni-center uni-common-mt点击这里返回顶部/view/view/view
/templatescriptexport default {data() {return {// 设置竖向滚动条位置scrollTop: 0,old: {scrollTop: 0}}},onLoad() {console.log(getApp().globalData);},methods: {// 滚动到顶部/左边会触发upper: function(e) {console.log(e)},// 滚动到底部/右边会触发lower: function(e) {console.log(e)},// 滚动时触发scroll: function(e) {console.log(e)this.old.scrollTop e.detail.scrollTop},// 返回顶部goTop: function(e) {// 解决view层不同步的问题this.scrollTop this.old.scrollTopthis.$nextTick(function() {this.scrollTop 0});// 弹窗uni.showToast({icon: none,title: 纵向滚动 scrollTop 值已被修改为 0})}}}
/scriptstyle
.scroll-Y {height: 300rpx;}.scroll-view_H {white-space: nowrap;width: 100%;}.scroll-view-item {height: 300rpx;line-height: 300rpx;text-align: center;font-size: 36rpx;}.scroll-view-item_H {display: inline-block;width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;font-size: 36rpx;}.uni-bg-red{background-color: red;}.uni-bg-green{background-color: green;}.uni-bg-blue{background-color: blue;}
/style 2、提示框
1showToast显示消息提示框
2showLoading显示 loading 加载中
templateviewbutton clickshowToast classbtn点击显示消息提示框/buttonbutton clickshowLoading classbtn点击显示Loading提示框/button/view
/templatescriptexport default {data() {return {}},methods: {// 显示消息提示框showToast: function(e) {uni.showToast({icon: none,title: 显示消息内容})},// 显示Loading提示框showLoading: function(e) {uni.showLoading({title: 加载中})// 2秒后提示隐藏setTimeout(function () {uni.hideLoading();}, 2000);},}}
/scriptstyle
.btn{width: 80%;margin:20rpx auto;
}
/style3、swiper滑块视图容器
templateviewview classuni-margin-wrapswiper classswiper circular :indicator-dotsindicatorDots :autoplayautoplay :intervalinterval:durationdurationswiper-item v-for(item,index) in imgArrview classswiper-item :classitem.background{{item.title}}/view/swiper-item/swiper/viewview classswiper-listview classuni-list-cell uni-list-cell-pdview classuni-list-cell-db指示点/viewswitch :checkedindicatorDots changechangeIndicatorDots //viewview classuni-list-cell uni-list-cell-pdview classuni-list-cell-db自动播放/viewswitch :checkedautoplay changechangeAutoplay //view/viewview classuni-padding-wrapview classuni-common-mttext幻灯片切换时长(ms)/texttext classinfo{{duration}}/text/viewslider changedurationChange :valueduration min500 max2000 /view classuni-common-mttext自动播放间隔时长(ms)/texttext classinfo{{interval}}/text/viewslider changeintervalChange :valueinterval min2000 max10000 //view/view
/templatescript
export default {data() {return {// 是否显示面板指示点indicatorDots: true,// 是否自动切换autoplay: true,interval: 2000,duration: 500,imgArr:[{title:A,background:uni-bg-red},{title:B,background:uni-bg-green},{title:C,background:uni-bg-blue}]}},methods: {changeIndicatorDots(e) {this.indicatorDots !this.indicatorDots},changeAutoplay(e) {this.autoplay !this.autoplay},intervalChange(e) {this.interval e.target.value},durationChange(e) {this.duration e.target.value}}
}
/scriptstyle.uni-margin-wrap {width: 690rpx;width: 100%;}.swiper {height: 300rpx;}.swiper-item {display: block;height: 300rpx;line-height: 300rpx;text-align: center;}.swiper-list {margin-top: 40rpx;margin-bottom: 0;}.uni-common-mt {margin-top: 60rpx;position: relative;}.info {position: absolute;right: 20rpx;}.uni-padding-wrap {width: 550rpx;padding: 0 100rpx;}
/style 注意如果滑块没有背景色是因为小编把背景色的css配置在了App.vue的全局样式 4、form表单组件
1说明
form submitformSubmit resetformReset/form
① submit携带 form 中的数据触发 submit 事件
② reset表单重置触发 reset 事件
2代码实例
templateviewviewform submitformSubmit resetformResetview classuni-form-item uni-columnview classtitleswitch/viewviewswitch nameswitch //view/viewview classuni-form-item uni-columnview classtitle性别/viewradio-group nameradiolabelradio value0 /text男/text/labellabelradio value1 /text女/text/label/radio-group/viewview classuni-form-item uni-columnview classtitle爱好/viewcheckbox-group namecheckboxlabelcheckbox valuesing /text唱歌/text/labellabelcheckbox valuedance /text跳舞/text/labellabelcheckbox valueother /text其它/text/label/checkbox-group/viewview classuni-form-item uni-columnview classtitleslider/viewslider value50 nameslider show-value/slider/viewview classuni-form-item uni-columnview classtitleinput/viewinput classuni-input nameinput placeholder这是一个输入框 //viewview classuni-btn-vbutton form-typesubmitSubmit/buttonbutton typedefault form-typeresetReset/button/view/form/view/view
/templatescriptexport default {data() {return {}},methods: {formSubmit: function(e) {console.log(form发生了submit事件携带数据为 JSON.stringify(e.detail.value))var formdata e.detail.valueuni.showModal({content: 表单数据内容 JSON.stringify(formdata),showCancel: false});},formReset: function(e) {console.log(清空数据)}}}
/scriptstyle.uni-form-item .title {padding: 20rpx 0;}
/styleform 中的组件需要加上 name 来作为 key使得 submit 事件会将组件中的 value 值进行提交
