uni-app 组件规范和扩展api与微信小程序基本相同。
uni-app提供了条件编译优化，可以优雅的为某平台写个性化代码、调用专有能力而不影响其他平台。
不能使用标准HTML标签，也不能用js对dom进行操作
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范

uni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。
开发者可以通过设计稿基准宽度计算页面元素 upx 值，设计稿 1px 与框架样式 1upx 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

uniapp
http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/93

uniapp
组件https://uniapp.dcloud.io/component/README

Vue 单文件组件 (SFC) 规范
https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B

uniapp接口
https://uniapp.dcloud.io/api/README

只能有一个根元素
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

weex原生组件
http://weex-project.io/cn/guide/

如何从插件市场下载使用组件
http://ask.dcloud.net.cn/article/35409

预编译器错误：代码使用了scss/sass语言，但未安装相应编译器，请在菜单工具-插件安装里安装相应编译插件 at components\uni-grid\uni-grid.vue:1
sass/scss在Hbuilder中的环境配置
https://blog.csdn.net/qq_37617413/article/details/65632848

小程序与小游戏获取用户信息接口调整，请开发者注意升级。
https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01
mpvue 获取用户信息 getUserInfo 与 bindGetUserInfo
https://blog.csdn.net/huchangjiang0/article/details/83149592

快速创建组件：以u开头加上组件的字母

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
不能在 App.vue 里面进行页面跳转。
详见：https://uniapp.dcloud.io/frame?id=getcurrentpages

条件编译
uni-app 区分当前环境是H5、App还是微信小程序，可以使用条件编译的方式，参考：条件编译https://uniapp.dcloud.io/platform

Flex布局
为支持跨平台，框架建议使用Flex布局，关于Flex布局可以参考外部文档A Complete Guide to Flexbox等。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Dcloud Grid 宫格组件使用
下载地址:https://ext.dcloud.net.cn/plugin?id=27
组件存放路径如下:

<template>
	<view>
	<uni-grid :data="[
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/shu.png',text:'圣诞树'},
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/lindang.png',text:'铃铛'},
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/laoren.png',text:'圣诞老人'},
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/liwu.png',text:'礼物'},
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/maozi.png',text:'帽子'},
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/shoutao.png',text:'手套'},
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/xueqiao.png',text:'雪橇'},
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/xunlu.png',text:'驯鹿'},
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/xuehua.png',text:'雪花'}]"> 
       </uni-grid>
	</view>
</template>
<script>
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	export default {
		data() {
			return {
 
			};
		},
		components: {uniGrid}
	}
</script>
<style>
</style>

弹出框Dialog的使用方法
组件地址https://ext.dcloud.net.cn/plugin?id=59

<template>
	<view class="xydialig">	
		<text class="xydialig-title">消息提示</text>
		<view class="xydialig-content">
			<button type="primary" @click="handleAlert01">有标题提示</button>
			<button type="primary" @click="handleAlert02">无标题提示</button>
		</view>		
 
		<text class="xydialig-title">消息确认</text>
		<view class="xydialig-content">
			<button type="primary" @click="handleAlert03">确认消息提示</button>
		</view>
 
		<!-- 有标题提示组件 -->
		<xy-dialog 
			ref="xyDialog01" 
			@cancelButton="handleClose" 
			@confirmButton="handleConfirm" 
			title="还不错哦"
		></xy-dialog>
 
		<!-- 无标题提示组件 -->
		<xy-dialog 
			ref="xyDialog02" 
			title="false"
			@cancelButton="handleClose" 
			@confirmButton="handleConfirm"
		></xy-dialog>
 
		<!-- 消息确认提示组件 -->
		<xy-dialog 
			ref="xyDialog03" 
			@cancelButton="handleClose" 
			@confirmButton="handleConfirm"
		></xy-dialog>
 
	</view>
</template>
 
<script>
	// 引入组件
	import xyDialog from '../../components/xy-dialog/xy-dialog.vue'
	export default {
		components: {
			xyDialog
		},
		data() {
			return {
 
			}
		},
		methods: {
			// 有标题提示方法
			handleAlert01 () {
				this.$refs.xyDialog01.alert()
			},
			// 无标题提示方法
			handleAlert02 () {
				this.$refs.xyDialog02.alert()
			},
			// 消息确认提示方法
			handleAlert03 () {
				this.$refs.xyDialog03.confirm()
			},
			// 关闭按钮方法
			handleClose () {
				console.log('点击关闭按钮')
				uni.showToast({
					title: '点击关闭按钮,触发自定义事件',
					icon: 'none'
				})
			},
			// 确定按钮方法
			handleConfirm () {
				console.log('点击确定按钮')
				uni.showToast({
					title: '点击确定按钮,触发自定义事件',
					icon: 'none'
				})
			}
		}
	}
</script>
 
<style>
	.xydialig {
		padding: 30upx;
	}
	.xydialig-title {
		padding: 30upx 0;
		color: #606266;
	}
	.xydialig-content {
		padding: 30upx 0;
	}
	.xydialig-content button {
		margin-bottom: 10upx;
	}
</style>

dialog可以自定义的属性如下，可以从组件接收父组件的参数查看：

			title: {
				type: String,
				default: '标题'
			},
			message: {
				type: String,
				default: '你怎么会看到我^_^'
			},
			// 内容对齐方式 center | left | right
			messageAlign: {
				type: String,
				default: 'center'
			},
			// 是否显示确认按钮
			showConfirmButton: {
				type: Boolean,
				default: true
			},
			// 是否显示取消按钮
			showCancelButton: {
				type: Boolean,
				default: false
			},
			// 确定按钮的文案
			confirmButtonText: {
				type: String,
				default: '确定'
			},
			// 取消按钮的文案
			cancelButtonText: {
				type: String,
				default: '取消'
			},
			// 是否显示蒙层
			overlay: {
				type: Boolean,
				default: true
			},
			// 点击蒙层是否关闭弹窗
			closeOnClickOverlay: {
				type: Boolean,
				default: false
			}

uni-app 全局变量的几种实现方式
①公用模块
定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。
\common\helper.js

const websiteUrl = 'http://uniapp.dcloud.io';
const now = Date.now || function () {
    return new Date().getTime();
};
const isArray = Array.isArray || function (obj) {
    return obj instanceof Array;
};
 
export default {
    websiteUrl,
    now,
    isArray
}

\pages\helperjs\index.vue 引入helper.js并使用

<script>
    import helper from '../../common/helper.js';
    export default {
        data() {
            return {
				title:'这是一个标题字符串',
				user:[{
					name:'小明',
					age:'男',
					},
					{
						name:'小红',
						age:'女',
						}]
			};
        },
        onLoad(){
            console.log('now():' + helper.now());    //  now():1546516899422
	    console.log(helper.isArray(this.user));  //  true
        },
        methods: {
        }
    }
</script>

②挂载 Vue.prototype
将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来。
main.js

Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io';
Vue.prototype.now = Date.now || function () {
    return new Date().getTime();
};
Vue.prototype.isArray = Array.isArray || function (obj) {
    return obj instanceof Array;
};

\pages\helperjs\index.vue

<script>
    export default {
        data() {
            return {
				title:'这是一个标题字符串',
				user:[{
					name:'小明',
					age:'男',
					},
					{
						name:'小红',
						age:'女',
						}]
			};
        },
        onLoad(){
            console.log('now():' + this.now());    //  now():1546516899422
	    console.log(this.isArray(this.user));  //  true
        },
        methods: {
        }
    }
</script>

在HBuilder X\templates\file\vue中可以快速创建HBuilderX文件

uni-app指定重启开启页面 可以设置多个页面

 "condition": { //编译模式配置，仅开发期间生效
        "current": 0, //当前激活的编译模式（list 的索引项）
        "list": [{
            "name": "课程", //模式名称
            "pathName": "pages/course/detail", //启动页面，必选
             "query": "id=1" //启动参数, QueryString 格式
        }]
    }

获得url参数
onLoad:function(e){
console.log(JSON.stringtify(e));
}
uni-app 中使用微信小程序第三方 SDK 及资源汇总
http://ask.dcloud.net.cn/article/35070

返回上一页并且携带参数

let pages = getCurrentPages();  //获取所有页面栈实例列表
let nowPage = pages[ pages.length - 1];  //当前页页面实例
let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
prevPage.$vm.sh = 100;   //修改上一页data里面的sh参数值为100
uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
    delta: 1
});

uniapp防抖

		data() {
			return {
				timer: null
			}
		},
        methods:{
 		     			// 防抖函数
			debounce(fn, delay) {
				if (this.timer) clearTimeout(this.timer);
				this.timer = setTimeout(function() {
					fn();
				}, delay);
			}
			searchStation(e) {
				this.debounce(() => {
					this.search()
				}, 2000)
			},
			search() {
				console.log('search')
			},
		}

当前运行的基座不包含原生插件
报错：当前运行的基座不包含原生插件[JY-JPush]，请在manifest中配置该插件，重新制作包括该原生插件的自定义运行基座
①菜单：运行基座选择=》自定义调试基座（重新创建的目录需要选择）
②制作自定义基座

编译时就会提示 安装”安装手机端自定义基座”
13:07:34.315 项目 ‘serviceManager_app’ 编译成功。
13:07:34.628 正在建立手机连接…
13:07:37.014 正在安装手机端自定义基座…
13:07:47.218 Success
13:07:47.313 3397 KB/s (12480483 bytes in 3.587s)
13:07:47.758 正在同步手机端程序文件…
13:07:48.743 同步手机端程序文件完成
13:07:48.898 正在启动自定义基座…

JY-JPush极光推送插件

/**极光推送插件 https://ext.dcloud.net.cn/plugin?id=741**/
export function setPushAlias(uid) {
	//#ifdef APP-PLUS
	const jyJPush = uni.requireNativePlugin('JY-JPush');
 
	let platform = uni.getSystemInfoSync().platform
	if (platform == 'ios') {
			jyJPush.setJYJPushAlias({
				userAlias: uid
			}, result => {});
			jyJPush.addJYJPushReceiveOpenNotificationListener(result => {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			});
	} else if (platform == 'android') {
		// 安卓需要单独初始化 uniapp初始化
		jyJPush.android_init(res => {
			console.log('初始化' + JSON.stringify(res))
			if (res.errorCode == 0) {
				jyJPush.setJYJPushAlias({
					userAlias: uid
				}, result => {
					console.log('极光push设置别名')
					console.log(JSON.stringify(result));
				});
 
				// 6.2.监听点击通知栏消息事件（点击通知栏的消息，或者悬浮框，会触发；
				// 做事件跳转，需要用到这个接口
				jyJPush.addJYJPushReceiveOpenNotificationListener(result => {
					console.log('消息点击事件')
					//{"failedLink":"","showResourceList":[],"richType":0,"inAppMsgType":1,"_webPagePath":"","appkey":"ca49a4e040c57efc0a5ccba6","notificationExtras":"{}","inAppMsgShowType":2,"inAppMsgContentBody":"","developerArg0":"","isWmDeepLink":false,"deeplink":"","notificationStyle":0,"notificationPriority":0,"notificationAlertType":7,"sspWmOriginId":"","notificationInbox":"","notificationId":524813184,"appId":"com.zhongtong.workorder","targetPkgName":"","notificationNormalSmallIcon":"","failedAction":0,"isRichPush":false,"inAppType":0,"notificationChannelId":"","notificationTitle":"bbb","notificationContent":"啊啊啊啊啊","sspWxAppId":"","displayForeground":"","notificationCategory":"","notificationSmallIcon":"","notificationType":0,"inAppMsgShowPos":0,"notificationBigPicPath":"","notificationBuilderId":0,"sspWmType":0,"msgId":"54043448846307847","platform":0,"inAppMsgTitle":"","notificationBigText":"","notificationLargeIcon":""}
					console.log(JSON.stringify(result));
					uni.reLaunch({
						url: '/pages/index/index'
					})
				});
			}
		})
	}
	//#endif
}
 
// 删除极光别名
export function deletePushAlias() {
	//#ifdef APP-PLUS
	const jyJPush = uni.requireNativePlugin('JY-JPush');
	// 安卓需要单独初始化 uniapp初始化
	jyJPush.deleteJYJPushAlias({
		//  可以不用传值进去，但是需要配置这项数据
	}, result => {
		console.log('删除别名')
		console.log(JSON.stringify(result))
	});
	//#endif
}

高德地图使用
https://ask.dcloud.net.cn/article/29 地图插件配置

高德地图经纬度转换地址信息（android平台）和天气信息（web服务）
APP模块设置 添加高德地图模块：设置appkey
注意：云端打包选择“公共测试证书”时，SHA1值并非为：BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7，uni.getlocation走fail回调会抛出当前apk的包名和sha1值。

ios真机调试
itools + itunes itools安装驱动后即可真机调试
爱思助手

发表评论

邮箱地址不会被公开。 必填项已用*标注