uni-app的踩坑之旅

EmiliaLiu
334 阅读2分钟

官网：uniapp.dcloud.net.cn/

运用Hbuilder X创建一个项目

image.png

管理项目：dev.dcloud.net.cn/pages/app/l…

通过Hbuilder创建的项目可以登录开发者中心，对项目和成员进行管理

小程序到uni-app的转换器

目前已经有作者开源了小程序转uni-app的转换器

使用转换器不是100%转换的，有些组件和语法、第三方框架暂时还不支持，只能手动修改。转完是vue2版本的

h5转uni-app

目前没有插件可用，只能手动修改

Hbuilder创建的项目转npm包，脱离Hbuilder：uniapp.dcloud.net.cn/quickstart-…

css

  1. 不支持兄弟、父子选择器等，比如 “>,~”不支持，会报错

html

  1. 标签会被转成view ，建议用span替代

JS

  1. 不认识window.location.href 、createElement、document等元素，需要用uni提供的api（小程序端）
   //获取页面元素 
   let query = uni.createSelectorQuery().in(this);   
   
   //获取windows信息 
  uni.getWindowInfo() 
  
  // 获取系统信息
  uni.getSystemInfo()

  1. 请求接口必须带协议头，小程序内它不给补

  2. 外部JS引入，外链引入？小程序报错

组件更换

image：<image> 不重置宽高，组件默认宽度 320px、高度 240px，值得注意的是如果设置height:auto浏览器渲染结果是高度为0.

表单组件、 swiper

滚动踩坑

滚动分为页面滚动和scroll-view滚动

页面滚动：

onPageScroll(e) { 	
//通过这个函数钩子获取页面滚动信息 	
e.scrollTop 
//页面滚动的高度 
} 

uni.getWindowInfo().screenHeight
//获取页面可视区的高度  

// 计算文档总高度 
const query = uni.createSelectorQuery().in(this); 
uni.getSystemInfo({ 	
    success: resu => { 		
        const query = uni.createSelectorQuery() 		
        query.select('.list-main').boundingClientRect() 		
        query.exec(res => { 			
            res[0].height  //获取文档的总高度 			
            //可以通过计算实现加载更多 		
        }) 	
     } 
  })

scroll-view滚动

//使用scroll-view必须设置高度，否则获取不到滚动信息，走的还是页面的滚动条  
<scroll-view class="list-main" scroll-with-animation scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"> 

scroll (e) { 				
    let self = this; 				
    // console.log(e) 				
    //记录scroll 位置 				
    self.oldScrollTop = e.detail.scrollTop; 
    
    //滚动的高度 				
    self.isShowGoTop = self.oldScrollTop>500; 
    
    //显示返回顶部按钮 				
    e.detail.scrollHeight  
    //scroll-view的总高度
}, 			

//返回顶部 			
goTop(){ 				 				
    //视图会发生重新渲染 				
    this.scrollTop = this.oldScrollTop 				
    //当视图渲染结束 重新设置为0 				
    this.$nextTick(() =>{ 					
        this.scrollTop = 0 				
    }); 				
    this.isShowGoTop = false; 			
}

如果需要使用router，需要单独安装插件uni-simple-router

npm包开发模式 直接执行 

npm install uni-simple-router

hbuilder创建的项目可以去插件市场安装插件

有一些插件只能通过npm包的形式安装，比如：weixin-js-sdk

npm install weixin-js-sdk

如果你是hbuilder创建的项目，可以引入cdn地址，最好不要放在index.html中（index.html可以在manifest.json中设置），可以通过js的方式添加，如果是全局引入，可以放在main.js中

自定义模板参考：uniapp.dcloud.net.cn/collocation…

一个分享的例子

main.js

// #ifdef H5 var shareDesc = "XXXX"; 
var shareTitle = "XXXXX"; 
var shareLink = window.location.href; 
var photourl = "分享图片"; 
let script0 = document.createElement('script') let script1 = document.createElement('script') let script2 = document.createElement('script') let script3 = document.createElement('script') script0.type = 'text/javascript' 
script1.type = 'text/javascript' 
script2.type = 'text/javascript' 
script3.type = 'text/javascript' 
script0.innerText = `var photourl ='${photourl}';var shareTitle ='${shareTitle}';var shareLink ='${shareLink}';var shareDesc ='${shareDesc}';` 
script1.src = 'jquery-1.4.2.min.js' 
script2.src = '//res.wx.qq.com/open/js/jweixin-1.0.0.js' 
script3.src = '分享方法封装' 
document.getElementsByTagName('head')[0].appendChild(script0) 
document.getElementsByTagName('head')[0].appendChild(script1)
script1.onload = function () {  
document.getElementsByTagName('head')[0].appendChild(script2)   
script2.onload = function(){ 	
document.getElementsByTagName('head')[0].appendChild(script3)   } }  // #endif

单页面添加小程序分享

 /**    * 用户点击右上角分享    */   
 onShareAppMessage(res) { 		
     return { 			
     title: "分享标题文案", 			
     path: "/pages/sharkList/sharkList",//分享页面路径  			
     imageUrl: "分享图片链接", 		
     } 		 	
 },
avatar
文章
阅读
粉丝