Uni-app微信小程序开发

Uni-app微信小程序开发

环境配置

下载好h5和微信小程序，在h5中创建一个uni-app空项目

第一次运行到微信小程序的时候，需要将小程序的安装路径放到运行下面

文件含义

Pages：存放页面文件的地方。

Static：存放静态文件（图片，音乐等文件）。

unpackage：打包文件配置。

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData应用生命周期仅可在App.vue中监听，在页面监听无效。

main.js是 uni-app 的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex。

manifest.json：设置打包的文件属性。

pages.json：设置文件路径和全局样式。

uni.scss：全局Css样式。

export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}

文件详情

pages.json：

1. "globalStyle":全局样式。

   1. "navigationBarTextStyle": "whit"文字颜色只有黑色和白色。
   2. "navigationBarTitleText": "uni-app"文件标题。
   3. "navigationBarBackgroundColor": "#00E6FF"文件表头颜色。
   4. "backgroundColor": "#FF9900"文件加载背景色。
   5. "enablePullDownRefresh":true是否启动加载下拉页面。
   6. "backgroundTextStyle":"light"加载的样式只有light（亮色）/dark（灰色）。

2. pages:页面配置加载数组类型，默认第一项为启动项。

   1. "path"页面路径
   2. "style"样式文件可以覆盖全局样式。
      1. "h5"：可以修改页面的h5样式对象类型。

3. tabBar:可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页，最多5个最少两个

   1. "color": "#99CCFF":只支持HexColor类型，文字未选中的颜色。

   2. "selectedColor": "##FFFFFF":和color一样不同的是事选中后的颜色。

   3. "backgroundColor":"#FFFFFF"背景颜色也是HEXColor类型。

   4. "borderStyle":"black":边框颜色只支持black和white两种颜色。

   5. "position": "bottom":tabBar出现的位置默认是下，只有上下两个参数（top/bottom）。

   6. list:tab的列表，数组类型。

      1. "pagePath":"pages/index/index":跳转路径。
      2. "text":"首页":标识名称。
      3. "iconPath":"static/tabs/home.png":未选中时候的icon。
      4. "selectedIconPath":"static/tabs/home-active.png":选中时候的icon。

4. condition:启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

   1. "current": 0：当前激活的模式，list节点的索引值
   2. "list":启动模式列表。
      1. "name": "详情页"页面名称。
      2. "path": "pages/detail/detail":页面路径。
      3. "query": "id=30":页面传值。

组件

text组件

		
			练习两年半
		
		
			练习两年半
		
		
			练习  两年半
		
		
			练习  两年半
		
		
			练习  两年半
		
		
			练习  两年半
		
		
	

view组件

button组件

		demo
		demo 
		demo 
		
		demo 
		demo 
		demo 
		
	

image组件

swiper组件

map组件

		
data() {
			return {
				longitude:112.763788,//经度
				latitude:29.610183,//纬度
				scale:13,//地图大小系数
				markers:[
					{
						longitude:112.763788,
						latitude:29.610183,
						iconPath:'../../static/牛.png',//位置图标
						heigth:20,//icon宽度
						with:20//icon高度
					}
				]
			}
		},

scroll-view组件

uni样式的使用以及scss解释

rpx

rpx即响应式px，是一种根据屏幕宽度自适应的动态单位。uni-app规定屏幕的基准宽度为750rpx。

在实际开发中，1 rpx = 750 * （ 设计稿宽度 / 设计稿基准宽度 ）
设计稿的基准宽度为 750px, 有一个红色方块宽度为100px，换算成rpx 结果为：100rpx ，也就是说 1rpx = 1px
$$750\ast 100/750$$

icon

@import url("static/fonts/iconfont.css");

将 ~@/static/fonts/在iconfot里面的url都要加上

scss

scss快速入门 - 掘金 (juejin.cn)

demo

基本事件绑定

$event

事件绑定属性的参数

生命周期

uniapp

        onLaunch: () => {
			console.log('初始完成')
		},
		onShow: () => {
			console.log('启动')
		},
		onHide: () => {
			console.log('从前台进入后台')
		},
		onError: (err) => {
			console.log("出现错误是触发");
			console.log("错误消息",err);
		}

页面

	onLoad(option) {
		   console.log("页面初次加载",option)
		},
		onShow() {
			console.log("页面显示")
		},
		onReady() {
			console.log("页面初次渲染完成")
		},
		onHide() {
			console.log("页面隐藏了")
		}

下拉刷新

前提要设置"enablePullDownRefresh": true

上拉刷新

get请求

npm install
node ./src/app.js

数据缓存

setStorage

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口

相片上传

条件编译跨平台

页面跳转

值	说明
navigate	保留当前页面，跳转到应用内的某个页面
redirect	关闭当前页面，跳转到应用内的某个页面
reLaunch	关闭所有页面，打开到应用内的某个页面
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

组件创建与组件生命周期

组件创建：

组件生命周期：

传值

父子之间

兄弟之间

uni-ui组件

拨打电话

uni.makePhoneCall({
					phoneNumber:'15677777777'//电话号码
				})

特殊js的解释

 	export 某方法 就是可以让这个方法导出配置相应的import{某方法名称}from '路径'
	在vue中还要写Vue.prototype.$名称=某方法名称；
	调用this.$名称。

    return new Promise():使用
    function demo(){return new Promise(res=>{res("你好")})};console.log(demo());
	Promise语法糖：async 其实就是promise的语法糖。函数前面必须加一个async，异步操作的方法前加一个await 关键字。顾名思义，就是让你等一下，执行完了再继续往下走。注意：await 只能在async函数中执行，否则会报错。
    [...this.数组名,...[]]中的...是展开的意思。

calendar>

### 拨打电话

```vue
uni.makePhoneCall({
					phoneNumber:'15677777777'//电话号码
				})

特殊js的解释

 	export 某方法 就是可以让这个方法导出配置相应的import{某方法名称}from '路径'
	在vue中还要写Vue.prototype.$名称=某方法名称；
	调用this.$名称。

    return new Promise():使用
    function demo(){return new Promise(res=>{res("你好")})};console.log(demo());
	Promise语法糖：async 其实就是promise的语法糖。函数前面必须加一个async，异步操作的方法前加一个await 关键字。顾名思义，就是让你等一下，执行完了再继续往下走。注意：await 只能在async函数中执行，否则会报错。
    [...this.数组名,...[]]中的...是展开的意思。