uniapp 开发记录

[lengziyu]

单位

用rpx

布局

用Flex

打包

云端打包

安卓端&iOS 云端打包流程：打开HBuilderX，顶部菜单【发行->原生App-云打包】，选打自定义调试基座，等待打包成功，原生App-查看云打包状态，编辑器底部打印台会显示最近打包的地址，点击下载即可。 注：iOS端需要苹果开发证书。

本地离线打包

安卓 用官方HBuilder-Hello的项目， 参考这个：uni-app用AndroidStudio打包apk文件

h5与app区别

1. CSSbackground-size属性，写在CSS里h5端生效，但是app端无效：

   // app无效
   uni-swiper-item{
       background-size: 100% 100%;
   }

   解决方法：就是在标签动态添加backgroundSize属性：

   <uni-swiper-item 
   :style="{ backgroundImage: 'url('+ banner.url +')', backgroundSize: 'cover' }"
   >
   </uni-swiper-item>

[lengziyu]

目录结构

┏━ common【公共js】 ┣━ api 【全站接口api管理】 ┣━ components 【可复用组件】 ┣━ platforms 【存放各平台专用页面的目录】 详见 ┣━ wxcomponents 【小程序组件目录】 详见 ┣━pages 【存放页面】 ┣━static 【静态资源css、js、图片等】 ┣━App.vue 【应用配置，用来配置App全局样式以及监听】 详见 ┣━main.js 【Vue初始化入口文件，配置一些全局】 ┣━manifest.json 【配置应用名称、appid、logo、版本、开机启动页等打包信息】 详见 ┣━pages.json 【页面路由管理】 ┣━uni.scss 【uni内置的常用样式变量，插件安装的】

[lengziyu]

一些涉及业务

下拉刷新

在pages.json设置某个页面的styles值：

"pages": [
    {
        "path": "pages/news/list",
        "style": {
                         // 这个值是所有端都带下拉刷新的，如果只想设置app端有其他参数 (详见)[https://uniapp.dcloud.io/collocation/pages?id=style]
            "enablePullDownRefresh": true
        }
    }
}

页面里使用

onLoad() {
    this.getList();
},
// 停止下拉刷新
onPullDownRefresh() {
    this.getList();
    setTimeout(function () {
        uni.stopPullDownRefresh();
    }, 1000);
},

页面切换动画

有以下三种设置方法：

• pages.json
• [navigator]()
• uni.navigateTo

输入框是弹框形式，ios收起的时候偶尔出现白屏

原因是被顶上去，收起软键盘的时候滚动回顶部就可以了。

uni.pageScrollTo({
        scrollTop: 0,
    duration: 0
});

[lengziyu]

app专属设置

导航栏

导航栏在pages.json文件设置，设置特定app端才有，是在pages->style->app-plus配置项配置的。 去掉导航栏

"style": {
    "navigationBarTitleText": "新闻列表",
    "app-plus": {  
        "titleNView": {  
            "type": "transparent"  
        }  
    } 
}

详见

[lengziyu]

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• ifdef：if defined 仅在某平台存在

• ifndef：if not defined 除了某平台均存在

• %PLATFORM%：平台名称

  模板

  <!-- #ifdef APP-PLUS -->  
  <text class="app-text">text</text>  
  <!-- #endif --> 

  CSS

/ #ifdef MP-ALIPAY/
input {
padding: 0;
}
/ #endif /

### JS

// #ifdef APP-PLUS
plus.speech.startRecognize(options, function (result) {
console.log('语音识别成功');
}, function (error) {
console.log('语音识别失败');
});
// #endif

[详见](https://uniapp.dcloud.io/platform)

[lengziyu]

一些报错记录

1.在组件使用uni.createSelectorQuery().select('.list')，报错信息如下：

[ERROR] : Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./components/sl-list/slot-order.wxss:31:28)This wxss file is ignored.

解决： 在.select()前加上.in()，然后获取方法挂载在mounted，而且组件中请使用class选择器。

uni.createSelectorQuery().in(this).select('.swiper ');