uni-app开发中的各种问题处理

小灼發表於 2019-10-29 13:24:00

特别注意：
　　※：在components下的组件，图片路径用 /static/img/back.png  这样的根路径形式，不要用../static  或者 ../../static 的形式，不然很坑，有些平台不报错也不显示，有些找不到路径。
 
tips：防止弹窗遮罩时页面可滚动，在弹窗的外层view标签加上 @touchmove.stop.prevent=""
　
1、关于自定义导航栏中的刘海屏适配问题：
官方提供了一个CSS变量可以直接引用：
var(--status-bar-height)
该变量自动匹配设备平台状态栏高度
此变量可以用calc() 加上其他单位数值来使用
具体参数和说明：官方使用自定义导航栏注意事项
 
2、swiper中高度无法自适应时，采用动态获取节点赋值给外层swiper组件
<pre>uni.createSelectorQuery()后加.in(this)可以防止app端出错</pre>
<div class="cnblogs_code">
<pre><swiper :indicator-dots="true" :style="{height:listHeight+'px'}" :autoplay="false" :interval="3000" :duration="1000"></swiper></pre>
</div>
<div class="cnblogs_code">
<pre>　　var _self;
export default {
 data() {
 return {
 listHeight:215
 }
 },
 onLoad() {
 _self=this;
 _self.getEleHeight('.swiper-item');
 },
 onShow() {

 },
 methods: {
 getEleHeight(list){
 let info = uni.createSelectorQuery().in(_self).select(list);
 　　　　info.boundingClientRect(function(data) { //data - 各种参数
 　　　　 if(data != null){
 _self.listHeight = data.height;
 }else{
 setTimeout(function(){
 _self.getEleHeight('.swiper-item');
 },300)
 }
 　　 }).exec()
 }

 }
}</pre>
</div>
 3、横向scroll-view随子元素宽度自适应
      关键在于给scroll-view的直接下一层view设置如下css:
　　width:auto;
　　display: inline-block;
　　white-space: nowrap;
<div class="cnblogs_code">
<pre> <scroll-view scroll-x="true" class="scroll_box">
 <view class="list">
 <view class="item" v-for="(item,index) of 4" :key="index">

 </view>
 </view>
 </scroll-view></pre>
</div>
 
<div class="cnblogs_code">
<pre>.scroll_box{
width: 100%;
height: auto;
}

.list{
width: auto;
height: 100upx;
display: inline-block;
white-space: nowrap;
}

.item{
width:320upx;
display: inline-block;
height: 100%;
}</pre>
</div>
 
4、uniapp配置原生导航栏的字体图标
例如配置阿里巴巴字体图标库里的图标：选择要用的图标加入购物车，然后点购物车中的下载代码，得到其中的iconfont.css和iconfont.ttf，拷贝到项目使用即可。
代码如下：text属性的值就是iconfont.css里面对应图标的content值（需‘\u’开头），对应官方文档：https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons
<div class="cnblogs_code">
<pre> "app-plus":{
 "titleNView":{
 "buttons":[
 {
 "text": "\ue67e",
 "fontSrc": "/static/iconfont/iconfont.ttf",
 "fontSize": "22px",
 "width":"auto"
 }
 ]
 }
}</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1157406/202009/1157406-20200911093516585-137630740.png">
 
5、关于tabbar的一些情况
建议使用配置的tabbar，自定义的view没有缓存机制。
如果是子页面要做tabbar，可以用组件形式合并到一个页面去，分别控制显示隐藏。
原生tabbar其实很多功能，参考读完以下知识点能实现大部分需求：
tabbar文档API方法：https://uniapp.dcloud.io/api/ui/tabbar
tabbar官网详解：https://uniapp.dcloud.io/collocation/pages?id=tabbar
 
6、保存图片到本地
真机亲测至少安卓有用，更多请查看：uni图片保存本地（app和微信小程序端）
<div class="cnblogs_code">
<pre> uni.showModal({
 title: '提示',
 content: '确定保存到相册吗',
 success: function (res) {
 if (res.confirm) {

 uni.downloadFile({
 url: _self.ewmImg,//图片地址
 success: (res) =>{
 if (res.statusCode === 200){
 uni.saveImageToPhotosAlbum({
 filePath: res.tempFilePath,
 success: function() {
 uni.showToast({
 title: "保存成功",
 icon: "none"
 });
 },
 fail: function() {
 uni.showToast({
 title: "保存失败",
 icon: "none"
 });
 }
 });
 }
 }
 })


 } else if (res.cancel) {

 }
 }
 });</pre>
</div>
7、app端动态修改原生导航栏信息
<div class="cnblogs_code">
<pre> // #ifdef APP-PLUS
 var pages = getCurrentPages();
 var page = pages;
 var currentWebview = page.$getAppWebview();
 var tn = currentWebview.getStyle().titleNView;
 tn.buttons[0].text = "自定义";
 tn.buttons[0].color ="#333333";
 currentWebview.setStyle({
 titleNView: tn
 });
 // #endif</pre>
</div>
 
8、官方富文本编辑器editor（目前除了视频音频等未实现大部分常用功能都得到了支持）
组件链接：https://uniapp.dcloud.io/component/editor
API链接：https://uniapp.dcloud.io/api/media/editor-context
注意事项：
保存富文本的html内容时，如果图片进行了手动伸缩大小，建议对标签内的图片width属性处理成百分比，默认是具体像素值，无法兼容不同屏幕宽度。
解析富文本内容可以用v-html 或者 rich-text 属性，个人推荐v-html，之前测试时rich-text不能解析带下划线的文字，也可以去插件市场找好的插件解析。
 
9、app资源升级更新方案地址：https://ask.dcloud.net.cn/article/34972
 

</div>
<div id="MySignature" role="contentinfo">
有人住高楼，有人处深沟。
有人光万丈，有人一生绣。
时光是匆匆，回首无旧梦。
人生若几何，凡尘事非多。
深情总遗却，妄自也洒脱。 
来源：https://www.cnblogs.com/nanyang520/p/11758187.html

頁: [1]

琼殿技术论坛's Archiver

uni-app开发中的各种问题处理