小程序uniapp基础

介绍

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

uniapp

安装

官网安装详解

在微信小程序中预览

获取小程序AppID

1.新建页面

Hbuilder的uniapp无法自动打开微信开发者工具

设置----安全------打开服务端口

配置

tabBar

tabBar

"tabBar": {
		"borderStyle": "white",
		"list": [{
				"pagePath": "pages/home/home",
				"text": "首页",
				"iconPath": "./static/images/home.png",
				"selectedIconPath": "./static/images/home_light.png"
			},
			{
				"pagePath": "pages/shopcar/shopcar",
				"text": "购物车",
				"iconPath": "./static/images/exit.png",
				"selectedIconPath": "./static/images/exit_light.png"
			},
			{
				"pagePath": "pages/center/center",
				"text": "我的",
				"iconPath": "./static/images/my.png",
				"selectedIconPath": "./static/images/my_light.png"
			}
		]
	}

与微信小程序中的写法一致

快速生成代码

uswiper

<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
	<swiper-item v-for="(item,index) in looplist" :key="index">
		<image :src="'http://localhost:3000'+item.url" mode="widthFix"></image>
	</swiper-item>
</swiper>

DOM结构

DOM结构按照小程序的组件来写，兼容没有问题

模板语法

模板语法按照vue来写

声明周期

生命周期：小程序和Vue的生命周期都支持

• mounted：结构准备完
• onReady：整个页面准备完

mounted比onReady更早执行

wx替换成uni

如果写wx只能再微信中可用，而uni在每个平台上都可以，根据不同的平台转自动换成相应的对象

uni.request({
	url: "http://localhost:3000/recommends",
	success: (res) => {
		console.log('res',res.data)
		this.looplist = res.data
	},
	fail() {}
})

下拉刷新

// pages
{
	"path": "pages/home/home",
	"style": {
		"navigationBarTitleText": "home",
		"enablePullDownRefresh": true // 设置为true,开启下拉刷新
	}
},

在微信中下拉之后会消息，在浏览器中会一直下拉刷新

// 下拉刷新
onPullDownRefresh() {
	console.log('下拉了')
	setTimeout(()=>{
		uni.stopPullDownRefresh()
	},2000)
}

res.header

在微信中,打印header内的内容是X-Total-Count: 16
在浏览器中，打印header内的内容是x-total-count: “16”

点击事件

两种方法都可以

@click=“handleChangePage”
@tap=“handleChangePage”

跳转到选项卡页面

uni.switchTab({
	url:"/pages/center/center"
})

---

更新中--------