uniapp的坎坷之路

ゝ一纸荒年。 2022-12-20 02:57 163阅读 0赞

# nvue中需要需要需要注意的几个大点 #

1.  单位只支持px
2.  宽度高度问题，如width:750px=100%；height：1250px=100%
3.  默认flex布局，flex-direction：column
4.  css属性不能合着写，如border：1px soilder red
5.  选择器只能单类，父类选择器等不支持
6.  引入css文件不能使用@import，用`<style src="">`
7.  在manifest文件中“app-plus”中记得记得设置\*\*“nvueCompiler” : “weex”\*\*，不然有些组件和uinapp冲突，如做轮播图的slider
8.  App不存在公共声明，需要在每个nvue文件引入相应的css文件
9.  HbuilderX“未检测到手机或浏览器”（手机），  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]  
    首先手机没有弹出信任提示，可以下载iTunes修复驱动  
    **不行再**  
    1.打开HBuilderX安装目录下的HBuilderX\\plugins\\launcher\\tools\\adbs文件夹。  
    2.删除除了文件夹外（1.0.31、1.0.36）的其他三个文件。  
    3.把1.0.31目录下的文件拷贝到HBuilderX\\plugins\\launcher\\tools\\adbs文件夹中，直接覆盖。  
    以上操作完成后重启HBuilderX，查看是否检测出手机，如果没有的话继续以下操作。  
    4.ios真机的是在通用-描述文件与设备管理-信任，下载插件就可以了。
10. 标签不能换行，会读空格
11. 修改和封装完组件要重启，不然界面还是不会更新
12. 引用uniapp的ui库中的uni-list，注意uni-list-item需要用uni-list包裹，[有关链接][Link 1]
13. 在uni-app模式下，跳转页面需要设置，"app-plus"下"searchInput"下"disabled"的值设置为true，  
    然后在与data同级下，调用`onNavigationBarSearchInputClicked()`中uni.navigateTo进行跳转
14. 注意新增页面的同时要在page.jsonp文件增加新配置
15. 在weex模式下，生命周期created下无法调用uni.onNavigationBarSearchInputClicked(),因此改用uni-app模式可以
16. 利用uniapp，实现父子组件之间的通信，首先在父组件定义事件

<zcm-radio-group :labels="labels1" @change="changeRadio"></zcm-radio-group>

changeRadio(index){ 
    					this.labels1.selected = index;
    			}

然后在子组件出发，利用@tap出发事件，在方法体

@tap="changeRadio(index)"

changeRadio(index){ 
    				this.$emit('change',index)
    			}

1.  对于设计数据组选中样式的改变的数据样式可以：

labels2:{ 
    					selected:0,//被选中的索引值
    					list: [
    						{  name:'耳机', },
    						{  name:'户外', },
    						{  name:'配件', }
    					]
    				}

1.  组件设计可以利用boolean和计算属性结合，父组件可以只传布尔值，子组件通过计算属性改变相应的css样式

**父组件**

**子组件：**

export default{ 
    		props:{ 
    			// 是否头部标题加粗
    			titleWeight:{ 
    				type:Boolean,
    				default:true
    			}
    			
    		},
    		computed:{ 
    			gettitleClass(){ 
    				let titleWeight =  this.titleWeight ? 'font-weight' : ''
    				return `${ titleWeight}`
    			}
    		}
    	}

1.  uni-list-item绑定事件要用native修饰

<uni-list-item extraWidth="5%" titleStyle="display:flex;color:#858585;font-size:20upx;" **@click.native="show"**>
    				<view class="d-flex">
    									
    					<text class="mr-2 text-muted">配送</text>
    					<text class="main-text-color ml-2">有现货</text>
    					<text class="main-text-color"></text>
    				</view>
    </uni-list-item>

1.  使用uParse富文本编辑器  
    [在这下载][Link 2]  
    [img标签注意点][img]
2.  uniapp阻止事件冒泡@click.stop失效，请用\*\*@click.native.stop\*\*(调用原生层的根元素，要用native修饰符)或者@tap.stop
3.  在使用uniapp的数字盒子uniNumberBox的时候，因为绑定的value值要求string类型，但是数据结构中的id值是number类型，这时候应该修改为：value=“item.id+‘’”，进行巧妙的转化。  
    25.在uniapp使用vuex的时候  
    首先要在main.js文件下先声明

import store from '@/store/index.js'在这里插入图片描述
    
    
    
    
    Vue.prototype.$store = store

然后在同级之下建立文件夹，使用模块化存放数据，进行数据管理

![在这里插入图片描述][20201124110757750.png_pic_center]  
在index.js记得引入模块，这里不能用export default 用const ，再export default 变量

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    import cart from './modules/cart.js'
    import path from './modules/path.js'
    
    const store = new Vuex.Store({ 
    	modules:{ 
    		cart,
    		path
    	}
    })
    
    export default store

再模块中，state是变量声明，getters是利用数组等api，过滤器等进行计算，actions是写函数，与actions不同的mutations是可以利用commit异步调用函数  
![在这里插入图片描述][20201124111146332.png_pic_center]

1.  组件封装  
    1、属性：props  
    2、样式：computed  
    3、事件：  
    （1）若多次调用组件事件代码一致，且没有对父组件传递过来的数据进行修改的情况。将事件统一书写在组件内部。  
    （2）若多次调用组件事件代码不一致，或对父组件传递过来的数据需要修改。使用自定义事件： $emit(“事件名”，参数);  
    子组件接受的数据类型是String类型，则父组件不用事件绑定，直接传值，`eg:<card showHead> </card>`
2.  uni-app底部tab栏安全距离遮挡以及底部tabbar距离  
    在要显示的标签上加上以下css样式

# 待完，我觉得uni-app的坑还有得我去挖55555555 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/abfa9f3280cc482eb8a28ab7989db5ca.png
[Link 1]: https://www.h5w3.com/16751.html
[Link 2]: https://github.com/dcloudio/uParse
[img]: https://uniapp.dcloud.io/component/image
[20201124110757750.png_pic_center]: /images/20221120/76c6c29b5500420fb8caa7c2df7cecee.png
[20201124111146332.png_pic_center]: https://img-blog.csdnimg.cn/20201124111146332.png#pic_center