uniapp 上手杂记 – 网络风向标

1、APP生命周期

onLoad: 页面加载
一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
onShow: 页面显示
每次打开页面都会调用一次。
onReady: 页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏
当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。

2、组件生命周期

<template>
  <view>
    {{ message }}
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello, uniapp!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 组件实例被创建之前');
  },
  created() {
    console.log('created: 组件实例创建之后');
  },
  beforeMount() {
    console.log('beforeMount: 模板编译/渲染之前');
  },
  mounted() {
    console.log('mounted: 模板编译/渲染之后');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 组件实例销毁之前');
  },
  destroyed() {
    console.log('destroyed: 组件实例销毁之后');
  }
};
</script>

3、组件的属性参数及变量

属性参数放在props 中，举例：

props:{
	datevalue:{
		type:String,
		default:''
	}
},

组件的变量仍然放置在data中：

data() {
	return{
		date_info:{
			date_yangli : '',
		}
	};
},

两种变量可以直接调用，与data中的变量一样：

[1]、html模板调用

<view>{{datevalue}}  {{date_info}}</view>

[2]、脚本中

var d = Solar.fromDate(new Date(this.datevalue));
this.date_info.date_yangli = d.getYear()+'年' + d.getMonth()+'月' + d.getDay()+'日';

uniapp页面间传参的几种方法实例

一、上级页面 → 下级页面（单向）

uni.navigateTo:URL编程式传参

作为最常用也是最简单的跳转携带参数的API，这里不多赘述，想详细了解的朋友可以前往官方文档学习，这里只做传参分享。

官方文档：uni.navigateTo(OBJECT)

携带静态参数

//在起始页面跳转到test.vue页面并传递参数
//作用场景，需要提供固定传参状态的页面，一般和动态参数一起使用
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

携带动态参数

//在起始页面跳转到test.vue页面并传递参数
let uniapp = {
    uniappItem: 0,
};
//当传递的参数是对象时，必须先转化为JSON格式
uni.navigateTo({
	url: 'test?id=1&name=' + JSON.stringify(uniapp),
});

页面接收

// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

<navigator>标签传参

URL有长度限制，太长的字符串会传递失败，可改用窗体通信、全局变量，另外参数中出现空格等特殊字符时需要对参数进行编码，如下为使用encodeURIComponent对参数进行编码的示例。

标签传参

//此处的 :URL 是动态载入，参数是变量;
//当使用了 :URl 却使用了静态地址，有可能不生效，同样如果使用了变量却没有用 :URL 也会有问题
<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))">
</navigator>

页面接收

// 在test.vue页面接受参数
onLoad: function (option) {
	const item = JSON.parse(decodeURIComponent(option.item));
}

二、上级页面 ← 下级页面（单向）

一般来说 uni.navigateTo 的参数传递可以满足页面的传递，但遇到需要更新上级页面的需求时，就需要使用uni. e m i t ( ) 和 u n i . emit()和uni. emit()和uni.on() 进行页面间通讯。

该方法一般运用在当你从下级页面（或组件）改变数据后，通知上级页面进行刷新或其他操作，实在不清楚也没关系，当你需要时自然明白。

uni.$on(eventName,callback)：监听事件

在上级页面设置 uni.$emit() 来监听下级页面的调用，其中的eventName就是事件名称，第二个参数是接受到函数后触发的回调函数。在监听事件结束后一定要移除监听事件，不然会有重复监听的问题。

// 我的页面  
onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除监听事件  
    uni.$off('login');  
},

触发事件

传递的参数一定是要在对象中的属性

uni.$emit('login', {  
	avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
	token: 'user123456',  
	userName: 'unier',  
	login: true  
});

三、上级页面 ↔ 下级页面（双向）

在一般情况下，单向传递已经可以满足我们的业务需求，如向下级页面传递需要显示的参数、变动的状态，向上级页面传递的需要更新的数据或是需要再次调用的函数。

但遇到两个联系十分紧密的页面时，单向传递就无法满足我们的业务需求，向下级页面传递参数和监听事件就会显得特别繁琐。在uniapp中，它将上面两种传递方式加以结合，提供了这样一个方法去实现双向传递：uni.navigateTo({ event:{} })

上级页面内代码

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: 'pages/test?id=1',
  // 调用通信事件对象
  events: {
    // 获取下级页面参数：
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    // 注意看下级页面中所对应的函数名，你可以定义多个方法去管理传递的参数
    acceptDataFromOpenedPage: function(data) {
      // 对数据做处理
      console.log(data)
    },
    someEvent: function(data) {
      // 对数据做处理
      console.log(data)
    }
  },
  // 发送通信方法
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    // 其中含有两个参数，第一个是接收的函数名，第二个则是需要携带的参数
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

下级页面内代码

// 在test.vue页面，向起始页通过事件传递数据
// 此方法不是一定要在 onLoad 内调用，哪里需要哪里调
onLoad: function(option) {
  // 此处声明只是为了显示看起来简洁一点
  const eventChannel = this.getOpenerEventChannel();
  // emit 代表的就是向上一个页面传递需要更新的数据
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 接收上个页面传递的数据
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    // 对数据做处理
    console.log(data)
  })
}

发起网络请求【程序接口访问及数据获取】

uni.request(OBJECT)

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    method: 'POST', //发送方式 get post put。。。。
    data: {
        type: 'grid' //参数，可以多个
    },
    header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Access-Control-Allow-Origin': '*' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

OBJECT 参数说明

参数名	类型	必填	默认值	说明	平台差异说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数	App 3.3.7 以下不支持 ArrayBuffer 类型
header	Object	否		设置请求的 header，header 中不能设置 Referer	App、H5端会自动带上cookie，且H5端不可手动修改
method	String	否	GET	有效值详见下方说明
timeout	Number	否	60000	超时时间，单位 ms	H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
dataType	String	否	json	如果设为 json，会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse
responseType	String	否	text	设置响应的数据类型。合法值：text、arraybuffer	支付宝小程序不支持
sslVerify	Boolean	否	true	验证 ssl 证书	仅App安卓端支持（HBuilderX 2.3.3+），不支持离线打包
withCredentials	Boolean	否	false	跨域请求时是否携带凭证（cookies）	仅H5支持（HBuilderX 2.6.15+）
firstIpv4	Boolean	否	false	DNS解析时优先使用ipv4	仅 App-Android 支持 (HBuilderX 2.8.0+)
enableHttp2	Boolean	否	false	开启 http2	微信小程序
enableQuic	Boolean	否	false	开启 quic	微信小程序
enableCache	Boolean	否	false	开启 cache	微信小程序、抖音小程序 2.31.0+
enableHttpDNS	Boolean	否	false	是否开启 HttpDNS 服务。如开启，需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见移动解析HttpDNS	微信小程序
httpDNSServiceId	String	否		HttpDNS 服务商 Id。 HttpDNS 用法详见移动解析HttpDNS	微信小程序
enableChunked	Boolean	否	false	开启 transfer-encoding chunked	微信小程序
forceCellularNetwork	Boolean	否	false	wifi下使用移动网络发送请求	微信小程序
enableCookie	Boolean	否	false	开启后可在headers中编辑cookie	支付宝小程序 10.2.33+
cloudCache	Object/Boolean	否	false	是否开启云加速（详见云加速服务）	百度小程序 3.310.11+
defer	Boolean	否	false	控制当前请求是否延时至首屏内容渲染后发送	百度小程序 3.310.11+
success	Function	否		收到开发者服务器成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
data	Object/String/ArrayBuffer	开发者服务器返回的数据
statusCode	Number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header
cookies	`Array.<string>`	开发者服务器返回的 cookies，格式为字符串数组

data 数据说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

开发期间测试跨域访问的问题

uniapp使用uni.request()API发起接口请求时:因受到CORS(浏览器同源策略影响)出现跨域Access-Control-Allow-Origin的问题解决方案

选择源码视图对manifest.json配置文件进行编辑：增加这块内容

例子：如果访问的接口地址为：http://localhost:3000/retroaction , 为了区分代理地址，所有的经过代理的地址前面需要增加/api, pathRewrite重写路径,替换掉/api.

    "h5": {
        "devServer": {
            "proxy": {//配置代理服务器来解决跨域问题，uniapp不适用CORS方案和设置JSONP方案
                "/api": { //映射域名
                    "target": "http://localhost:3000",
                    "pathRewrite": {
                        "^/api": ""
                    }
                }
            }
        }
    }

如果接口地址已经固定，可以用第二种方式配置，不使用重写路径设置

"h5": {
        "devServer": {
            "proxy": {//配置代理服务器来解决跨域问题，uniapp不适用CORS方案和设置JSONP方案
                "/retroaction": { //映射域名
                    "target": "http://localhost:3000",
                 
                }
            }
        }
    }

重启项目，当前端再次发起uni.request()接口请求时，不再受浏览器同源策略CORS的影响,也不再需要配置请求头:Access-Control-Allow-Origin

uni.request({
    url: '/api/retroaction',
    method: 'POST',
    data: {},
    success: res => {console.log(JSON.stringify(res))},
    fail: () => {},
    complete: () => {}
})

第二种配置方式的调用，直接省略域名部分就可以了

uni.request({
    url: '/retroaction',
    method: 'POST',
    data: {},
    success: res => {console.log(JSON.stringify(res))},
    fail: () => {},
    complete: () => {}
})

使用条件编译（如#ifdef和#endif）根据APP-PLUS平台标识在微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序以及H5应用中实现代码的平台特定执行。通过两个示例展示了在5+app上启用和在非5+app上禁用代码的方法。

#ifdef	仅在某个平台上使用
#ifndef	在除了这个平台的其他平台上使用(非此平台使用）
#endif	结束条件编译

平台标识的意思

标识	平台
APP-PLUS	5+App
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	头条小程序
MP-QQ	QQ小程序
H5	H5
APP-PLUS-NVUE	5+App nvue

使用例子

例子1（仅在5+app平台上此代码生效）

/*
	可以使用// 或者 <!-- -->
*/
// #ifdef APP-PLUS
 <view>仅在5+app平台上显示代码</view>
// #endif

methods: {
// #ifdef APP-PLUS
click(){
console.log(‘仅在5+app平台上生效的事件’)
},
// #endif
}

例子2（非5+app平台上此代码生效）

/*
	可以使用// 或者 <!-- -->
*/
<!-- #ifndef APP-PLUS -->
 <view>只要不是5+app平台上此代码会显示</view>
<!-- #endif -->

methods: {
<!– #ifndef APP-PLUS –>
click(){
console.log(‘非5+app平台上生效的事件’)
},
<!– #endif –>
}

很多人个人开发了小程序以后，审核无法通过。下面给出了个人主体小程序允许的服务类目，请参考官网目录

个人主体小程序开放的服务类目

物流服务

二级分类	三级分类	资质要求	类目适用范围	备注
查件	查件	/	适用于提供快递、物流行业的查件业务等服务。注：不包含寄件、收件业务。	/
装卸搬运	/	/	适用于物流设施内的装卸搬运业务，如工程、港口等地方货物装卸。	/

教育服务

二级分类	三级分类	资质要求	类目适用范围	备注
婴幼儿教育	/	/	适用于0～6岁年龄阶段的婴幼儿教育。	/
在线教育	/	/	适用于在线教育、网络教育或者远程教育等以互联网为载体的教育服务。	/
教育装备	/	/	适用于教育教学活动所需的教具、学具、器材、设施、场所及其配置服务。	/
特殊人群教育	/	/	适用于特殊人群方面相关的教育。	/

交通服务

二级分类	三级分类	资质要求	类目适用范围	备注
代驾服务	/	/	提供代驾服务注：不包含提供顺风车、网约车等服务。	/

生活服务

二级分类	三级分类	资质要求	类目适用范围	备注
丽人	美甲	/	提供美甲、美容、美睫、美发、纹身、祛痘、纤体瘦身、舞蹈、瑜伽等不含医疗美容服务。注：不包含医疗美容服务（如：隆鼻、激光等）、推拿、洗浴等个人小程序中未开放类目经营范围。	/
	美容
	美睫
	美发
	纹身
	祛痘
	纤体瘦身
	舞蹈
	瑜伽
	其他
婚庆服务	/	/	提供婚礼庆典策划、婚纱摄影、婚宴酒席、婚礼摄像、蜜月旅行等相关服务。注：不包含社交婚恋服务	/
家政服务	/	/	适用于提供家政服务，如保姆、月嫂、房屋保洁、家电维修、数码电器维修等在线预约等服务。	/

餐饮服务

二级分类	三级分类	资质要求	类目适用范围	备注
餐厅排队	/	/	提供个体餐饮门店提供就餐线上取号、排号等排队服务。注：不包含线上点餐、外卖等服务。	/

旅游服务

二级分类	三级分类	资质要求	类目适用范围	备注
出境WiFi	/	/	提供提供出境WIFI租赁/销售。注：不包含境外流量、话费充值服务。	/

工具

二级分类	三级分类	资质要求	类目适用范围	备注
记账	/	/	提供如：消费记录等模板功能的记账工具。注：不包含提供用户自定义生成内容记录及分享。	/
日历	/	/	提供日历相关服务。	/
天气	/	/	提供天气查询等相关服务。	/
办公	/	/	提供办公工具等服务。	/
图片处理	/	/	提供图片/音频/视频制作、剪辑。	/
计算器	/	/	提供计算工具等。	/
报价/比价	/	/	提供商品报价、价格对比服务。	/
信息查询	/	/	提供信息查询功能。	/
预约/报名	/	/	提供预约/报名功能。	/
健康管理	/	/	提供身高、体重等健康管理记录。	/
备忘录	/	/	适用于提供待办事项记录功能服务；注：不涉及用户原创内容的传播及公开访问。	/

商业服务

二级分类	三级分类	资质要求	类目适用范围	备注
律师	/	《律师执业资格证》	适用于已通过国家司法考试并依法取得律师执业证书的执业人员接受委托或者指定，为当事人提供在线法律服务。	/
企业管理	/	/	适用于提供企业办公工具/办公管理、门店信息管理、展示等服务。	/
会展服务	/	/	提供商业会展服务，会展中心推广/介绍等。	/
公关/推广/市场调查	/	/	适用于提供商业性质市场调研、推广、公关等服务。	/
环保回收/废品回收	/	/	适用于环保、废品回收企业提供废旧物资、二手设备、废金属、废塑料设备等物品回收服务。	/
摄影/扩印	/	/	适用于提供证件照、艺术照摄影、相片扩印等服务。	/

体育

二级分类	三级分类	资质要求	类目适用范围	备注
体育培训	/	/	提供各种体育项目培训/学习的服务。	/
在线健身	/	/	提供各类型的健身运动在线学习/在线指导服务。	/