uni-app的使用

官网：uni-app官网

介绍：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

开发工具：HbuilderX

创建项目：

    1.点击HbuilderX菜单栏文件>项目>新建

    2.选择uni-app,填写项目名称，项目创建的目录

介绍项目目录和文件作用： 

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

unpackage就是打包目录，在这里有各个平台的打包文件

pages所有的页面存放目录

static静态资源目录，例如图片等

components组件存放目录

运行项目：

在菜单栏中点击运行，运行微信开发者工具（微信开发者工具中设置-安全设置-服务端口开启状态）

创建新的home页面:

右键pages新建>目录>home，在home目录下右键新建.vue文件,并选择基本模板

通过pages来配置页面:

属性	类型	默认值	描述
path	String		配置页面路径

"pages": [ 
		{
			"path":"pages/home/index"
		},
		{
			"path": "pages/index/index"
		}
	]

通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式:

style

Object

配置页面窗口表现，配置项参考 pageStyle

"pages": [ 
		{
			"path":"pages/home/index",
			"style": {
				"navigationBarBackgroundColor": "#007AFF",//导航栏背景颜色 
				"navigationBarTextStyle": "white",//导航栏标题颜色及状态栏前景颜色
				"enablePullDownRefresh": true,//开启下拉刷新
				"disableScroll": true,
                "navigationBarTitleText": "uni-app"//导航栏标题文字内容
				"h5": {
					"pullToRefresh": {
						"color": "#007AFF"
					}
				}
			}
		}
	]

配置tabbar:

"tabBar": {
        //list列表，最少2个、最多5个 tab
		"list": [
			{
				"text": "首页",//tab 上按钮文字
				"pagePath":"pages/home/index",//页面路径，必须在 pages 中先定义
				"iconPath":"static/tabs/home.png",//图片路径
				"selectedIconPath":"static/tabs/home-active.png"//选中时的图片路径
			},
			{
				"text": "商品",
				"pagePath":"pages/message/message",
				"iconPath":"static/tabs/message.png",
				"selectedIconPath":"static/tabs/message-active.png"
			},
			{
				"text": "我的",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/contact.png",
				"selectedIconPath":"static/tabs/contact-active.png"
			}
		]
	}

组件的基本使用:

1.view视图容器

属性名称	是否必需	类型	默认值	说明
hover-class	否	String	none	指定按下去的样式类，其值是一个CSS样式类名，默认值none时点击没有效果
hover-stop-propagation	否	Boolean	false	是否阻止本节点的祖先节点出现点击态（即使其上级节点的hover-class样式是否生效）
hover-start-time	否	Number	50	按住后多久出现hover-class的样式，单位是毫秒（不管值设置多久，都会出现点击效果）
hover-stay-time	否	Number	400	手指松开后点击态保留时间，单位毫秒

2.text文本

   
		
		长按文本可选
		
		空格   方式
		
		  < > & '    
	

3.button按钮

//size大小、type样式类型、plain是否镂空、disabled是否禁用、loading是否带loading图标
前端

4.image图片

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
缩放	heightFix	高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3

 数据绑定

{{msg}}

export default {
  data () {
    return {
      msg: 'hello-uniapp'
    }
  }
}

v-bind动态绑定属性

export default {
  data () {
    return {
      img: 'http://xxxxx.jpg'
    }
  }
}

v-for循环数组

	名字：{{item.name}}
	---年龄：{{item.age}}

data () {
  return {
    arr: [
      { name: '一号', age: 10 },
      { name: '二号', age: 20 },
      { name: '三号', age: 30 },
      { name: '四号', age: 40 }
    ]
  }
}

事件绑定

点一下触发btn方法

methods: {
			btn() {
				console.log('触发了')
			}
}

应用的生命周期：

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发

页面的生命周期 ：

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序

uni-app中自带的弹窗:

1.uni.showToast消息提示框：

         uni.showToast({
				title: "提示内容",
				icon:"none", //不要图标
				duration:8500 //显示时长
			});

2、uni.showModal带确认取消按钮的提示框：

     uni.showModal({
				 title:  "标题",
				 content: "内容",
				 success: function (res) {
					  if (res.confirm) {
					         console.log('用户点击确定');
					   } else{
					         console.log('用户点击取消');
					   }
				}
    });

 3.uni.showActionSheet从底部向上弹出操作菜单：

uni.showActionSheet({
			itemList: ['A', 'B', 'C','D'], //列表的内容
			success (res) {
					console.log(res.tapIndex) //下标0开始
			},
			fail (res) {
					console.log(res.errMsg)
			}
})

网络请求：

调用uni.request方法进行请求网络请求

//发送get请求
uni.request({
					method: 'GET',
					url: 'http://xxx.xxx.xxxx/api/admin/anon/xwarticle/list',
					data: {
						page: 1,
						limit: 10,
						articleLabel: "1"
					},
					header: {
						'Accept': "*/*",
						'content-type': 'application/json;charset=utf-8',
						'token': "",
					},
					success(res) {
						console.log(res);
					},
})

//发送post请求
uni.request({
					method: 'POST',
					url: 'http://xxx.xxx.xxxx/api/admin/anon/xwarticle/list',
					data: {
						page: 1,
						limit: 10,
						articleLabel: "1"
					},
					header: {
						'Accept': "*/*",
						'content-type': 'application/json;charset=utf-8',
						'token': "",
					},
					success(res) {
						console.log(res);
					},
})

导航跳转:

1 .navigator 

		跳转到商品页面

2.navigateTo:保留当前页面，跳转到应用内的某个页面

跳转页面

btn() {
				uni.navigateTo({
					url: '/pages/about/index'
				})
}

3.switchTab:跳转到tabbar页面

  uni.switchTab({
    url: '/pages/commodity/index'
  })

uni-app中使用uView 组件库：

如果您的根目录没有package.json文件的话，请先执行如下命令：npm init -y

 

安装 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

npm安装：

npm install [email protected]

 在main.js中配置：

//注意这两行要放在import Vue之后
import uView from 'uview-ui'
Vue.use(uView)

在uni.scss中配置：注意引入的路径需要根据你按照的文件去引入

@import 'uview-ui/theme.scss';

在 App.vue 的 style 中引入 index.scss

在pages.json中配置：

   //easycom的作用：引入 easycom 后，无需手动导入组件
	"easycom": {
			"autoscan": true,
			"custom": { // 这里修改后一定要重启 HBuilderX（踩坑）
				"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" 
			}
	},

 修改后一定要重启 HBuilderX

在页面中引用组件：

补充：vant-weapp组件

https://youzan.github.io/vant-weapp/#/home

http://t.csdn.cn/LkUqj

案例：获取微信授权登录

登录
              wx.getUserProfile({
					desc: '必须授权才能继续使用',
					success: (res) => {
						wx.setStorageSync('user', res.userInfo) //存
						this.user = res.userInfo
						this.login = true//登录成功之后显示
					},
					fail: (err) => {
						console.log('授权失败', err);
					}
				})
退出
            Logout() {
				wx.setStorageSync('user', '') // 清空缓存
				this.login = false//退出之后页面隐藏
			}

//一进入页面的时候判断一下是否登录过
onLoad() {
			var user = wx.getStorageSync('user') //取
			this.user = user
			if (this.user == '') {
				this.login = false//数据为空的时候没有登录过页面隐藏
			} else {
				this.login = true//登录过直接显示
			}
},

案例：获取code,openid，session_key

             uni.login({
					success: function(loginRes) {
						console.log(loginRes.code); // 获取code
						let code = loginRes.code
						wx.request({
							url: `https://api.weixin.qq.com/sns/jscode2session?appid=AppID(小程序ID)&secret=AppSecret(小程序密钥)&js_code=${code}&grant_type=authorization_code`,
							method: 'POST',
							data: {
								code: code 
							},
							header: {
								'content-type': 'application/json;charset=UTF-8'
							},
							success: function(res) {
								console.log(res,"3333");
							}
						})
					}
				});

阻止事件冒泡写法：@click.native.stop