找到
4
篇与
uniapp
相关的结果
-
uniapp如何自定义顶部导航？ uniapp很多情况下并不想要系统自带导航，如果自定义导航呢？ 第一步 首先在 page.json 文件添加如下代码，意思是自定义导航 "navigationStyle": "custom"第二步 极端导航栏高度 onLoad() { let res = uni.getSystemInfoSync(); let menu = wx.getMenuButtonBoundingClientRect(); this.statusBarHeight = (menu.top - res.statusBarHeight) * 2 + menu.height + res.statusBarHeight; if (res.model.indexOf('iPhone') > -1) { this.statusBarHeight += 4 } }第三步 胶囊高度计算 getSystemStatus() { setTimeout(() => { uni.getSystemInfo({ success: function(res) { let menu = wx.getMenuButtonBoundingClientRect(); //获取获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。（top表示上边框到手机顶部的距离 bottom是下边框到手机顶部的距离） console.log('下至'+menu.bottom,'上至'+menu.top,'这个？'+res.statusBarHeight) console.log(menu.bottom + menu.top - res.statusBarHeight,'看下参数') } }); }) },
-
uniapp发布h5后debugger消失 今天发布h5进行debugger调试，结果编译后的h5并没有console和debugger,导致无法查看。后经过查找解决，记录一下！ 封面.png图片 通过修改项目根目录下vue.config.js文件进行解决，这是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项。 参考文档： https://uniapp.dcloud.net.cn/collocation/vue-config.html https://cli.vuejs.org/zh/guide/webpack.html 通过修改drop_console中的drop_debugger来实现 module.exports = { productionSourceMap: false, // 生产打包时不输出map文件，增加打包速度 configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress.warnings = true config.optimization.minimizer[0].options.terserOptions.compress.drop_console = false config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = false } } }一键清除项目中无用的console.log代码 module.exports = { productionSourceMap: false, // 生产打包时不输出map文件，增加打包速度 configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress.warnings = false config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'] } } }这个东西主要是webpack中的uglifyjs-webpack-plugin插件，该插件是用于减少我们代码js代码体积，uniapp在编译的时候会使用该插件进行压缩！
-
uniapp中使用svg彩色图标 图片 1、iconfont.cn中找到喜欢的图标添加至项目 图片 2、进入项目 OmTDw8.png图片 3、选择Symbol选项，打开链接，全选复制 OmTrTS.png图片 4、保存为一个js文件（如：svg.js） 5、复制到在uniapp项目，common目录下 6、在main.js中导入svg.js文件 import svg from './common/svg.js'; Vue.use(svg)7、在页面中使用 <svg class="icon" > <use xlink:href="#icon-caomei"></use> </svg>8、调整图标大小 .icon { width: 48px; height: 48px; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }9、动态赋值 <svg class="icon"> <use v-bind:xlink:href="'#'+item.cover"></use> </svg>
