uni-app 踩坑之路(长期更新)

资料

uni-app 官网

正文

1. 基本创建并启动工程操作

原文地址

  • 项目的创建
    # 全局安装脚手架的两种方式
    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    
    # 新建工程 => 选择`默认模板`即可
    vue create -p dcloudio/uni-preset-vue my-project
    
  • 项目的启动(本地启动微信小程序服务)
    # 本地启动微信小程序服务
    yarn dev:mp-weixin
    
  • 之后手动在微信开发者工具中导入该项目,一次选中 my-project => dist => dev => mp-weixin 目录点击确定即可

2. 安装 sass-loader 之后,由于版本过高,导致报错无法成功编译

3. 微信小程序底部的 icon

  1. icon 尺寸需要是 81*81 的,不然会非常模糊

参考文章:小程序底部的tabbar图片显示老是会模糊,不管放多大的图都模糊,什么原因

  • 对比图


    对比图.png
  1. icon 的周围要适当的留白,不能全部填满,不然不好看
  • 示意图,如下所示对比非常的明显
示意图.png

4. 微信小程序相关的语法,在应用中中需要注意的地方

  1. image 标签高度随宽度自适应

    <image mode="widthFix" />
    
  2. image 标签宽高自适应铺满,但是会裁切掉部分的图片

    <image mode="aspectFill" />
    
  3. scroll-view 页面下拉滚动组件

    <template lang="pug">
        scroll-view.home(@scrolltolower="handelToLower" scroll-y)
    </template>
    
    <script>
        export default {
            methods: {
                /**
                * 页面内容滚动到底部 回调函数
                */
                handelToLower() {
                   console.log("到底部啦!");
                }
            },
        }
    </script>
    
    • scss 需要特殊设置
      .home {
      // 小程序使用
      height: 100vh;
      // #ifdef  H5
      // 减去顶部标题和底部导航的高度,与微信小程序保持一致,会覆盖上方的设置
      height: calc(100vh - 44px - 50px);
      }
      
    • 当内部内容有 flex 布局的话,需要在属性中增加 enable-flex,否则无效
  4. swiper 轮播图组件

    <template lang="pug">
        swiper(autoplay indicator-dots circular)
            swiper-item(v-for='item in bannerList' :key="item.url")
            image(:src="item.url")
    </template>
    
    <script>
        export default {
            data() {
                return {
                    bannerList: [
                        {
                        url:
                            "https://img.alicdn.com/tfs/TB1g4DmcggP7K4jSZFqXXamhVXa-520-280.jpg_q90_.webp"
                        },
                        {
                        url:
                            "https://img.alicdn.com/simba/img/TB13oCCSpXXXXctaXXXSutbFXXX.jpg"
                        },
                        {
                        url:
                            "https://img.alicdn.com/simba/img/TB1b2svaODsXe8jSZR0SutK6FXa.jpg"
                        },
                        {
                        url:
                            "https://img.alicdn.com/simba/img/TB1x3imuXY7gK0jSZKzSuuikpXa.jpg"
                        },
                        {
                        url:
                            "https://img.alicdn.com/tfs/TB18NsRcsVl614jSZKPXXaGjpXa-520-280.jpg_q90_.webp"
                        }
                    ]
                };
            }
        };
    </script>
    
    • scss 需要特殊处理一下
      .swiper-content {
      swiper {
          // 1.9 是 banner 图片的宽高比例 520/280 = 1.8571428571428572
          height: calc(750rpx / 1.9);
          image {
          height: 100%;
          }
      }
      }
      
  5. uni-segmented-control 分段器组件

    <template lang="pug">
        .home-tab
            .tab-title-list
            uni-segmented-control(:current="current" :values="items.map(v => v.title)" @clickItem="onClickItem" style-type="text" active-color="#2b7bff")
            .tab-title-search
        .home-content
            home-recommend(v-if="current === 0")
            home-category(v-if="current === 1")
            home-new(v-if="current === 2")
            home-album(v-if="current === 3")
    </template>
    
    <script>
        import homeAlbum from "@/pages/home/home-album";
        import homeCategory from "@/pages/home/home-category";
        import homeNew from "@/pages/home/home-new";
        import homeRecommend from "@/pages/home/home-recommend";
        import { uniSegmentedControl } from "@dcloudio/uni-ui";
        export default {
            components: {
                homeAlbum,
                homeCategory,
                homeNew,
                homeRecommend,
                uniSegmentedControl
            },
            data() {
                return {
                    items: [
                        {
                        title: "推荐"
                        },
                        {
                        title: "分类"
                        },
                        {
                        title: "最新"
                        },
                        {
                        title: "专辑"
                        }
                    ],
                    current: 0
                };
            },
            methods: {
                /**
                * tab 切换 回调函数
                */
                onClickItem(e) {
                    if (this.current !== e.currentIndex) {
                        this.current = e.currentIndex;
                    }
                }
            }
        };
    </script>
    
  6. navigator 链接跳转功能

    <template lang="pug">
        navigator(url="/pages/home/home-album/details")
            text 测试
    </template>
    

    这个跳转的地址与 pages.json 中设置的 pages => path 属性值保持一致。需要注意的是:不可以和 tabBar 中使用的 pagePath 一致,否则无效。

  7. text 标签可以识别数据中的转义字符,如 \n 会识别为换行符

  8. video 标签

    • 视频预览图充满整个容器的属性,默认是正常的比例展示的
      objectFit="fill"
      
  9. button 标签

    • 设置分享,使用微信小程序的内置功能
      button(open-type="share") 分享
      

5. 为 H5 方式的服务,设置代理,防止浏览器拦截接口请求

  1. manifest.json 文件,增加 h5特有相关 配置
    /* h5特有相关 */
    "h5": {
        "devServer": {
            "port": 8000, //端口号
            "disableHostCheck": true,
            "proxy": {
                "/api": {
                    "target": "http://xxxx.cn", //目标接口域名
                    "ws": true, // proxy websockets
                    "changeOrigin": true, //是否跨域
                    "pathRewrite": {
                        "^/api": ""
                    }
                }
            }
        }
    }
    
  • 使用演示
    wx.request({
    url: "api/xxxxx",
    success(res) {
        console.log(res)
    }
    })
    
  1. 需要注意的是,这样写微信小程序是不会识别的,所以还需要使用官方文档中的 条件编译 的方式来进行处理,下文中可查看具体的使用方式

6. 使用 条件编译 的方式,对某个平台单独设置

  1. 完善上方接口请求方式
  • main.js 文件,增加全局变量(也可以在 APP.vue 文件中使用 globalData 的方式增加全局变量)
    // 条件编译,设置相应环境的变量值 https://uniapp.dcloud.io/platform?id=%e6%9d%a1%e4%bb%b6%e7%bc%96%e8%af%91
    // #ifdef  MP-WEIXIN
    // 接口请求地址
    Vue.prototype.APINAME = "http://xxx.cn"
    // #endif
    
    // #ifdef  APP-PLUS || H5
    // 使用 manifest.json 中的 devServer 代理配置,防止浏览器阻拦接口请求
    Vue.prototype.APINAME = "api"
    // #endif
    
  • 使用演示
    wx.request({
    url: `${this.APINAME}/xxxxx`,
    success(res) {
        console.log(res)
    }
    })
    
  1. 在样式代码中使用条件编译

    由于 100vh 在微信小程序和 H5 两个环境中不一样的问题,才有了这样的需求

    .home {
    // 小程序使用
    height: 100vh;
    // #ifdef  H5
    // 减去顶部标题和底部导航的高度,与微信小程序保持一致,会覆盖上方的设置
    height: calc(100vh - 44px - 50px);
    }
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249