uni-app的使用

安装

https://www.dcloud.io/

开始介绍

问题：无法运行到微信开发者工具

点击微信开发者工具的设置->安全->服务端口设置为开启

问题：怎么把现有项目迁移为uni-app项目

https://uniapp.dcloud.io/translate
vue h5项目转换uni-app指南：https://ask.dcloud.net.cn/article/36174
微信小程序转换uni-app指南及转换器：https://ask.dcloud.net.cn/article/35786
wepy转uni-app转换器：https://github.com/zhangdaren/wepy-to-uniapp
mpvue 项目（组件）迁移指南、示例及资源汇总： https://ask.dcloud.net.cn/article/34945

问题：注册全局组件

在mian.js

// 引入全局head导航组件
import publicHead from './pages/public/Head.vue';
let objHead = Vue.component('objhead',publicHead);

const app = new Vue({
    
    
    ...App
})
app.$mount()
// 追加全局组件
document.body.appendChild(new objHead().$mount().$el);

跨端注意

uni-app由uni的通用api和平台专有api组成，H5版也不例外。可以使用uni的通用api完成很多工作，也可以在条件编译里调用H5版的浏览器专有api。

虽然dom、window都可以用了，但如果要跨端，还是少写这样的代码好。

H5仍应该使用pages.json管理页面，强烈不建议使用浏览器的跳转页面的api。

H5的条件编译写法是把之前的app-plus换成H5。敲ifdef会有代码助手提示。

复制代码`//#ifdef H5  
this.titleHeight = 44  
//#endif`

条件编译目前有7个平台，APP-PLUS、APP-PLUS-NVUE、MP-WEIXIN、H5、MP、MP-BAIDU、MP-ALIPAY。

其中APP-PLUS-NVUE是APP-PLUS的子集，用于weex下单独写专用代码。

为了方便多平台选择，还引入了~~_{#ifndef</del>}，也就是ifdef的not，反向选择。以及或语法，及||。这些命名都是c语言条件编译的标准命名。~~

复制代码`// #ifndef H5  
console.log("这段代码编译到非H5平台");  
// #endif`

开发者之前为微信或app写的代码，H5的平台不支持时，需要注意把这些代码放到条件编译里。
经过这样的处理，之前做好的App或小程序才能正常运行到H5版里。

小程序版在UI上，尤其是导航栏上限制较多，H5在这里是参考了app，默认解析了pages.json下的app-plus的节点，实现了titleNView、buttons、下拉刷新（下拉刷新只有circle方式，因为只有这样的下拉刷新在H5版上可以保障流畅体验）

问题：怎么安装npm

https://uniapp.dcloud.io/frame?id=npm%e6%94%af%e6%8c%81

使用uniapp开发支付宝小程序的bug

1. 不支持@tab事件建议替换为@click

2. 不支持直接在html元素体里面写vuex的值

// 错误
<text class="uni-nav-bar-text citytitle">{
   
   { this.$store.state.city }}</text>
// 正确 需要在js 种进行赋值
<text class="uni-nav-bar-text citytitle">{
   
   { city }}</text>
// 监听页面显示
onShow(){
	console.log('页面显示')
	this.city = this.$store.state.homeCity;
	console.log(this.$store.state.homeCity)
}

3. 支付宝小程序的 createSelectorQuery 不支持 .in(this)

// #ifdef MP-ALIPAY
				uni.createSelectorQuery()
					.select('#list')
					.boundingClientRect()
					.exec(ret => {
    
    
						this.winOffsetY = ret[0].top
						this.winHeight = ret[0].height
						this.itemHeight = this.winHeight / this.lists.length
					})
				// #endif
				// #ifndef MP-ALIPAY
				uni.createSelectorQuery()
					.in(this)
					.select('#list')
					.boundingClientRect()
					.exec(ret => {
    
    
						this.winOffsetY = ret[0].top
						this.winHeight = ret[0].height
						this.itemHeight = this.winHeight / this.lists.length
					})
// #endif

安装