使用 uni-app 开发遇到的问题
<div>想法：</div><div>
<ul>
<li>uni-app 给我的感觉就像是把微信小程序的API，组件和vue的语法揉捏在一起所组成框架，没有原生小程序和vue那种流畅感，官方的 uni-ui 组件库不够成熟，坑比较多。</li>
</ul>
</div>
<div> </div>
<h3 id="3630-1568477184758">问题一：自定义导航栏适配</h3>
<div>
<ul>
<li>使用自定义导航栏以后手机顶部状态栏区域会被页面内容覆盖，这是因为窗体是沉浸式的原因，即全屏可写内容。官方给出了一个 --status-bar-height 的css变量,此时可以使用一个高度为 --status-bar-height 的 view 放在页面顶部，避免页面内容出现在状态栏。虽然解决了状态栏的适配，但是没有解决小程序里面胶囊高度的问题。</li>
</ul>
</div>
<div><img src="//note.youdao.com/src/E1BC11B0C99F40CC9DF643B49F48786C"></div>
<div><img src="https://img2018.cnblogs.com/blog/1044470/201909/1044470-20190918101217931-1356609811.png">
<div><img src="//note.youdao.com/src/E1BC11B0C99F40CC9DF643B49F48786C"></div>
</div>
<div>解决：</div>
<div>
<ul>
<li>在网上查找发现，Android跟iOS在导航栏与胶囊上有差异，可以通过uni.getSystemInfoSync()来获取手动获取状态栏的高度（微信小程序对应wx.getSystemInfoSync()），测试以后发现iOS胶囊按钮与状态栏之间距离为：6px， Android为8px，由于胶囊是原生组件，必须使用px才能适配。</li>
</ul>
</div>
<div>引用方案：</div>
<div>
<blockquote>
<div>导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 </div>
<div>Android导航栏高度 = 32px + 8px * 2 = 48px</div>
<div>iOS导航栏高度 = 32px + 6px * 2 = 44px </div>
</blockquote>
</div>
<div>template:</div>
<div id="8890-1568478465378" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><view class="nav">
<view class="status" :style="{ height: statusHeight + 'px' }"></view>
<view class="bar":style="{ height: navHeight + 'px' }"></view>
</view></pre>
</div>
<p>javascript:</p>
</div>
<div id="5450-1568478540798" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre>setNavSize: <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> sysinfo =<span style="color: rgba(0, 0, 0, 1)"> uni.getSystemInfoSync(),// 这里最好调用异步 getSystemInfo
statusHeight </span>=<span style="color: rgba(0, 0, 0, 1)"> sysinfo.statusBarHeight,
isiOS </span>= sysinfo.system.indexOf('iOS') > -1<span style="color: rgba(0, 0, 0, 1)">,
navHeight;
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (!<span style="color: rgba(0, 0, 0, 1)">isiOS) {
navHeight </span>= 48<span style="color: rgba(0, 0, 0, 1)">;
} </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
navHeight </span>= 44<span style="color: rgba(0, 0, 0, 1)">;
}
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.statusHeight =<span style="color: rgba(0, 0, 0, 1)"> statusHeight;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.navHeight =<span style="color: rgba(0, 0, 0, 1)"> navHeight;
}</span></pre>
</div>
<p>需要注意的是支付宝小程序自定义导航栏和微信小程序有差异，可以通过uni-app提供的条件编译解决</p>
</div>
<div>由此方案可以比较完美解决自定义导航栏适配问题。</div>
<div>参考：https://juejin.im/post/5ca0c4fc51882567ba6a6422</div>
<div> </div>
<h3 id="4827-1568478834186">问题二：原生 scroll-view 组件布局</h3>
<div>
<ul>
<li>原生的 scroll-view 组件不支持 flex 布局</li>
<li>导航栏小于五项时居中显示</li>
</ul>
</div>
<div>解决</div>
<div>
<ul>
<li>暂无较好的办法，只能在scroll-view组件里面再加一层view实现flex布局</li>
<li>scroll-view + justify-content: space-around；判断总项数是否小于五，小于五动态添加class</li>
</ul>
</div>
<div> </div>
<h3 id="3481-1568479419598">问题三：uni-ui 组件不能修改样式</h3>
<div>
<ul>
<li>在使用抽屉组件的时候出现了样式问题，因为使用了自定义导航，所以抽屉组件占满了全屏，在其它组件修改抽屉组件的class不起作用。</li>
</ul>
</div>
<div>解决</div>
<div>
<ul>
<li>方法一：在app.vue中修改class，此方法可以全局修改样式</li>
<li>方法二：修改组件源码，因为组件考虑的不是特别周全，可以修改组件的源码来实现自己想要的效果</li>
<li>方法三： <span class="cnblogs_code"><span style="color: rgba(128, 0, 0, 1)">/deep/ .class </span>{ }</span> 使用 uni-app 的 css 深度选择器</li>
</ul>
</div>
<h3 id="8380-1568616079346">问题四：修饰符失效</h3>
<div>解决</div>
<div>
<ul>
<li>uni-app 虽然是vue语法，但是并没有使用vue的修饰符，而是选择小程序的修饰符</li>
</ul>
</div>
<div> </div>
<h3 id="3845-1568626816365">问题五：使用支付宝开发工具无法识别项目</h3>
<div>解决</div>
<div>
<ul>
<li>等待支付宝小程序开发者工具启动后，在支付宝小程序开发者工具中打开：uniapp/unpackage/dist/dev/mp-alipay，然后在HBuilderX中修改文件并保存，会自动刷新支付宝小程序开发者工具</li>
</ul>
</div>
<div> </div>
<h3 id="3622-1568688953955">问题六：在不同平台显示不同样式</h3>
<div>解决</div>
<div>
<ul>
<li>uni-app 中提供了条件编译，完美解决了这个问题</li>
</ul>
</div>
<div><img src="//note.youdao.com/src/E6198258B65E42C2AA53EDE192096E1C"></div>
<div> <img src="https://img2018.cnblogs.com/blog/1044470/201909/1044470-20190918101343968-1215630599.png"></div>
<div> </div>
<div>
<h3>问题七：动态传值监听数据改变</h3>
<div>解决</div>
<div>
<ul>
<li>使用 vue 中的 watch 可以满足需求</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">watch: {
downtime: {
handler(newVal,oldVal) {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.date =<span style="color: rgba(0, 0, 0, 1)"> newVal;
},
immediate: </span><span style="color: rgba(0, 0, 255, 1)">true</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 监听第一次数据绑定</span>
<span style="color: rgba(0, 0, 0, 1)"> }
}</span></pre>
</div>
<p> </p>
</div>
</div>
<p></p><br><br>
来源：https://www.cnblogs.com/bfc0517/p/11539988.html
頁:
[1]