【前端】【uniapp】【vue】多端开发踩坑记录

文章目录

  • uniapp多端开发踩坑记录
    • ❓uview相关
      • 导入问题
      • 其他地方的引入也需如此:
      • uniapp 对uview的按需引入
      • 编译到小程序时的uview的按需引入
    • ❓抽屉弹出时右滑或左滑会返回整个页面
    • ❓头部搜索框和自带图标
    • ❓编译到微信小程序端
      • :style 编译到小程序不生效

uniapp多端开发踩坑记录

❓uview相关

导入问题

使用注释的方法是不可行的,也就是这样的按需引入是不行的
在这里插入图片描述
不要使用 “@/node_modules/uview-ui” 这样的绝对路径,因为这样编译到微信小程序会找不到模块

其他地方的引入也需如此:

【前端】【uniapp】【vue】多端开发踩坑记录_第1张图片

uniapp 对uview的按需引入

【前端】【uniapp】【vue】多端开发踩坑记录_第2张图片

编译到小程序时的uview的按需引入

【前端】【uniapp】【vue】多端开发踩坑记录_第3张图片

❓抽屉弹出时右滑或左滑会返回整个页面

问题:
【前端】【uniapp】【vue】多端开发踩坑记录_第4张图片
解决办法:
【前端】【uniapp】【vue】多端开发踩坑记录_第5张图片

❓头部搜索框和自带图标

效果:
【前端】【uniapp】【vue】多端开发踩坑记录_第6张图片

代码:

{
            "path" : "pages/productshow/productshow",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
				"app-plus": {
							"bounce": "none",
							"titleNView": {
								"backgroundColor":"#585858", //导航栏背景色
								// "type":"transparent",      //滚动渐显渐隐
								"autoBackButton":false,    //取消默认返回按钮
								"titleColor":"#ffffff",    //标题文字颜色
								"buttons":[{   //自定义按钮相关
									"type":"home",
									"float":"right",
									"background":"rgba(59,135,247,0.01)"  //透明状态 可设置按钮背景颜色透明度为0.01
								},{   //自定义按钮相关
									"type":"share",
									"float":"right",
									"background":"rgba(59,135,247,0.01)"  //透明状态 可设置按钮背景颜色透明度为0.01
								}
								,{   //自定义按钮相关
									"type":"favorite",
									"float":"right",
									"background":"rgba(59,135,247,0.01)"  //透明状态 可设置按钮背景颜色透明度为0.01
								}],
								"searchInput":{
										"align": "center",
										"placeholder": "优秀文创作品",
										"borderRadius":"40upx",
										"backgroundColor": "#fff"
									}
							}
						}
            }
            
        }
    

❓编译到微信小程序端

:style 编译到小程序不生效

解决办法:
【前端】【uniapp】【vue】多端开发踩坑记录_第7张图片

你可能感兴趣的:(前端大杂烩,前端,vue.js,uni-app)